Document Structure and Landmarks
BeginnerThe element you choose is an API. A div says nothing; a nav, a main and a heading tell the browser, the screen reader and Google what the page is.
Overview
HTML written as a pile of divs still renders, which is why people conclude the element choice does not matter. It matters to everything that is not a sighted mouse user: a screen reader navigates by landmarks and headings, a search engine reads the outline, reader mode looks for an article, and browser keyboard shortcuts depend on structure. Semantic markup is also less work — a nav needs no role attribute and a button needs no key handler. The choice is between describing your content once, or describing it never and then patching the consequences.
The Shell
What belongs in the head, and why the lang and viewport lines are not optional.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Two Sum — AiCanCode</title>
<meta name="description" content="Solve Two Sum with a hash map in O(n).">
<link rel="canonical" href="https://aicancode.org/dsa/two-sum">
</head>
<body> … </body>
</html>
// lang="en" tells a screen reader which voice to use. Without it,
// English is read with the user's default language phonetics —
// which is unintelligible.
// Without the viewport meta, a phone renders the page at 980px and
// zooms out. Every responsive rule you write is then ignored.
// title is the browser tab, the bookmark, the search result heading
// and the first thing a screen reader announces. Front-load the
// specific part: "Two Sum — AiCanCode", not "AiCanCode — Two Sum".Landmarks
Five elements that let a screen-reader user skip straight to the part they want.
<body>
<header> <!-- site header: logo, primary nav -->
<nav aria-label="Main">…</nav>
</header>
<main> <!-- the unique content. EXACTLY ONE per page -->
<article> <!-- self-contained: a post, a problem, a card -->
<h1>Two Sum</h1>
<section> <!-- a thematic group, and it needs a heading -->
<h2>Approach</h2>
</section>
</article>
<aside>…</aside> <!-- tangential: related links, ads -->
</main>
<footer>…</footer>
</body>
// A screen reader lists these as landmarks and jumps between them.
// A page of divs offers one landmark: the whole document.
// Two navs need distinguishing names:
<nav aria-label="Main"> <nav aria-label="Breadcrumb">
// section without a heading is just a div with extra characters.
// If there is no heading, use a div.The Heading Outline
Headings are a table of contents, not font sizes. This is the single most used screen-reader feature.
<h1>Two Sum</h1> <!-- one per page: what this page is -->
<h2>Problem</h2>
<h2>Approach</h2>
<h3>Brute force</h3>
<h3>Hash map</h3>
<h2>Complexity</h2>
// Rules:
// - exactly one h1
// - never skip a level (h2 straight to h4)
// - order by MEANING, never by how big you want the text
// Wrong, and extremely common:
<h3>Small heading</h3> <!-- chosen because h3 looks right -->
<h1 class="text-sm">…</h1> <!-- chosen because it is the top -->
// Size is CSS's job:
h2 { font-size: 1.25rem }
.display { font-size: 3rem } <!-- a class, on whatever level is correct -->
// Screen-reader users navigate a page by pressing H repeatedly.
// A broken outline is a page they cannot skim.Key Points to Remember
- 1lang on the html element decides which voice a screen reader uses; without it English is read with the wrong phonetics
- 2Without the viewport meta tag a phone renders at 980px and every responsive rule is ignored
- 3header, nav, main, aside and footer are landmarks a screen-reader user can jump between — exactly one main per page
- 4Headings are an outline: one h1, no skipped levels, ordered by meaning rather than by size
- 5A section without a heading should be a div; the element you choose is information, not decoration
Interview Questions
Sign in to ask AriaWhy does it matter whether you use a <nav> or a <div class="nav">?
What happens on a phone if you omit the viewport meta tag?
Why should heading levels never be chosen for their font size?
Ask Aria about Document Structure and Landmarks
Your personal AI tutor — ask anything about this concept
Revision Status
Personal Notes
Sign in to save personal notes for this topic.
Discussion
Sign in to join the discussion.