STEP 3 — TEXT TAGS & SEMANTIC STRUCTURE

This week completes what goes inside the body: the tags that mark up text, and the structural elements that organize a page.

How to read this page: first come the instructions — what to do this week. After the instructions, one gray-blue box gathers all the material for your Step 3 page — rewrite it in your own words. Text shown as code is the kind of thing you type onto your page.

 

INSTRUCTIONS

1 · Mark up your text

Build your step3.html page and give it real headings and paragraphs using only the approved text tags in the gray-blue box below. Use the heading levels in order — an h1 for the page title, h2 for major sections beneath it — not by how big they look.

2 · Structure the page

Wrap your content in the five structural elements. Follow our standard layout: a header at the top, a main that holds two section blocks and an aside, and a footer at the bottom. This is the same structure you will style in the weeks ahead, so build it cleanly now.

 

MATERIAL FOR YOUR STEP 3 PAGE

Everything inside the gray-blue box below is what you rewrite, in your own words, onto your step3.html page.

The text tags — and only these

Headings run h1 through h6 — six levels, no more. There is no h7, and you never invent your own tags; browsers simply ignore what they don’t recognize. Paragraphs use p.

Two matching pairs for emphasis

For emphasis, i matches em (italic) and b matches strong (bold). Each pair produces the same visible result.

The five structural elements

Five elements organize a page: header, main, footer, aside, and section. Use them consistently. In our standard layout, main wraps the two section blocks and the aside — the body holds everything, but main is the box that directly contains them.

Where these elements came from

These elements were once all divs that nearly everyone named the same way. Because the names were so common, the standard promoted them into real elements — the box you were already building, made official.

 
 

Work Due — Friday, September 25

Build your step3.html page — your own notes on the text tags (h1–h6, p, i/em, b/strong) and the five structural elements — using our standard layout, with main wrapping the two sections and the aside. Upload it to your site.