You are here: Home > Articles > Semantic Structure
The Nature of HTML
The originators of HTML—particle physicists sharing documents—had no interest in fluffy visuals. They set out to create a World Wide Web of machine-readable pages to display in every system and browser, including those that spoke text to visually-impaired users. The result was a library of documents that only machines (or particle physicists) would want to read.
As the Web grew, the lack of visual emphasis led designers to stress over trying to get pages to look a certain way, which in turn pressured browser developers to create proprietary visual and layout features and extensions that strayed from HTML standards.
For example, designers might avoid heading elements (, , and so on) because they lack subtlety: Unmodified, they can look absurdly large (, ) or ridiculously small (, ). They were not created with visual design in mind. Their sole purpose is to define a nested structure content hierarchy so that humans and machines can infer information structure. Only incidentally did browser developers impose default font sizes and strengths on heading elements.
CSS filled the gap by allowing designers to define visual presentation without harming underlying semantics and structure, which is what screen readers and other assistive technologies primarily rely on.
Regions
Most pages have a visual structure with a block of content (typically logo, navigation, search, etc.) at the top, a main content area, a footer, and sometimes sidebars with related information. Page regions such as , , , , and programmatically define the essential semantic structure of a page. Screen reader users can easily navigate among these major page areas. The same can be achieved with equivalent ARIA landmark roles. The terms "region" and "landmark" are often used synonymously.
We recommend every page have one element (or
). Most pages also have only one and . , , and must be direct children of to be exposed to screen readers. They cannot be nested within other container elements. All page content must be contained in a region.
The region should usually be applied only to the primary navigation. It is not helpful to wrap every link or list of links in a element. Since users typically expect regions to include links, it is not necessary to use within either.
On sites with deep content, it may be helpful to use a second on interior pages for secondary navigation—for example, navigation within a certain content category or department. In this case, each element should be differentiated with aria-label; for example, . If the begins with a heading, aria-labelledby can be used to label the with that heading.
and can be useful to contain blocks of content. They do not function as regions unless they are given an ARIA label, but this is rarely useful.
Headings
A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.
Tip
To reveal the structure of a page, submit a URL in WAVE and then select the Structure tab in the sidebar of the resulting page.
The originators of HTML—particle physicists sharing documents—had no interest in fluffy visuals. They set out to create a World Wide Web of machine-readable pages to display in every system and browser, including those that spoke text to visually-impaired users. The result was a library of documents that only machines (or particle physicists) would want to read.