×

html · level 3 · unit 5 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Your headings make an outline of the whole page.

Read only the headings of a page, in order, and you get its , like the contents page of a book. Screen reader users jump through it, and search engines use it to see what matters.

One <h1> names the page. Each <section> starts with its own heading, one level below the heading it belongs under. Never pick a level for its size: the outline is about meaning.

A under a heading is not a heading itself. Wrap both in <hgroup>, with the heading in a heading tag and the tagline in a <p>, so the tagline stays out of the outline.

<header>
  <hgroup>
    <h1>Pip's Plants</h1>
    <p>Green friends for every room</p>
  </hgroup>
</header>
<main>
  <section>
    <h2>New in this week</h2>
    <p>Fig trees, ferns and a very small cactus.</p>
  </section>
  <section>
    <h2>Plant care</h2>
    <p>Most plants die from too much water, not too little.</p>
  </section>
</main>

Press show my page to see it here.

<hgroup> adds no look of its own. It only says that the heading and the tagline belong together.