HTML Paragraphs

Paragraphs are the most basic way to organize text on a web page. Mastering common text tags makes content more readable.

The Paragraph Tag <p>

The <p> tag (paragraph) is used to define a paragraph. The browser automatically adds spacing (margin) before and after paragraphs, creating natural separation between them.

Multiple <p> elements arranged in sequence form the body structure of an article. This is the most common way text is organized on the web — news articles, blog posts, product descriptions, and more are all built upon paragraphs.

<p>This is the first paragraph. Browsers automatically add spacing before and after paragraphs.</p>
<p>This is the second paragraph, immediately following the first. Paragraphs on the page are naturally separated, creating a clear reading rhythm.</p>
<p>This is the third paragraph. Multiple paragraphs arranged in sequence form a complete article.</p>

Line Break and Horizontal Rule

In addition to the paragraph tag, HTML provides two void tags related to text layout: <br> and <hr>.

The Line Break Tag <br>

<br> (break) represents a forced line break in text. It's suitable for addresses, poetry, song lyrics, and other scenarios where manual line break positions are needed. Note: <br> is not for creating paragraph spacing — paragraph spacing should be controlled with <p> or CSS.

The Horizontal Rule <hr>

<hr> (horizontal rule) draws a horizontal line on the page, typically indicating a thematic break or section separator. Like <br>, <hr> is also a void tag.

<p>This is a line of text,<br>and this is text after a line break in the same paragraph.</p>

<hr>

<p>Above the divider is the first half, below is the second half.</p>

<p>Address example:<br>
123 Main Street<br>
Suite 12<br>
ZIP: 10001</p>

HTML Character Entities

In HTML, certain characters have special meanings (e.g., < and > are used for tags). If you want to display these characters as-is on the page, you must use character entities (also called HTML entities).

Common character entities are listed below:

Why do we need escaping? Because when the browser parses HTML, it treats < as the beginning of a tag. If you write <p> directly, the browser thinks you're defining a paragraph tag rather than displaying the text "<p>". Character entities tell the browser: this character is not tag syntax, it's plain text.

<p>Using character entities to display special symbols:</p>
<ul>
  <li>Less than: &lt; (writing < directly would be mistaken for a tag)</li>
  <li>Greater than: &gt; (writing > directly would be mistaken for a tag end)</li>
  <li>Ampersand: HTML &amp; CSS (displays as HTML & CSS)</li>
  <li>Copyright: Copyright &copy; 2024</li>
  <li>Non-breaking space: Hello&nbsp;&nbsp;World (two spaces)</li>
</ul>

📖 Summary

• <p> defines a paragraph; it's a block-level element, and the browser automatically adds spacing before and after
• <br> forces a line break, <hr> draws a horizontal rule — both are void tags
• Character entities are used to display special characters: < (less than), > (greater than), & (ampersand),   (non-breaking space)
• Don't abuse <br> to create paragraph spacing — use CSS margin instead

📝 Exercises

1. Text Layout Practice: Use <p>, <br>, and <hr> tags to write a short text containing: three paragraphs, one address (using <br> for line breaks), and one divider line.
2. Character Entity Practice: Display the following content on a page: "HTML uses <p> tags to define paragraphs, and the & symbol needs to be escaped with &amp;."
   (Hint: You need to correctly nest character entities so that the browser displays the entity itself, not the character it represents.)