HTML

Lesson 02

Semantic document structure

Use landmarks and headings to make the page structure understandable.

Good Code

article.html
<main>
  <!-- main and article expose the page outline before CSS runs. -->
  <article aria-labelledby="article-title">
    <h1 id="article-title">Reviewing pull requests</h1>
    <p>Small reviews are easier to reason about.</p>
  </article>
</main>

Bad Code

article.html
<div>
  <!-- Generic divs hide the content structure from the document outline. -->
  <div>
    <b>Reviewing pull requests</b>
    <div>Small reviews are easier to reason about.</div>
  </div>
</div>

Review Notes

What to review

Good Code

The good version exposes the page structure through native landmarks and a real heading.

Bad Code

The bad version may look acceptable, but it hides meaning behind generic containers.

Takeaways

  • Prefer meaningful landmarks over anonymous wrappers.