HTML Mastery · Chapter 8

Semantic HTML5 Layout Tags

HTML5 introduced semantic elements that describe the meaning of content, not just how it looks. These replace generic <div> soup and are critical for SEO, accessibility, and maintainability.

Typical Semantic Page Layout

<header> — Site logo, site title, top navigation

<nav> — Primary navigation menu

<main>
  <article>
    <h1>Post Title</h1>
    <section> Introduction </section>
    <section> Content </section>
  </article>
</main>

<aside>
  Related links
  Author bio
  Newsletter
  Ads sidebar
</aside>

All Semantic Layout Tags

Tag	Purpose & When to Use	Can Nest?
<header>	Introductory content for its nearest sectioning ancestor. At page level: logo, site title, main navigation. At article level: article title, author, publication date. Not the same as <head>.	Yes — can appear inside article/section
<nav>	A section of navigation links. Use for primary, secondary, and breadcrumb navigation. Don't use for every group of links — only for major navigation blocks.	Yes — multiple navs are valid
<main>	The dominant content of the document — the central topic unique to this page. Only one per page. Excludes content repeated across pages (header, nav, footer, sidebar).	No — must be unique
<article>	A self-contained piece of content that makes sense independently — a blog post, news article, forum post, product card, comment, widget. Could be shared/syndicated on its own.	Yes — articles can contain articles (comments in a post)
<section>	A thematic grouping of content with a heading. Used to divide a document into chapters, intro, body, conclusion. Not a replacement for <div> — only when the content forms a meaningful section.	Yes
<aside>	Content tangentially related to the main content — sidebars, pull quotes, author bios, related articles, advertising. At document level = sidebar. Inside article = pull quote.	Yes
<footer>	Footer content for its nearest sectioning ancestor. At page level: copyright, links, address, social links. At article level: tags, related links, author info.	Yes — can appear inside article/section
<details>	A disclosure widget — hidden content that the user can toggle open. Used for FAQs, accordion panels, spoilers. Works without JavaScript.	Yes
<summary>	The visible heading/label for a `<details>` element. Clicking it toggles the details open/closed. Must be the first child of <details>.	No
<dialog>	A dialog box or modal window. Use `.show()` / `.showModal()` JavaScript methods. The open attribute makes it visible by default.	Yes
<search>	New in HTML: A landmark region wrapping a search form. Better than wrapping a form in a `<nav>` or a bare `<div>`.	Yes
<address>	Contact information for the nearest `<article>` or `<body>`. Can contain name, email, URL, phone, postal address. Rendered in italic by browsers.	Limited

Generic Containers — div & span

Tag	Type	Use When
<div>	Block-level	No semantic meaning. Use when you need a block wrapper purely for CSS layout or JavaScript targeting, and no semantic element fits.
<span>	Inline	No semantic meaning. Use when you need to style or target a portion of text inline, with no semantic alternative.

Decision Guide:

Is it the page header/logo? → <header>
Is it the main menu? → <nav>
Is it the unique page content? → <main>
Could it be published independently? → <article>
Is it a thematic subsection with a heading? → <section>
Is it supplementary/sidebar content? → <aside>
Is it copyright/author info? → <footer>
None of the above? → <div> (block) or <span> (inline)

<details> & <summary> — Live Demo

❓ What is semantic HTML? (click to expand)

Semantic HTML means using the HTML element that best describes the meaning of the content, not just its appearance. For example, using <nav> for navigation links instead of <div class="nav"> tells browsers, search engines, and screen readers exactly what that content represents.

<details> <summary>❓ What is semantic HTML?</summary> <p>Semantic HTML means...</p> </details>

Chapter Summary

Semantic tags replace meaningless <div> wrappers with descriptive elements
Use only one <main> per page; <header> and <footer> can appear multiple times
<article> = independently publishable; <section> = thematic grouping
<details> + <summary> = native accordion without JavaScript
Semantic HTML improves SEO, screen reader support, and code maintainability

HTML Mastery — Chapter 8: Layout, Semantics & Head Metadata