Day 2: Structuring Text

What You'll Learn Today

Proper use of heading elements (h1–h6)
Paragraphs and text grouping
Text emphasis and decoration
Displaying quotes and code

Heading Elements

HTML provides six levels of headings. <h1> is the most important, and <h6> is the smallest.

<h1>Main Title (h1)</h1>
<h2>Section Heading (h2)</h2>
<h3>Subsection (h3)</h3>
<h4>Sub-heading (h4)</h4>
<h5>Detail Heading (h5)</h5>
<h6>Smallest Heading (h6)</h6>

flowchart TB
    subgraph Hierarchy["Heading Hierarchy"]
        H1["h1: Page Title"]
        H2A["h2: Section 1"]
        H2B["h2: Section 2"]
        H3A["h3: Subsection"]
        H3B["h3: Subsection"]
    end
    H1 --> H2A
    H1 --> H2B
    H2A --> H3A
    H2B --> H3B
    style H1 fill:#ef4444,color:#fff
    style H2A fill:#f59e0b,color:#fff
    style H2B fill:#f59e0b,color:#fff
    style H3A fill:#22c55e,color:#fff
    style H3B fill:#22c55e,color:#fff

Heading Rules

Rule	Description
One h1 per page	Represents the main topic
Don't skip levels	Don't jump from h1 to h3
Don't use for styling	Use CSS if you just want larger text
Focus on meaning	Used by search engines and screen readers

Paragraphs and Text Grouping

Paragraphs (`<p>`)

<p>HTML is a markup language that defines web page structure.</p>
<p>All modern browsers support HTML.</p>

Note: Line breaks and multiple spaces in your source code are ignored by HTML. Use <p> tags to create separate paragraphs.

Line Break (`<br>`)

<p>
    123 Main Street<br>
    Suite 100<br>
    New York, NY 10001
</p>

Horizontal Rule (`<hr>`)

<p>Chapter 1 content...</p>
<hr>
<p>Chapter 2 content...</p>

Preformatted Text (`<pre>`)

<pre>
    Name:    John Doe
    Age:     30
    City:    Tokyo
</pre>

Text Emphasis and Meaning

Emphasis Elements

<p>This is <strong>very important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <mark>highlighted</mark> text.</p>

Element	Meaning	Display
`<strong>`	Strong importance	Bold
`<em>`	Emphasis (stress)	Italic
`<mark>`	Highlight	Yellow background
`<b>`	Visual bold (no semantic meaning)	Bold
`<i>`	Visual italic (technical terms, etc.)	Italic

Important: <strong> and <b> look the same but have different meanings. <strong> conveys importance, while <b> is purely visual. Screen readers will emphasize <strong> when reading aloud.

flowchart LR
    subgraph Semantic["✅ Semantic"]
        S1["&lt;strong&gt; = Important"]
        S2["&lt;em&gt; = Emphasis"]
    end
    subgraph Visual["⚠️ Visual Only"]
        V1["&lt;b&gt; = Bold"]
        V2["&lt;i&gt; = Italic"]
    end
    style Semantic fill:#22c55e,color:#fff
    style Visual fill:#f59e0b,color:#fff

Other Text Elements

<p><small>Note: This information may change.</small></p>
<p>H<sub>2</sub>O (water)</p>
<p>E = mc<sup>2</sup></p>
<p><del>Old price: $50</del> → <ins>New price: $39.80</ins></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Element	Purpose
`<small>`	Side comments, disclaimers
`<sub>`	Subscript (chemical formulas)
`<sup>`	Superscript (exponents)
`<del>`	Deleted text
`<ins>`	Inserted text
`<abbr>`	Abbreviation (shows full form on hover)

Quotations

Block Quotation (`<blockquote>`)

<blockquote cite="https://example.com/source">
    <p>The power of the Web is in its universality. Access by everyone
    regardless of disability is an essential aspect.</p>
    <footer>— <cite>Tim Berners-Lee</cite></footer>
</blockquote>

Inline Quotation (`<q>`)

<p>Tim Berners-Lee said
<q>The power of the Web is in its universality</q>.</p>

Element	Purpose	Display
`<blockquote>`	Long quotation (block)	Indented paragraph
`<q>`	Short quotation (inline)	Wrapped in quotes
`<cite>`	Source attribution	Italic

Displaying Code

Inline Code (`<code>`)

<p>Use <code>console.log()</code> to output to the console.</p>

Code Block

<pre><code>function greet(name) {
    return "Hello, " + name;
}
console.log(greet("World"));
</code></pre>

Keyboard Input and Sample Output

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Console output: <samp>Hello, World!</samp></p>

Element	Purpose
`<code>`	Program code
`<pre>`	Preformatted text
`<kbd>`	Keyboard input
`<samp>`	Program output
`<var>`	Variable name

Practice: Blog Article Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Journey</title>
</head>
<body>
    <h1>My HTML Journey</h1>
    <p><small>Posted: January 29, 2026</small></p>

    <h2>How It Started</h2>
    <p>I wanted to build my own website, so I started learning <strong>HTML</strong>.</p>

    <blockquote>
        <p>A journey of a thousand miles begins with a single step.</p>
    </blockquote>

    <h2>What I Learned Today</h2>
    <p>I learned about <em>structuring text</em>.
    I found that <mark>using semantic elements correctly</mark> is crucial.</p>

    <h3>Code Example</h3>
    <pre><code>&lt;p&gt;HTML is &lt;strong&gt;fun&lt;/strong&gt;!&lt;/p&gt;</code></pre>

    <hr>

    <p><small>&copy; 2026 My Blog</small></p>
</body>
</html>

Summary

Concept	Description
Headings (h1–h6)	Define document hierarchy
Paragraphs (p)	Group blocks of text
strong / em	Semantic emphasis
blockquote / q	Quoted text
code / pre	Program code display

Key Takeaways

Use headings in proper hierarchical order
<strong> and <b> have different semantics
Use <br> or <p> for line breaks (source line breaks are ignored)
Proper elements improve accessibility

Exercises

Exercise 1: Basic

Create a page using all of these elements: <h1>, <h2>, <p>, <strong>, <em>, <mark>

Exercise 2: Intermediate

Display 3 favorite quotes using <blockquote>, each with a <cite> attribution.

Challenge

Create a page correctly displaying chemical formulas (H₂O, CO₂) and math equations (E=mc², a²+b²=c²).

References

Next up: In Day 3, you'll learn about "Links and Navigation"—the core mechanism of the Web.