Accessibility & SEO

Semantic HTML

Speak the language of search engines. Semantics give your content meaning and structure – far beyond design.

Imagine reading a newspaper, but all the headlines, texts, and images have the same font size and weight. You wouldn't know where an article starts and where an ad ends.

This is exactly what happens when you only use <div> ("div soup"). Semantic HTML (<header>, <article>) gives the code structure. Google loves it. Screen readers need it.

1. The Anatomy of a Website

Hover over the areas to understand how a modern page should be structured.

<main>The main content (Only once per page!)

<article>Self-contained content (e.g., blog post)

<header>Title & Date

<section>Chapter 1

<section>Chapter 2

2. The Semantics Cheatsheet

Keep this list open while building your components. It is the guide for choosing the right tags.

<main>Structure

The unique main content. Should only appear once per view.

✅ Wrap the specific content of the current route here.

❌ Do not put the sidebar, header, or footer inside.

<header> & <footer>Structure

Not just for the page! These define the top/bottom of *any* section.

✅ Use inside <article>, <section>, or <main> to group meta-data or actions.

❌ Do not rely on the class name <div class="header">.

<nav>Structure

Area for major navigation blocks.

✅ Main menu, table of contents, pagination.

❌ Not for a single "Read more" link or a small footer link list.

<article>Content

Independent, self-contained content. Syndicatable.

✅ Blog posts, comments, widgets, product cards.

❌ Do not use as a generic wrapper just to group elements.

<section>Content

A thematic grouping of content, usually with a heading.

✅ Chapters of a page, "Features" section, "Contact" area.

❌ Do not use purely for CSS styling (use <div>).

<aside>Structure

Content tangentially related to the content around it.

✅ Sidebars, advertising, "Related Posts", pull quotes.

❌ Do not put primary content here that is vital for understanding.

<h1> - <h6>Text

The outline of your document. Vital for screen readers.

✅ H1 for page title (1x). H2 for main sections. H3 for subsections.

❌ Never skip levels (H2 -> H4) just for font sizing.

<label>Forms

The most important tag for form accessibility.

✅ Connect to inputs via `for` attribute or by wrapping the input.

❌ Do not use a <span> or <p> to name an input field.

<ul>, <ol>, <dl>Lists

Grouping items. Screen readers announce "List, 5 items".

✅ Navigation links, card lists, steps (<ol>), key-value pairs (<dl>).

❌ Do not create a stack of <div>s for a list of items.

<figure> & <figcaption>Media

Connects media (images, code, video) with a description.

✅ Image with a caption below it. Code block with a filename.

❌ Do not use <div> + <span> for image captions.

<details> & <summary>Interactive

A native HTML accordion/toggle without JavaScript.

✅ FAQ sections, spoilers, "Show more" toggles.

❌ Do not build a JS accordion for simple text toggling.

<button> vs <a>Interaction

The semantic difference between "Go" and "Do".

✅ <a> for navigation (URL changes). <button> for actions (Submit, Toggle, Open Dialog).

❌ Never put a (click) handler on a <div> or <span>.

3. Div Soup vs. Semantics

The code on the left works visually but is unreadable for machines. The right side is the clean solution.

Bad (Div Soup)

<div class="header">
  <div class="nav">Menu</div>
</div>
<div class="main-content">
  <div class="article">
     <div class="title">Hello World</div>
  </div>
</div>

Good (Semantic)

<header>
  <nav>Menu</nav>
</header>
<main>
  <article>
     <h1>Hello World</h1>
  </article>
</main>

💡

Semantics is also SEO: Google weighs text in a

tag much higher than text in a bold
. Your rankings will thank you.