HTML 58 min

Semantic HTML

Use meaningful landmarks that help people and search engines.

Semantic HTML uses elements whose names describe the role of their content. Landmarks such as header, nav, main, aside, and footer create dependable navigation. article and section describe content boundaries. div and span remain useful when no semantic element fits.

Build the page from landmarks

A typical page has a site header, primary navigation, one main region, and a footer. main contains the unique central content and should appear only once when visible. aside holds complementary content, not everything placed visually on the side.

<header>
  <a href="/">SovranCode</a>
  <nav aria-label="Primary">…</nav>
</header>
<main>
  <article>
    <h1>Semantic HTML</h1>
    <p>Choose elements by meaning.</p>
  </article>
  <aside aria-labelledby="related-title">
    <h2 id="related-title">Related lessons</h2>
  </aside>
</main>
<footer>© SovranCode</footer>

Use one visible main region.
Label multiple nav or aside landmarks.
Use article for self-contained content.
Give section a heading in most cases.
Use div and span when no semantic role fits.

Document outline diagram with header, navigation, main content, article sections, aside, and footer — A clear document outline helps sighted readers, keyboard users, assistive technology, and search engines.

Distinguish article, section, and div

An article could usually stand alone or be distributed, such as a post, card, or comment. A section groups a thematic part of a document and normally has a heading. A div is a neutral container for styling, layout, or scripting when no meaningful element applies.

<header><p>Workshop notes</p><nav aria-label="Primary"><a href="#note">Today's note</a></nav></header> <main id="note"> <article> <header><h1>Why landmarks matter</h1><p>A short field note.</p></header> <section><h2>Finding the main idea</h2><p>Structure supports navigation.</p></section> <footer><p>End of note.</p></footer> </article> <aside><h2>Related practice</h2><p>Try identifying landmarks on another page.</p></aside> </main>

HTML Getting Started

HTML Core

Links, Media & Data

Page Structure

Quality & Reference

Semantic HTML

Build the page from landmarks

Distinguish article, section, and div

Mistakes to avoid

Guided practice

Lesson recap

Understand it. Build it. Explain it.

What you should be able to do

Landmarks answer where; headings answer what

Not every wrapper deserves a semantic label

Compose a learning note with related resources

Code

Result

Why this example works

Semantics chosen from screen position

Refactor a div-only page

Your build plan

Review your result

Can you explain the decision?

Build a complete semantic page

Code

Result

Choose article, section, or div

Code

Result

Test what you learned

Test what you learned

Test what you learned

Check your understanding