HTML - semantic HTML tags

Using semantic HTML tags like <article>, <section>, <nav>, <aside>, <header>, and <footer> correctly 

What “using them correctly” actually means

<header>

  • Introductory content for a page or a section

  • Can contain headings, logos, navigation (but is not navigation itself)

  • Can appear multiple times (per section)

<nav>

  • Only for primary or secondary navigation blocks

  • Should not wrap random links

  • Screen readers identify this as a navigation landmark

<section>

  • A thematic grouping of content

  • Must have a heading (h1–h6)

  • Do not use it just for styling

<article>

  • Self-contained, reusable content

  • Examples: blog post, news item, product card, comment

  • Can stand alone if moved elsewhere

<aside>

  • Indirectly related content

  • Examples: sidebar, related posts, ads, author bio

  • Screen readers treat it as complementary content

<footer>

  • Metadata for a page or section

  • Examples: author info, copyright, related links

  • Not for main content

Why this improves SEO

  • Search engines understand content hierarchy

  • Clear distinction between main content and supporting content

  • Articles can be indexed independently

  • Better crawling and ranking context than generic <div> usage

Result: search engines know what matters on the page.

Why this is critical for accessibility

  • Screen readers use landmark roles created by these tags

  • Users can jump directly to navigation, main content, or side content

  • Proper heading + section structure improves reading flow

  • Reduces cognitive load for visually impaired users

Without semantic tags, assistive tools fall back to guessing.

How screen readers and search engines benefit

  • Both build a document outline

  • Landmarks allow fast navigation

  • Content meaning is explicit, not inferred

  • Less reliance on CSS or JS to understand structure

In short:
Semantic HTML communicates intent, not just layout.

One practical rule

If removing CSS still leaves your page logically readable, your semantic HTML is correct.

If you want, I can:

  • Show a real bad vs good semantic layout

  • Map semantic tags to ARIA roles

  • Explain common semantic misuse that hurts SEO