Semantic Page Structure

Semantic elements explain why a region exists. They create landmarks for assistive technology and keep the document understandable even before CSS loads.

Name the major regions

01<header>
02  <a href="/">Arcbyte</a>
03  <nav aria-label="Primary"><a href="/courses">Courses</a></nav>
04</header>
05<main>
06  <article>
07    <h1>Semantic HTML</h1>
08    <p>A lesson with an independent topic.</p>
09  </article>
10  <aside aria-label="Related lessons">...</aside>
11</main>
12<footer>© Arcbyte</footer>

Most pages need one main. nav is for major navigation groups, article for independently meaningful content, section for a themed region with a heading, and aside for supporting content.

Use a div when meaning is absent

div and span are neutral containers. They are useful for styling hooks and layout groups when no semantic element fits.

01<div class="navigation">...</div>
02<div class="main">...</div>

01<nav aria-label="Primary">...</nav>
02<main>...</main>

Prefer native elements

A clickable div is not a button. Recreating focus, keyboard activation, disabled behavior, and semantics is difficult and unnecessary.

01<button type="button">Save progress</button>
02<a href="/next-lesson">Next lesson</a>

Keep this

Choose landmarks and content elements by purpose, keep one clear main, and use neutral containers only when no meaningful element applies.