With our page structured by headings, it's time to add the main content. This lesson covers three simple but essential tags for handling text blocks and spacing.
The Paragraph Element (<p>)
The <p> tag is for any block of text that forms a paragraph. Browsers automatically add a margin above and below paragraphs to separate them visually.
The Code:
<p>This is the first paragraph. The browser will wrap the text and add space around it.</p>
<p>This is the second paragraph, clearly distinct from the first.</p>The Line Break Element (<br>)
The <br> tag forces a line break. It's for when you need to start a new line but not a new paragraph. This is a "void element," meaning it has no closing tag. It's perfect for addresses or poetry.
The Code:
<p>Projectworlds<br>
123 Web Dev Lane<br>
Code City, 12345</p>The Horizontal Rule Element (<hr>)
The <hr> tag creates a thematic break between sections. Browsers display this as a horizontal line. It's also a void element.
The Code:
<p>This concludes the first topic.</p>
<hr>
<p>Now we begin the second topic.</p>Best Practice Tip: Never use empty tags like <p></p> or multiple <br> tags just to create space. That's considered old and messy. All visual spacing should be handled by CSS.
What's Next: We know how to format blocks of text, but what about individual words? In our next lesson, we'll dive into the critical difference between making text bold for style versus for importance.