What are the New Semantic Elements in HTML5? (Full Guide)

HTML5 introduced semantic elements to improve structure, accessibility, and SEO. Sectioning elements include <header>, <footer>, <nav>, <main>, and <section>; content-specific ones are <article>, <aside>, <figure>, <figcaption>, and <time>; embedded elements include <mark>, <details>, <summary>, and <dialog>.

HTML5 introduced several new semantic elements to help structure web content more meaningfully—making pages easier to understand for both developers and browsers, and improving accessibility and SEO.

Sectioning Elements

These define major parts of a document’s structure and support proper outlining and navigation.

• <header>: Represents introductory content—often contains logos, site titles, or navigation. Can appear multiple times (e.g., per article).
• <footer>: Marks the end of a section or page—typically holds copyright info, author details, or related links. Also reusable.
• <nav>: Encloses primary navigation links. Not for every link list—only major site or app navigation.
• <main>: Identifies the dominant content unique to that page. Only one per document, and must not be nested in <article>, <aside>, <footer>, <header>, or <nav>
• <section>: A thematic grouping of content with a heading. Use when <article> or <aside> doesn’t fit—and avoid just for styling.

Content-Specific Elements

These describe the nature or purpose of content more precisely than generic <div>.

• <article>: Self-contained composition—like a blog post, news story, or forum entry—that makes sense independently (e.g., can be syndicated).
• <aside>: Contains tangentially related content—such as sidebars, pull quotes, or ads—not central to the main flow.
• <figure> and <figcaption>: Group media (images, charts, code) with optional captions. <figcaption> is the first or last child of <figure>.
• <time>: Wraps dates or times in machine-readable format (e.g., <time datetime="2024-04-15">April 15</time>). Helps parsers and assistive tech.

Embedded Media & Interaction Elements

While not always “semantic” in the structural sense, these add meaning through behavior and context.

• <mark>: Highlights text for reference or relevance (e.g., search results), visually distinct by default.
• <details> and <summary>: Create collapsible widgets. <summary> is required and acts as the visible toggle.
• <dialog>: Represents a modal or non-modal dialog box. Requires JavaScript to show/hide (e.g., dialog.showModal()).

Why Semantics Matter

Semantic HTML improves screen reader navigation, enables better CSS targeting without extra classes, supports automated tools (like crawlers or translation services), and makes code more maintainable. Browsers also use semantics to infer document outlines—even if you skip headings, some elements imply hierarchy.

The above is the detailed content of What are the New Semantic Elements in HTML5? (Full Guide). For more information, please follow other related articles on the PHP Chinese website!