Skip to main content

Accessibility UI Guidelines: Semantic Elements

Semantics

2.8 Semantic HTML Elements

Semantic HTML elements provide meaningful structure to web content, enhancing both accessibility and search engine optimisation (SEO). Utilising these elements correctly ensures that assistive technologies can accurately interpret and navigate your website.

2.8.1 <header> Element

The <header> element represents introductory content, typically containing navigational links, logos, or headings. It should be used to define the header of a page or a section.


<!-- Page Header -->
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

2.8.2 <nav> Element

The <nav> element defines a set of navigation links. It is intended for major navigational blocks and should not be used for all groups of links.


<!-- Primary Navigation -->
<nav aria-label="Main Navigation">
    <ul>
        <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#blog">Blog</a></li>
    </ul>
</nav>

2.8.3 <main> Element

The <main> element specifies the main content of the document. There should only be one <main> element per page, and it should not be nested within other sectioning elements.


<!-- Main Content -->
<main>
    <h2>Welcome to Our Website</h2>
    <p>Here is where the primary content of the page resides.</p>
</main>

2.8.4 <section> Element

The <section> element represents a standalone section of content, typically with a heading. It is used to group related content together.


<!-- About Section -->
<section id="about">
    <h2>About Us</h2>
    <p>Information about the company's mission and values.</p>
</section>

2.8.5 <article> Element

The <article> element encapsulates a self-contained composition that can be independently distributed or reused, such as blog posts, news articles, or forum posts.


<!-- Blog Article -->
<article>
    <h2>Understanding Semantic HTML</h2>
    <p>Semantic HTML enhances accessibility and SEO by providing meaningful structure to web content.</p>
</article>

2.8.6 <aside> Element

The <aside> element contains content indirectly related to the main content, such as sidebars, call-out boxes, or advertisements.


<!-- Sidebar -->
<aside>
    <h3>Latest News</h3>
    <p>Stay updated with the latest developments in our industry.</p>
</aside>

2.8.7 <footer> Element

The <footer> element defines the footer for a document or section, typically containing information like copyright, contact details, or navigational links.


<!-- Page Footer -->
<footer>
    <p>&copy; 2024 Company Name. All rights reserved.</p>
    <nav>
        <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>
2.8.8 ARIA Landmarks Use ARIA (Accessible Rich Internet Applications) landmarks to enhance navigation for assistive technologies. Assign appropriate roles to semantic elements to provide clear navigation points.

2.8.9 <figure> and <figcaption> Elements

The <figure> element is used to encapsulate media content, such as images, diagrams, or code snippets, along with their captions provided by the <figcaption> element.


<!-- Figure with Caption -->
<figure>
    <img src="diagram.png" alt="Diagram illustrating semantic HTML structure">
    <figcaption>Figure 1: Semantic HTML Structure</figcaption>
</figure>

2.8.10 <time> Element

The <time> element represents a specific time (or date) and can include machine-readable formats to improve accessibility and SEO.


<!-- Time Element -->
<time datetime="2024-12-10">December 10, 2024</time>

2.8.11 <details> and <summary> Elements

The <details> element creates a disclosure widget that users can open and close to view additional information, with the <summary> element providing a visible heading.


<!-- Disclosure Widget -->
<details>
    <summary>More Information</summary>
    <p>Here is some additional information that can be toggled by the user.</p>
</details>

2.8.12 <mark> Element

The <mark> element highlights text for reference purposes, such as search results or important points.


<!-- Highlighted Text -->
<p>To improve accessibility, use the <mark>semantic HTML elements</mark> appropriately.</p>

2.8.13 <strong> and <em> Elements

The <strong> element indicates that text is of strong importance, while the <em> element emphasises text. Both elements carry semantic meaning and are recognised by assistive technologies.


<!-- Strong Importance -->
<p>This is a <strong>critical</strong> update that must be addressed immediately.</p>

