HTML

Lesson 03

Heading hierarchy

Use headings to describe document structure instead of choosing heading levels for visual size.

Good Code

settings.html
<main>
  <!-- Heading levels follow the page outline in order. -->
  <h1>Account settings</h1>
  <section>
    <h2>Profile</h2>
    <h3>Public name</h3>
  </section>
</main>

Bad Code

settings.html
<main>
  <!-- Heading levels are being used for appearance instead of structure. -->
  <h3>Account settings</h3>
  <section>
    <h1>Profile</h1>
    <h4>Public name</h4>
  </section>
</main>

Review Notes

What to review

Good Code

The good version creates a predictable outline: page title, section, then subsection.

Bad Code

The bad version jumps between heading levels because the markup is trying to control appearance instead of structure.

Takeaways

  • Heading levels should outline the content in order, not act as font-size shortcuts.