Chapter 4 — Text Formatting & Content

Learning Outcome

Format and structure textual content using HTML headings, paragraphs, and semantic text tags.

← 03 - Tags Elements & Attributes | Next → 05 - Links & Navigation

4.1 Headings — `<h1>` to `<h6>`

HTML provides 6 levels of headings.

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Smaller Sub-heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Don't Skip Heading Levels

Don't jump from <h1> to <h4>. Use headings in logical order (h1 → h2 → h3). Skipping levels breaks accessibility and SEO.

SEO Importance

Search engines (Google) heavily use <h1> to understand what your page is about. Use one descriptive <h1> per page.

4.2 Paragraphs, Line Breaks & Dividers

<p>This is a paragraph. Browsers automatically add space above and below.</p>

<p>This paragraph has a line break inside it.<br>
This is on a new line within the same paragraph.<br>
And this is another line.</p>

<hr>

<p>This paragraph comes after the horizontal divider.</p>

Whitespace Collapsing

HTML ignores multiple spaces and newlines in source code — they all collapse to a single space. Use <br> for deliberate line breaks.

4.3 Semantic Text Formatting Tags

These tags carry meaning, not just visual style.

<p>This is <strong>very important</strong> text.</p>
<p>This is <em>emphasised</em> text.</p>
<p>Price was <del>₹500</del>, now <ins>₹300</ins>.</p>
<p>Water: H<sub>2</sub>O | Area: πr<sup>2</sup></p>
<p><mark>Highlighted</mark> term in a sentence.</p>
<p>Use the <code>console.log()</code> function.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>

4.5 HTML Comments

<!-- This is a comment — the browser ignores it -->

<!--
  Multi-line comment.
  Great for leaving notes for yourself or your team.
-->

<!-- TODO: Add navigation bar here -->
<h1>Page Content</h1>

<!-- DISABLED:
<section class="old-promo">
  ...
</section>
-->

Don't Put Secrets in Comments

HTML comments are visible to anyone who opens DevTools (F12 → Inspector). Never put passwords, API keys, or sensitive data in HTML comments.

🚀 Recommended Projects

Project 1 — Blog Article Page

Write a fake blog article with:

<h1> title, <h2> section headings
Several <p> paragraphs
At least one <blockquote>
Uses of <strong>, <em>, <mark>
An <hr> divider between sections

Project 2 — Science Notes Page

Create chemistry/maths notes using:

<sub> for chemical formulas: H₂SO₄, CO₂
<sup> for powers: x², r³
<code> for equations
<pre> for aligned data tables or multi-line formulas

📌 Quick Recall

<h1> = one per page (main title) → <h6> = smallest heading
<p> = paragraph | <br> = line break | <hr> = divider
<strong> = important bold | <em> = emphasis italic
<sub> = subscript (H₂O) | <sup> = superscript (x²)
<code> = inline code | <pre> = preserves whitespace
Comments:  | Visible in DevTools — never store secrets!