<!-- Emphasised Text -->
<p>Please <em>read</em> the instructions carefully before proceeding.</p>

2.8.14 <abbr> and <acronym> Elements

The <abbr> element represents an abbreviation or acronym, providing an expansion via the title attribute. Note that the <acronym> element is obsolete and should be avoided.


<!-- Abbreviation with Expansion -->
<p>The <abbr title="World Health Organisation">WHO</abbr> provides global health guidelines.</p>

2.8.15 <cite> Element

The <cite> element is used to reference the title of a creative work, such as a book, article, or website.


<!-- Citing a Work -->
<p>In <cite>JavaScript: The Good Parts</cite>, Douglas Crockford explores the strengths of the language.</p>

2.8.16 <address> Element

The <address> element provides contact information for the author or owner of a document or section.


<!-- Contact Information -->
<address>
    Company Name<br>
    1234 Street Rd.<br>
    City, State, ZIP<br>
    <a href="mailto:contact@company.com">contact@company.com</a>
</address>

2.8.17 <summary> Element

The <summary> element provides a visible heading for the <details> element, enabling users to understand the content that can be toggled.


<!-- Summary within Details -->
<details>
    <summary>Project Overview</summary>
    <p>Details about the project scope, objectives, and timeline.</p>
</details>

2.8.18 <time> Element

The <time> element represents specific times or dates, providing machine-readable formats to enhance accessibility and SEO.


<!-- Time Element with datetime Attribute -->
<p>Event Date: <time datetime="2024-12-10">December 10, 2024</time></p>
2.8.19 ARIA Roles with Semantic Elements While semantic elements inherently provide meaningful structure, combining them with ARIA roles can further enhance accessibility. Assign appropriate ARIA roles to semantic elements to ensure assistive technologies interpret them correctly.

2.8.20 Avoiding Non-Semantic Elements for Structure

Avoid using non-semantic elements like <div> and <span> for structuring content when semantic elements are available. Using semantic elements improves accessibility and SEO.


<!-- Correct: Using Semantic Elements -->
<header>
    <h1>Welcome to Our Site</h1>
</header>

<!-- Incorrect: Using Non-Semantic Elements -->
<div class="header">
    <h1>Welcome to Our Site</h1>
</div>

2.8.21 Best Practices for Using Semantic HTML Elements

Adhere to the following best practices to maximise the benefits of semantic HTML elements:


// Ensure only one <main> element per page
<main>
    <!-- Main content goes here -->
</main>

// Use <section> to group related content with headings
<section>
    <h2>Our Services</h2>
    <p>Details about services offered.</p>
</section>

// Use <article> for self-contained content pieces
<article>
    <h2>Blog Post Title</h2>
    <p>Content of the blog post.</p>
</article>

Best Practices for Semantic HTML Elements

  • Use Appropriate Elements: Select the most semantically correct HTML element for the content you are marking up to convey its meaning effectively.
  • Maintain a Logical Structure: Organise your HTML document using a clear and logical hierarchy of semantic elements to enhance accessibility and SEO.
  • Combine with ARIA Roles When Necessary: Enhance semantic elements with ARIA roles to provide additional context for assistive technologies when needed.
  • Avoid Overusing Generic Elements: Refrain from using non-semantic elements like <div> and <span> for structural purposes when semantic alternatives are available.
  • Provide Descriptive Content: Ensure that semantic elements contain meaningful and descriptive content to improve user comprehension and assistive technology interpretation.
  • Test with Assistive Technologies: Regularly verify that semantic elements are correctly interpreted by screen readers and other assistive tools to ensure accessibility.
  • Consistent Use Across Pages: Apply semantic HTML consistently throughout your website to maintain a uniform structure and improve overall accessibility.
  • Enhance with CSS for Styling: Use CSS to style semantic elements without altering their inherent meaning, preserving both accessibility and design integrity.
  • Educate Your Team: Ensure that all team members understand the importance of semantic HTML and adhere to best practices during development.