HTML Semantics

HTML semantics means choosing HTML elements according to their meaning, not their appearance. A <nav> tells browsers and screen readers "this is a navigation", whereas a <div> conveys no information. It's the foundation of code-side accessibility: well-structured HTML makes content understandable without JavaScript or extra ARIA attributes.

A screen reader navigating a page made of nested <div> elements announces "group, group, group, clickable". No landmarks. No structure. This is the "div soup". According to MDN, semantics in HTML means using each element according to its role, not according to its visual rendering.

#Which element for which role?

A semantic HTML element communicates its function to the browser and assistive technologies. WCAG criterion 1.3.1 requires it: the structure visible on screen must also be readable by code.

HTML5 structural tags automatically create landmarks:

  • <header> → role banner
  • <nav> → role navigation
  • <main> → role main
  • <footer> → role contentinfo

Screen readers exploit these landmarks to offer navigation shortcuts. A JAWS or VoiceOver user reaches the main content in one keystroke, without scanning the entire page. W3C technique H101 details this mechanism.

The same logic applies to interactive elements:

<!-- Non-semantic -->
<div class="btn" onclick="save()">Save</div>
 
<!-- Semantic -->
<button type="button" onclick="save()">Save</button>

The <button> is focusable by keyboard, activatable with Enter or Space, and announced as a "button" by a screen reader. Without a single extra line of code. The <div> does none of this. To achieve the same result, you must add role="button", tabindex="0" and keyboard event handlers.

#The trap of cosmetic semantics

The opposite mistake is common: choosing an element for its default style. A <blockquote> to indent text that isn't a quote. An <h3> because the font size fits.

The screen reader will announce "quote" or "heading level 3". False information that disorients the user.

The W3C ARIA in HTML specification establishes a principle known as the "first rule of ARIA": if a native HTML element does the job, use it. ARIA exists only for components with no native equivalent: tabs, carousels, context menus.

#In summary

Each <nav>, <main>, <button> or <header> gives a free landmark to assistive technologies. No JavaScript. No ARIA attributes. Choose your elements according to their meaning, not their appearance.

Back to glossary
Share this article

Learn more

Document structure

Document structure is the logical organization of a web page through hierarchical headings (h1 to h6) and semantic HTML5 tags. Screen readers use them to build a navigable table of contents and allow their users to jump directly to the desired section.

ARIA

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that describe interface components to assistive technologies. A custom button, a tabbed system, a dynamic notification: when semantic HTML is not enough, ARIA adds the missing information. But an ARIA attribute without the corresponding behavior does more harm than good.

Information Presentation

Information presentation refers to the way content is visually formatted on a web page: colors, fonts, spacing, positioning. In accessibility, the principle is strict: all formatting is done through CSS, never through misused HTML tags. Content must remain understandable when styles are disabled or modified by the user.