HTML Semantic Elements Guide

← Previous: Forms & Inputs Next: Embedded Content →

Semantic HTML elements clearly describe their meaning to both the browser and the developer. Using semantic markup improves accessibility, SEO, and code maintainability. This guide covers the semantic elements introduced in HTML5 and best practices for using them.

1. What Are Semantic Elements?

Semantic elements clearly describe their meaning in a human- and machine-readable way. Elements such as <header>, <footer>, and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

Semantic vs. Non-Semantic Elements

<!-- Non-semantic elements --> <div>This is a div</div> <span>This is a span</span> <!-- Semantic elements --> <article>This is an article</article> <section>This is a section</section> <header>This is a header</header>

The <div> and <span> elements don't have any inherent meaning; they're just containers. Semantic elements, on the other hand, provide information about the content they contain.

Benefits of Semantic HTML:
  • Accessibility: Screen readers and other assistive technologies can better understand the content
  • SEO: Search engines give more weight to content inside semantic elements
  • Readability: Code is easier to read and maintain
  • Reusability: Consistent structure makes it easier to apply styles and behaviors

2. Page Structure Elements

HTML5 introduced several semantic elements that define the structure of a web page:

<header>
<nav>
<main>
<article>
<section>
<section>
</article>
<aside>
<footer>

Common Page Structure Elements

Element Description
<header> Represents introductory content, typically a group of introductory or navigational aids
<nav> Represents a section of a page that contains navigation links
<main> Represents the main content of the document (should be unique to the document)
<article> Represents self-contained content that could be distributed independently
<section> Represents a standalone section of content that is a part of a larger whole
<aside> Represents content tangentially related to the content around it (like a sidebar)
<footer> Represents a footer for its nearest sectioning content or sectioning root element
<!-- Basic HTML5 page structure --> <body> <header> <h1>Website Title</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <article> <header> <h2>Article Title</h2> <p>Published on <time datetime="2025-03-20">March 20, 2025</time></p> </header> <section> <h3>Section 1</h3> <p>This is the first section of the article.</p> </section> <section> <h3>Section 2</h3> <p>This is the second section of the article.</p> </section> <footer> <p>Author: John Doe</p> </footer> </article> <aside> <h3>Related Articles</h3> <ul> <li><a href="#">Related Article 1</a></li> <li><a href="#">Related Article 2</a></li> </ul> </aside> </main> <footer> <p>© 2025 My Website. All rights reserved.</p> </footer> </body>

3. Content Sectioning Elements

Article <article>

<article> <h2>Article Title</h2> <p>Article content...</p> </article>

The <article> element represents a complete, self-contained composition that is independently distributable or reusable.

Examples: Blog post, news story, forum post, comment, product card, interactive widget

Section <section>

<section> <h2>Section Heading</h2> <p>Section content...</p> </section>

The <section> element represents a standalone section of content that forms part of a larger whole.

Examples: Chapters, tabbed content areas, grouped content with a heading

Aside <aside>

<aside> <h3>Related Information</h3> <p>Tangentially related content...</p> </aside>

The <aside> element represents content that is tangentially related to the content around it, which could be considered separate from that content.

Examples: Sidebars, pull quotes, advertising, footnotes, related article links

Figure and Figcaption <figure> <figcaption>

<figure> <img src="image.jpg" alt="Description"> <figcaption>Caption for the image</figcaption> </figure>

The <figure> element represents self-contained content, with an optional caption (<figcaption>). It is typically referenced as a single unit from the main content.

Examples: Images with captions, charts, diagrams, code snippets, quotes

Article vs. Section: The distinction can sometimes be confusing:
  • <article> is for content that would make sense on its own in a feed reader
  • <section> is for grouping together thematically-related content
  • If the content could be syndicated or appears in an RSS feed, use <article>
  • If you're just grouping content for styling or other purposes, use <section>

4. Header and Footer Elements

Header <header>

<!-- Page header --> <header> <h1>Website Title</h1> <nav> <!-- Navigation links --> </nav> </header> <!-- Article header --> <article> <header> <h2>Article Title</h2> <p>Posted by John Doe on <time datetime="2025-04-24">April 24, 2025</time></p> </header> <!-- Article content --> </article>

The <header> element represents introductory content, typically a group of introductory or navigational aids. It can be used for the page header or for a section/article header.

Footer <footer>

<!-- Page footer --> <footer> <p>© 2025 My Website. All rights reserved.</p> <nav> <a href="/privacy">Privacy Policy</a> <a href="/terms">Terms of Service</a> </nav> </footer> <!-- Article footer --> <article> <!-- Article content --> <footer> <p>Author: John Doe</p> <p>Tags: <a href="#">HTML</a>, <a href="#">Semantic</a></p> </footer> </article>

The <footer> element represents a footer for its nearest sectioning content or sectioning root element. It typically contains information about the author, copyright data, or related links.

Multiple Usage: You can have multiple <header> and <footer> elements in a single document. They are not only for the top and bottom of the page but can be used within articles, sections, and other content blocks.

5. Navigation Elements

Nav <nav>

<!-- Primary navigation --> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- Footer navigation --> <footer> <nav> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Sitemap</a> </nav> </footer> <!-- Table of contents --> <nav> <h2>Table of Contents</h2> <ol> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ol> </nav>

