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.
Example
<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>
<p> is a block-level element that occupies a full row width. Even if you place two <p> elements on the same line in your HTML, the browser will render them as two independent blocks.
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.
Example
<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>
<br> to create paragraph spacing. If you want larger gaps between paragraphs, use CSS margin instead of stacking multiple <br> tags.
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:
Core principle: When the browser encounters <, it treats it as the start of a tag. To display it as a "less than" sign, you must write <. Similarly, the & symbol itself needs escaping because it is the prefix for entity references.
The 5 most commonly used escape characters:
| Char | Code | Description |
|---|---|---|
|
|
Non-breaking space |
< |
< |
Less than |
> |
> |
Greater than |
& |
& |
Ampersand |
" |
" |
Double quote |
❓ FAQ
<p> and <br>? When should I use each?<p> is a paragraph tag that creates an independent text block — the browser automatically adds spacing before and after. <br> is a line break tag that forces a new line within the same paragraph, without creating a new paragraph. Simply put: <p> for "start a new paragraph," <br> for "break a line within the same paragraph." A common mistake is using multiple <br> to create paragraph spacing — this is wrong; use multiple <p> tags instead.<br> to create spacing?<br> for spacing is an outdated web design habit — absolutely not recommended. Three reasons: 1) Semantically wrong — <br> means "line break," not "spacing," like using Enter key instead of paragraph breaks; 2) Hard to maintain — to adjust spacing, you'd need to delete or add multiple <br>, while CSS margin only needs one value change; 3) Responsive issues — multiple <br> create inconsistent spacing across different screen sizes. Correct approach: use <p> tags for paragraphs, CSS margin for spacing control. and a regular space in HTML? (non-breaking space) has two functions: 1) It doesn't collapse — multiple display as multiple spaces; 2) It prevents browsers from breaking lines at that point — words connected by are treated as a unit and won't be split across lines. Common uses: between numbers and units (like 100 px), between names (like John Doe).📖 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), - Don't abuse
<br>to create paragraph spacing — use CSSmargininstead
📝 Exercises
- 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. - 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 &." (Hint: You need to correctly nest character entities so that the browser displays the entity itself, not the character it represents.)