30 Mins beginner
3. Headings & Paragraphs
HTML
Headings & Paragraphs
Text is the foundation of the web. HTML gives you a hierarchy of tags to structure text with meaning — not just appearance.
🏷️ The 6 Heading Levels
HTML has 6 heading levels. <h1> is the most important (used for the main page title). Only use one <h1> per page — Google penalizes you for using more. Use <h2> through <h6> for subheadings.
<h1>Page Title (h1) — Use Only Once</h1>
<h2>Main Section (h2)</h2>
<h3>Subsection (h3)</h3>
<h4>Sub-subsection (h4)</h4>
<h5>Minor heading (h5)</h5>
<h6>Smallest heading (h6)</h6>
📝 Paragraphs
The <p> tag wraps a block of text. The browser automatically adds spacing above and below each paragraph.
<p>This is the first paragraph. It talks about the first topic.</p>
<p>This is the second paragraph. It has its own separate space.</p>
✏️ Text Formatting Tags
Use these inline tags to add meaning and emphasis inside your text:
<p>Use <strong>strong</strong> for critical importance (renders bold).</p>
<p>Use <em>em</em> for emphasis (renders italic).</p>
<p>The price is <del>$99</del> now <ins>$49</ins></p>
<p>E = mc<sup>2</sup> is Einstein's formula.</p>
<p>Water is H<sub>2</sub>O.</p>
<p>This is <mark>highlighted text</mark> for reference.</p>
📏 Line Break & Horizontal Rule
<p>First line of text.<br>This is on the next line (same paragraph).</p>
<hr>
<p>The hr tag above creates a horizontal dividing line.</p>
Knowledge Check
Ready to test your understanding of 3. Headings & Paragraphs?