Lesson 02

Semantic document structure

Use landmarks and headings to make the page structure understandable.

semantics
accessibility
structure

Good Code

article.html

<!-- nav, main, and article expose page regions before CSS runs. -->
<nav aria-label="Primary">
  <a href="/reviews">Review guide</a>
</nav>
<main>
  <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 navigation and content structure from the document outline. -->
  <div class="nav">
    <span>Review guide</span>
  </div>
  <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 navigation, main content, article content, and a real heading through native HTML.

Bad Code

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

Takeaways

Prefer meaningful landmarks over anonymous wrappers.