Semantic HTML

HTML is the language used to structure web pages. Semantic HTML uses elements that describe the meaning of content, including headings that identify sections and subsections. Navigation tools can use these headings to help people move around a page. Check whether one page’s headings match its sections.

Semantic HTML describes the meaning and structure of web content. W3C’s guidance recommends meaningful elements, identified page regions, and logically nested headings. Headings communicate organization, and browsers and assistive technologies—tools such as screen readers used to access content—can use them for navigation. [1] [2]

For a hypothetical cooking guide, <h1>Cooking guide</h1> could identify the overall topic. <h2>Recipes</h2> could begin a section, and <h3>Soups</h3> could begin a subsection within it. Heading levels describe these relationships: level 1 is the highest rank and level 6 is the lowest. [2]

When opening subsections, avoid skipping heading levels where possible. Moving directly from a level 2 heading to a level 4 heading can be confusing. Returning from level 4 to level 2 is acceptable when the previous subsections end and a new section begins. [2]

Page regions are identifiable areas of a page. Marking up regions and giving them distinguishing labels supports orientation and navigation. A heading can also label a region: the tutorial recommends aria-labelledby, an HTML attribute that associates the region with the heading that names it. [1] [2]

Fixed page sections have an important exception. For a sidebar that stays consistent across pages, the tutorial recommends keeping its heading levels consistent even when levels in the main content vary. Heading organization therefore depends on both content relationships and the role of a section across pages. [2]

These examples assume the headings accurately describe the content beneath them. The guidance explains how structure can support navigation; it does not establish a measured improvement for every user or guarantee that a particular implementation is fully accessible. [1] [2]

• Official guidance, not experimental evidence: W3C recommends identifying page regions, labeling them so users can distinguish them, and using meaningful content elements. It describes how well-structured pages support orientation and navigation, including access to main content and important sections for screen reader users. [1]
• Official heading guidance: browsers, plug-ins, and assistive technologies can use headings for navigation within a page. The tutorial recommends logical nesting and avoiding skipped levels where possible, while allowing a return to a higher-level heading when closing subsections. [2]
• Context-dependent guidance: fixed page sections, such as sidebars, should retain consistent heading levels across pages even when the main content’s heading levels vary. The tutorial also recommends associating headings with their page regions using aria-labelledby. [2]

The earlier citation presented as “Semantic Table-of-Contents for Efficient Web Screen Reading” was misidentified and is replaced here with the two supplied W3C guidance documents. Neither supplied excerpt reports experiments, study percentages, or measured effects on navigation speed, cognition, fonts, or behavior. The tutorials list related Web Content Accessibility Guidelines (WCAG) success criteria at Levels A, AA, and AAA; that listing does not make every recommendation a universal requirement or establish conformance or legal compliance. The cooking guide is a hypothetical teaching example.