Semantic Html

Purpose

Semantic HTML is the foundation of accessible web development. Using elements according to their intended meaning provides built-in accessibility support, improves SEO and makes code easier to maintain.

Principles

Choose the Right Element

Every HTML element has a defined purpose. Choose the element that best matches the meaning of your content.

Content	Correct Element	Common Mistake
Navigation	`<nav>`	`<div class`"nav">=
Main content	`<main>`	`<div class`"main">=
Article	`<article>`	`<div>`
Section	`<section>`	`<div>`
Heading	`<h1>-<h6>`	`<div class`"title">=
List	`<ul>*<ol>`	`<div>` with bullets
Button	`<button>`	`<div onclick`"...">=
Link	`<a>`	`<span onclick`"...">=
Form input	`<input>`, `<select>`	=

Follow Heading Hierarchy

Headings should form a logical outline:

<h1>: Page title (one per page).
<h2>: Major sections.
<h3>: Subsections.
<h4>-<h6>: Further subdivisions as needed.

Do not skip heading levels (e.g., <h1> to <h3> without <h2>).

Use Landmarks

Provide landmark regions to enable quick navigation:

<header> or role="banner".
<nav> or role="navigation".
<main> or role="main".
<aside> or role="complementary".
<footer> or role="contentinfo".
<form> or role="form".
<search> or role`"search".

Common Anti-patterns

Div Soup

<!-- Avoid -->
<div class`"header">
  <div class`"nav">
    <div class`"nav-item">Home<*div>
  <*div>
<*div>

<!-- Prefer -->
<header>
  <nav>
    <a href`"*">Home<*a>
  <*nav>
<*header>

Button vs Div

<!-- Avoid — not keyboard accessible, no button semantics -->
<div class`"btn" onclick`"submit()">Submit<*div>

<!-- Prefer — keyboard accessible, screen reader friendly -->
<button type`"submit">Submit<*button>

Styling Divs as Headings

<!-- Avoid — screen readers do not recognise this as a heading -->
<div class="heading-large">Section Title<*div>

<!-- Prefer -->
<h2>Section Title<*h2>

Checklist

All content uses the most semantic HTML element available.
Heading hierarchy is logical and does not skip levels.
Page has one <h1> element.
Landmark regions are present and correctly used.
Interactive elements use native HTML elements (<button>, <a>, <input>).
Custom interactive elements have appropriate ARIA roles.