Semantic HTML uses elements for their intended meaning rather than for visual effect alone. Elements like $<header>$, $<nav>$, $<main>$, $<article>$, $<section>$, and $<footer>$ help browsers, screen readers, and developers understand the document structure.

A page should typically contain one main region, logical headings from $h1$ through $h6$, and content grouped into meaningful sections. Headings describe hierarchy, not just style, so avoid skipping levels without reason.

Lists, tables, forms, figures, and captions should be marked up with the correct elements. For example, navigation links belong in $<nav>$, supplementary material can live in $<aside>$, and images with context should use $<figure>$ and $<figcaption>$.

A blog post might use $<article>$ for the post, $<header>$ for the title and metadata, $<main>$ for the article body, and $<footer>$ for author details or tags. This structure helps both humans and machines parse the page.