The <nav> element represents a section of a page that contains navigation links. Not all links should be inside a <nav> element—only blocks of links that represent major navigation.

When to Use: Use the <nav> element for:
  • Main site navigation
  • Secondary navigation (like footer links)
  • Table of contents
  • Pagination controls
  • Breadcrumb navigation
Don't use it for:
  • Single links within content
  • Links in a paragraph
  • Social media links (unless they're a major navigation block)

6. Text Semantic Elements

Time <time>

<p>The event starts at <time>20:00</time>.</p> <p>The concert takes place on <time datetime="2025-07-15">July 15, 2025</time>.</p> <p>Posted: <time datetime="2025-03-15T14:30:00">March 15, 2025</time></p>

The <time> element represents a specific period in time. It may include the datetime attribute to represent time in a machine-readable format.

Mark <mark>

<p>Here is some text with a <mark>highlighted section</mark> that needs attention.</p> <p>Search results for "semantic HTML": <mark>Semantic HTML</mark> elements clearly describe their meaning...</p>

Here is some text with a highlighted section that needs attention.

Search results for "semantic HTML": Semantic HTML elements clearly describe their meaning...

The <mark> element represents text which is marked or highlighted for reference or notation purposes.

Details and Summary <details> <summary>

<details> <summary>Click to see more information</summary> <p>This is the detailed content that is initially hidden but can be expanded by clicking the summary.</p> </details>
Click to see more information

This is the detailed content that is initially hidden but can be expanded by clicking the summary.

The <details> element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. The <summary> element provides a summary or label for the details.

Address <address>

<address> Written by <a href="mailto:john@example.com">John Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

The <address> element represents contact information for its nearest <article> or <body> ancestor.

More Semantic Text Elements

Element Description Example
<cite> Represents the title of a creative work The Great Gatsby by F. Scott Fitzgerald
<code> Represents computer code Use getElementById() to get an element by ID
<dfn> Represents a defining instance of a term A semantic element clearly describes its meaning to both the browser and the developer.
<kbd> Represents user input from keyboard Press Ctrl + S to save
<abbr> Represents an abbreviation or acronym HTML

7. Non-visible Semantic Elements

Main <main>

<body> <header>...</header> <main> <!-- Main content of the document --> <article>...</article> <section>...</section> </main> <footer>...</footer> </body>

The <main> element represents the main content of the document. The content inside the <main> element should be unique to the document and should not include content that is repeated across documents such as navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).

Note: There should be only one <main> element in a document, and it should not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

Dialog <dialog>

<dialog id="myDialog"> <h2>Dialog Title</h2> <p>This is a dialog window.</p> <button onclick="document.getElementById('myDialog').close()">Close</button> </dialog> <button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

The <dialog> element represents a dialog box or other interactive component, such as a modal or popup. The open attribute determines whether the dialog is active and the user can interact with it.

8. Replacing Divs with Semantic Elements

Before (Non-Semantic)

<div class="header"> <h1>Website Title</h1> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="content"> <div class="article"> <div class="article-header"> <h2>Article Title</h2> <p>Posted on January 1, 2025</p> </div> <div class="article-content"> <p>Article content goes here...</p> </div> <div class="article-footer"> <p>Author: John Doe</p> </div> </div> <div class="sidebar"> <h3>Related Links</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> </div> <div class="footer"> <p>© 2025 My Website</p> </div>

After (Semantic)

<header> <h1>Website Title</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <article> <header> <h2>Article Title</h2> <p>Posted on <time datetime="2025-01-01">January 1, 2025</time></p> </header> <section> <p>Article content goes here...</p> </section> <footer> <p>Author: John Doe</p> </footer> </article> <aside> <h3>Related Links</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </aside> </main> <footer> <p>© 2025 My Website</p> </footer>
Key Replacements:
  • div.header → <header>
  • div.nav → <nav>
  • div.content → <main>
  • div.article → <article>
  • div.article-header → <header> (inside article)
  • div.article-content → <section>
  • div.article-footer → <footer> (inside article)
  • div.sidebar → <aside>
  • div.footer → <footer>

9. Accessibility Benefits

Using semantic HTML significantly improves accessibility:

Benefit Description
Screen Reader Navigation Screen readers announce semantic elements, allowing users to navigate by headings, landmarks, etc.
Keyboard Navigation Semantic elements like <button> have built-in keyboard accessibility
Landmarks Elements like <nav>, <main>, and <aside> create ARIA landmarks
Context Semantic context helps assistive technologies understand content relationships
Default Styling Semantic elements have default styles that help with accessibility

Example: ARIA Landmark Mappings

HTML Element Implicit ARIA Role
<header> banner (when in the <body> context)
<nav> navigation
<main> main
<aside> complementary
<footer> contentinfo (when in the <body> context)
<section> region (when it has an accessible name)
<article> article
Tip: Combine semantic HTML with appropriate ARIA attributes when needed for complex components, but remember: "No ARIA is better than bad ARIA." Use native HTML elements with built-in semantics whenever possible.

10. Best Practices

← Previous: Forms & Inputs Next: Embedded Content →

Made by Ori Surut

© 2025 HTML & CSS Documentary. All rights reserved.