Day 2: Content is King

A website without text is … well, usually just a blank screen. Let’s learn to format text properly.

Headings (h1 - h6)

Headings provide hierarchy.

• <h1>: The Main Title. Use only one per page.
• <h2>: Major section headings.
• <h3>: Sub-sections.
• … down to <h6>.

Do not use headings just to make text big. Use them to structure your content. Screen readers use them to navigate.

<h1>The Solar System</h1>
    <h2>Inner Planets</h2>
        <h3>Earth</h3>
        <h3>Mars</h3>
    <h2>Outer Planets</h2>
        <h3>Jupiter</h3>

Paragraphs (p)

The generic container for blocks of text. Browsers automatically add some space before and after a paragraph.

<p>This is a paragraph of text. It usually contains one or more sentences.</p>
<p>This is a second paragraph.</p>

Inline Formatting

Inside a block (like a <p>), you often want to style specific words.

Bold vs. Strong

• <b>: Makes text bold (visual only).
• <strong>: Makes text bold AND indicates importance (semantic). Use <strong> by default.

Italic vs. Emphasis

• <i>: Makes text italic (visual only, used for technical terms, foreign words).
• <em>: Indicates emphasis (semantic, affects screen reader voice). Use <em> by default.

<p>
    I <strong>really</strong> love <em>pizza</em>.
</p>

Line Breaks (br) and Horizontal Rules (hr)

• <br>: Forces a line break without starting a new paragraph (useful for poems or addresses).
• <hr>: Draws a horizontal line to separate content.

<p>
    123 Fake St.<br>
    New York, NY
</p>
<hr>

Homework for Day 2:

1. Write an article about your favorite animal.
2. Use an <h1> for the animal name.
3. Use <h2> for sections like “Habitat” and “Diet”.
4. Write paragraphs describing them.
5. Use <strong> to highlight key facts.

In Day 3, we connect pages with Links!