3 minute read

Use Semantic HTML

Imagine a library where none of the books are labeled, categorized, or shelved in any logical order.

For anyone looking for specific information, navigating such chaos would be a nightmare.

Now picture a well-organized library: shelves are labeled by genre, books are categorized by subject, and every section has clear signage. This structure makes it easy to find what you’re looking for, whether you’re browsing or asking for help.

Semantic HTML works like that well-organized library. By using tags that describe the meaning of content it creates a clear and intuitive structure for both users and assistive technologies.

What is Semantic HTML?

Semantic HTML means using HTML elements that describe the content they contain, adding structure and meaning to webpages. Unlike non-semantic tags like <div> and <span>, semantic tags like <header>, <nav>, and <article> communicate the type of content within each section.

Examples of semantic HTML elements include:

  • <header> – Defines the page or section header.
  • <nav> – Contains navigation links.
  • <article> – Represents self-contained content, like a blog post.
  • <section> – Groups related content.
  • <aside> – Provides supplementary content (e.g., sidebars).
  • <footer> – Defines the page or section footer.
  • <main> – Marks the main content of the page.
  • <figure> and <figcaption> – Display images or visuals with captions.

How to implement Semantic HTML for accessibility

1. Structure your content logically

Use semantic tags to create clear, logical content structure.

  • Headings (<h1> to <h6>) – Use headings to establish content hierarchy, starting with <h1> for the main title and following with <h2> for subheadings.
  • Sections (<section>, <article>, <nav>, <aside>) – Use these tags to group related content and help people quickly identify different parts of the page.

2. Use ARIA roles when necessary

Semantic HTML should come first, but ARIA can provide additional context if needed.

  • ARIA landmarks – Use ARIA landmarks like role="main" when semantic tags alone don’t fully convey content. Remember, ARIA should complement, not replace, semantic HTML.

3. Provide text alternatives for non-text content

Semantic HTML helps make images and multimedia accessible.

  • Alt text for images – Use meaningful alt text for <img> elements, or an empty alt (alt="") for decorative images.
  • Captions and descriptions – Use <figure> and <figcaption> for visuals, and include captions or transcripts for videos.

4. Improve form accessibility

Accessible forms are essential for usability.

  • Labeling form elements – Use <label> to associate text labels with form fields, matching the for attribute in <label> with the id of the input.
  • Grouping fields – Use <fieldset> to group related fields and <legend> for group labels, helping screen readers understand form structure.

5. Test your HTML for accessibility

Testing ensures your semantic HTML enhances accessibility.

  • Screen reader testing – Use screen readers to verify your content is logically structured.
  • Automated tools – Use tools like the Silktide platform to detect accessibility issues related to semantic HTML.

Best practices for semantic HTML

  • Minimize non-semantic tags – Avoid using <div> and <span> for content that can be described by semantic tags.
  • Maintain consistency – Use semantic HTML consistently across your site for a unified experience.
  • Regularly audit your code – Review and update your HTML structure to maintain accessibility and conduct periodic audits.

Further reading

Previous articleNext article
Back to top