Document Outline
Definition
Take every heading on a page in order, note its level, and you have the outline: an h1 with two h2 sections under it, each with its own h3 subsections. Nothing renders this, but software reads it constantly. HTML once specified a second mechanism, an outline algorithm that derived structure from sectioning elements such as section and article, but no browser or assistive technology ever implemented it and it was removed from the HTML Living Standard, which leaves heading levels as the only thing that actually defines the hierarchy. WCAG covers the underlying requirement in 1.3.1 Info and Relationships at level A, asks for descriptive wording in 2.4.6 Headings and Labels at level AA, and encourages section headings throughout in 2.4.10 at level AAA. Documents work the same way: Word's navigation pane, a PDF's bookmarks panel and the heading elements in a PDF tag tree are all views of the same outline.
Why It Matters
Heading navigation is the single most used feature in screen reader software after basic reading. Surveys of screen reader users have consistently put headings first among the ways they find their way around a page, using a keystroke to jump between them or an element list to see them all at once. A page with one h1 and 30 paragraphs styled to look like headings offers that reader nothing but a single long scroll. Skipped levels cause a subtler problem: jumping from h2 to h4 implies a missing section, so the listener cannot tell whether they are inside the previous topic or a new one. Search engines read the same structure, and the headings are what often become the jump links in a result.
How It Works
Use one h1 for the page's subject, then h2 for each major section, h3 for subsections beneath them, and do not skip a level on the way down — going back up several levels at once is fine, because that closes sections rather than opening one that does not exist. Choose the level for what the content is, never for how big the text should look; styling belongs in CSS, and an h2 can be set smaller than an h3 if the design demands it. Do not use a heading to make a caption or a form label bold, because it appears in the outline as a section that does not exist. Check the result the way a screen reader user would, with a browser extension that prints the heading tree, or NVDA's element list, or the VoiceOver rotor. In a PDF the export carries the same levels into H1 through H6 tags, which is why fixing the outline in the original document fixes it everywhere.
Real-World Example
A trainer publishes a 30-page course handbook at course-handbook.99helpers.site after exporting it from Word. The document looked structured but had been formatted by hand — bold 14-point text instead of heading styles — so the exported tagged PDF contained no headings, no bookmarks panel and no way to jump between modules. Reapplying Heading 1 and Heading 2 styles in the source document took twenty minutes and produced a PDF with a working bookmark tree on the next export. The updated file replaced the old one on 99helpers, so everyone who had already shared the link got the better version.
Common Mistakes
- ✕Picking heading levels by font size — the outline then reports sections that do not exist and hides ones that do, while the page looks entirely normal
- ✕Skipping from h2 to h4 to get smaller text — a listener hears a gap and cannot tell whether a section was missed or the nesting is simply wrong
- ✕Relying on section and article elements to create structure — the outline algorithm that would have done that was never implemented and has been dropped from the specification
Related Terms
Heading Structure
Heading structure is the order and nesting of the H1 to H6 elements on a page. Read on their own, they should give a usable outline of what the page covers.
Tagged PDF
A tagged PDF carries a hidden tree of structure elements — headings, paragraphs, lists, tables, figures — running in parallel with the visible page. Tags are what let software tell a heading from a caption.
Screen Reader
A screen reader is software that turns what is on screen into speech or braille and gives the user a keyboard interface for moving through it. JAWS, NVDA, VoiceOver, Narrator and TalkBack are the ones in common use.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →