Semantic HTML: structure that means something

Divs are a last resort

HTML has elements that describe your content. Search engines, screen readers, and other developers all rely on them:

<header>   site or section header
<nav>      primary navigation
<main>     the one main content area
<article>  self-contained piece (post, card, comment)
<section>  thematic grouping with a heading
<aside>    tangential content (sidebar)
<footer>   site or section footer

Use a <div> only when no semantic element fits and you just need a styling hook.

Headings are an outline, not a font size

<h1> through <h6> form the document outline. One <h1> per page; never skip levels because a smaller heading "looks right" — that's CSS's job (Week 2).

The everyday elements

• Links: <a href="..."> — internal (/about.html), external (full URL), and same-page (#section-id).
• Images: <img src="cat.jpg" alt="A tabby cat asleep on a keyboard"> — the alt text is not optional; it's what screen readers announce and what shows when the image fails.
• Lists: <ul>/<ol> + <li> — navigation menus are almost always lists.
• Tables: for tabular data only (never layout): <table>, <thead>, <tbody>, <tr>, <th scope="col">, <td>.

Try it now

Pick any Wikipedia article and sketch (on paper) which semantic element you'd use for each region of the page: the header, the table of contents, the article body, the infobox, the footer. You'll build exactly this in the first lab.