CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732542395990846989"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732542395990846989"> <title> 1: Page Structure in Developer Modules | Curricula | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="1: Page Structure in Developer Modules Curricula" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/curricula/developer-modules/page-structure/" /> <meta property="og:url" content="https://www.w3.org/WAI/curricula/developer-modules/page-structure/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="1: Page Structure in Developer Modules Curricula" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"1: Page Structure in Developer Modules Curricula","url":"https://www.w3.org/WAI/curricula/developer-modules/page-structure/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-1-page-structure-in-developer-modules-curricula "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/curricula/"><span>Curricula on Web Accessibility</span></a></li><li><a lang="en" href="/WAI/curricula/developer-modules/"><span>Developer Modules</span></a></li><li><a lang="en" href="/WAI/curricula/developer-modules/page-structure/" aria-current="page"><span>Page Structure</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/teach-advocate/" class="page-link"><span>Teach & Advocate</span></a></li><li> <a lang="en" href="/WAI/teach-advocate/accessible-presentations/" class="page-link"><span>Making Events Accessible Checklist</span></a></li><li> <a lang="en" href="/WAI/curricula/" aria-current="location" class="page-link"><span>Curricula on Web Accessibility</span></a><ul><li> <a lang="en" href="/WAI/curricula/foundation-modules/" class="page-link"><span>Foundation Modules</span></a><ul><li> <a lang="en" href="/WAI/curricula/foundation-modules/what-is-web-accessibility/" class="page-link"><span>What is Web Accessibility</span></a></li><li> <a lang="en" href="/WAI/curricula/foundation-modules/people-and-digital-technology/" class="page-link"><span>People and Digital Technology</span></a></li><li> <a lang="en" href="/WAI/curricula/foundation-modules/business-case-and-benefits/" class="page-link"><span>Business Case and Benefits</span></a></li><li> <a lang="en" href="/WAI/curricula/foundation-modules/principles-standards-and-checks/" class="page-link"><span>Principles, Standards, and Checks</span></a></li><li> <a lang="en" href="/WAI/curricula/foundation-modules/getting-started-with-accessibility/" class="page-link"><span>Getting Started with Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/curricula/developer-modules/" aria-current="location" class="page-link"><span>Developer Modules</span></a><ul> <li> <a lang="en" href="/WAI/curricula/developer-modules/page-structure/" aria-current="page" class="page-link"><span>Page Structure</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/menus/" class="page-link"><span>Menus</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/images/" class="page-link"><span>Images</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/tables/" class="page-link"><span>Tables</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/forms/" class="page-link"><span>Forms</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/custom-widgets/" class="page-link"><span>Custom Widgets</span></a></li><li> <a lang="en" href="/WAI/curricula/developer-modules/rich-applications/" class="page-link"><span>Rich Applications</span></a></li></ul></li><li> <a lang="en" href="/WAI/curricula/designer-modules/" class="page-link"><span>Designer Modules</span></a><ul><li> <a lang="en" href="/WAI/curricula/designer-modules/visual-design/" class="page-link"><span>Visual Design</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/information-design/" class="page-link"><span>Information Design</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/navigation-design/" class="page-link"><span>Navigation Design</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/interaction-design/" class="page-link"><span>Interaction Design</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/images-and-graphics/" class="page-link"><span>Images and Graphics</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/multimedia-and-animations/" class="page-link"><span>Multimedia and Animations</span></a></li><li> <a lang="en" href="/WAI/curricula/designer-modules/forms-design/" class="page-link"><span>Forms Design</span></a></li></ul></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/" class="page-link"><span>Content Author Modules</span></a><ul><li> <a lang="en" href="/WAI/curricula/content-author-modules/clear-content/" class="page-link"><span>Clear Content</span></a></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/forms/" class="page-link"><span>Forms</span></a></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/images/" class="page-link"><span>Images</span></a></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/data-tables/" class="page-link"><span>Data Tables</span></a></li><li> <a lang="en" href="/WAI/curricula/content-author-modules/multimedia/" class="page-link"><span>Multimedia</span></a></li></ul></li></ul></li><li> <a lang="en" href="/WAI/teach-advocate/accessibility-training/" class="page-link"><span>Develop Accessibility Training</span></a><ul><li> <a lang="en" href="/WAI/teach-advocate/accessibility-training/topics/" class="page-link"><span>Topics</span></a></li><li> <a lang="en" href="/WAI/teach-advocate/accessibility-training/presentation-outlines/" class="page-link"><span>Presentation Outlines</span></a></li><li> <a lang="en" href="/WAI/teach-advocate/accessibility-training/workshop-outline/" class="page-link"><span>Workshop Outline</span></a></li></ul></li><li> <a lang="en" href="https://www.w3.org/WAI/demos/bad/" class="page-link"><span>Before and After Demo (BAD)</span></a></li><li> <a lang="en" href="/WAI/teach-advocate/contact-inaccessible-websites/" class="page-link"><span>Contacting Inaccessible Websites</span></a></li><li> <a lang="en" href="/WAI/business-case/" class="page-link"><span>Business Case</span></a><ul><li> <a lang="en" href="/WAI/business-case/bibliography/" class="page-link"><span>Bibliography</span></a></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Module 1: Page Structure  <span class="in-resource-sub"> in <a lang="en" href="/WAI/curricula/developer-modules/"><span>Developer Modules</span></a>, <a lang="en" href="/WAI/curricula/"><span>Curricula on Web Accessibility</span></a></span> </h1> </header> <h2 class="no-display" id="introduction">Introduction</h2> <p>Courses based on this module should:</p> <ul> <li>demonstrate how people with disabilities rely on headings, sections, and other structures to orient themselves and navigate within web pages</li> <li>demonstrate how people with disabilities rely on semantics in web page coding to identify page components and understand their meaning</li> <li>explain coding techniques to convey the structure and semantics in accessible content</li> </ul> <h2 id="learning-outcomes-for-module">Learning Outcomes for Module</h2> <p>Students should be able to:</p> <ul> <li>explain how page structure enables people with disabilities to orient themselves and navigate within web pages</li> <li>identify and convey the hierarchy of sections of content by using headings</li> <li>write markup for the structure of sections of content, such as paragraphs and lists</li> <li>write markup for different page regions, such as header, footer, and main content</li> <li>write markup for page meta-information to facilitate identification and interpretation</li> <li>outline the benefits of using HTML native elements for compatibility with assistive technologies and adaptive strategies</li> <li>write code to allow people to skip over blocks of repeated content</li> <li>write code for content so that it is presented in a meaningful sequence</li> <li>write styles and code for content so that it has a distinguishable focus indicator</li> </ul> <div class="excol-all"></div> <h2 id="competencies">Competencies</h2> <p>Skills required for this module:</p> <details><summary> <h3 id="students">Students</h3> </summary> <div> <ul> <li><a href="/WAI/curricula/developer-modules/#foundation-prerequisites">Foundation Prerequisites</a></li> <li>Basic knowledge of: <ul> <li><a href="https://html.spec.whatwg.org/multipage/sections.html#sections">HTML5 sections <svg focusable="false" aria-hidden="true" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a></li> <li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content">HTML5 grouping content <svg focusable="false" aria-hidden="true" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a></li> </ul> </li> </ul> </div> </details> <details><summary> <h3 id="instructors">Instructors</h3> </summary> <div> <ul> <li>Applied expertise in teaching: <ul> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships">WCAG 2 Success Criterion 1.3.1 Info and Relationships</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence">WCAG 2 Success Criterion 1.3.2 Meaningful Sequence</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard">WCAG 2 Success Criterion 2.1.1 Keyboard</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks">WCAG 2 Success Criterion 2.4.1 Bypass Blocks</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#page-titled">WCAG 2 Success Criterion 2.4.2 Page Titled</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-order">WCAG 2 Success Criterion 2.4.3 Focus Order</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context">WCAG 2 Success Criterion 2.4.4 Link Purpose (In Context)</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels">WCAG 2 Success Criterion 2.4.6 Headings and Labels</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-visible">WCAG 2 Success Criterion 2.4.7 Focus Visible</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#section-headings">WCAG 2 Success Criterion 2.4.10 Section Headings</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#language-of-page">WCAG 2 Success Criterion 3.1.1 Language of Page</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#language-of-parts">WCAG 2 Success Criterion 3.1.2 Language of Parts</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#consistent-identification">WCAG 2 Success Criterion 3.2.4 Consistent Identification</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#parsing">WCAG 2 Success Criterion 4.1.1 Parsing</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/#name-role-value">WCAG 2 Success Criterion 4.1.2 Name, Role, Value</a></li> <li><a href="https://html.spec.whatwg.org/multipage/sections.html#sections">HTML5 sections <svg focusable="false" aria-hidden="true" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a></li> <li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content">HTML5 grouping content <svg focusable="false" aria-hidden="true" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a></li> <li><a href="https://www.w3.org/TR/wai-aria/#landmark_roles">WAI-ARIA landmark roles</a></li> </ul> </li> <li>In-depth knowledge of <a href="/WAI/curricula/developer-modules/#foundation-prerequisites">Foundation Prerequisites</a></li> </ul> </div> </details> <h2 id="topics-to-teach">Topics to Teach</h2> <p>Topics to achieve the learning outcomes:</p> <details><summary> <h3 id="topic-section-headings">Topic: Section Headings</h3> </summary> <div> <p>Demonstrate the use of the HTML elements <code class="language-plaintext highlighter-rouge">h1</code> through <code class="language-plaintext highlighter-rouge">h6</code> to distinguish and label sections of content. Demonstrate the use of the WAI-ARIA properties <code class="language-plaintext highlighter-rouge">role="heading"</code> and <code class="language-plaintext highlighter-rouge">level="1-6"</code> when HTML headings cannot be used. Explain how different people use headings for orientation and navigation.</p> <h4 id="learning-outcomes-for-topic">Learning Outcomes for Topic</h4> <p>Students should be able to:</p> <ul> <li>explain how headings and their rank levels are used by different types of assistive technologies and adaptive strategies, such as text to speech and custom stylesheets, to allow people with disabilities to understand and navigate the content</li> <li>write markup for headings using the HTML elements <code class="language-plaintext highlighter-rouge">h1</code> through <code class="language-plaintext highlighter-rouge">h6</code>, and using the WAI-ARIA properties <code class="language-plaintext highlighter-rouge">role="heading"</code> and <code class="language-plaintext highlighter-rouge">level="1-6"</code> when HTML headings cannot be used</li> <li>rank heading levels according to the hierarchical structure of the content</li> <li>describe related requirements for authors and designers to provide meaningful texts and distinguishable styles for headings</li> </ul> <h4 id="teaching-ideas-for-topic">Teaching Ideas for Topic</h4> <p>Optional ideas to teach the learning outcomes:</p> <ul> <li>Explain that headings are organized in a hierarchical structure, i.e., h1 being the first rank and h6 being the last one. Emphasize that native HTML elements are more likely to be supported by browsers and assistive technologies. Show examples of how headings can be nested to distinguish and label different sections and subsections of content. Examples of how to structure pages using headings are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/headings/#headings-that-reflect-the-page-organization">Headings that Reflect the Page Organization</a>.</li> <li>Present examples of headings and reflect with students if they are descriptive of the sections they entitle. Mention that providing descriptive headings is a shared responsibility among different team members: content authors, designers, and developers. Descriptions of how to mark up headings to organize passages of text are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/headings/#organize-passages-of-text">Organize Passages of Text</a>.</li> <li>Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate web pages through headings. Explore advanced functionality that some tools provide, such as presenting all headings in a list where users can select the heading they are interested in. Examples of how people with disabilities interact with the Web are provided in <a href="/WAI/people-use-web/">How People with Disabilities Use the Web</a>.</li> </ul> <h4 id="ideas-to-assess-knowledge-for-topic">Ideas to Assess Knowledge for Topic</h4> <p>Optional ideas to assess knowledge:</p> <ul> <li>Short Answer Questions — Ask students how many heading levels there are in the HTML specification, and how each of the heading levels can be coded. Assess students’ knowledge of the HTML elements <code class="language-plaintext highlighter-rouge">h1</code> through <code class="language-plaintext highlighter-rouge">h6</code>, as well as the WAI-ARIA properties <code class="language-plaintext highlighter-rouge">role="heading"</code> and <code class="language-plaintext highlighter-rouge">level="1-6"</code>.</li> <li>Practical — Give students a web page that contains incorrect heading ranks and ask students to use <code class="language-plaintext highlighter-rouge">h1</code> through <code class="language-plaintext highlighter-rouge">h6</code> elements to indicate the correct heading structure. Assess how students relate the visual layout of the page with the underlying structure.</li> <li>Practical — Give students headings that do not describe the sections they entitle and ask students to replace the text of the headings with descriptive information. Assess how students provide descriptive titles for sections.</li> </ul> </div> </details> <details><summary> <h3 id="topic-sections-of-content">Topic: Sections of Content</h3> </summary> <div> <p>Explain the use of HTML elements to convey the structure of contents. For example, the proper coding of sections, paragraphs, and lists.</p> <h4 id="learning-outcomes-for-topic-1">Learning Outcomes for Topic</h4> <p>Students should be able to:</p> <ul> <li>explain how properly coded sections of content can be presented in different ways; for example, read aloud using text-to-speech technologies, rendered using custom styling, and displayed in different screen and text sizes</li> <li>describe the purpose of the HTML elements <code class="language-plaintext highlighter-rouge">section</code>, <code class="language-plaintext highlighter-rouge">article</code>, <code class="language-plaintext highlighter-rouge">p</code>, <code class="language-plaintext highlighter-rouge">ul</code>, <code class="language-plaintext highlighter-rouge">ol</code>, <code class="language-plaintext highlighter-rouge">li</code>, <code class="language-plaintext highlighter-rouge">dl</code>, <code class="language-plaintext highlighter-rouge">dt</code>, and <code class="language-plaintext highlighter-rouge">dd</code></li> <li>write markup for sections of content using the HTML elements <code class="language-plaintext highlighter-rouge">section</code> and <code class="language-plaintext highlighter-rouge">article</code></li> <li>write markup for paragraphs using the HTML element <code class="language-plaintext highlighter-rouge">p</code></li> <li>write markup for lists using the HTML element <code class="language-plaintext highlighter-rouge">ul</code>, <code class="language-plaintext highlighter-rouge">ol</code>, and <code class="language-plaintext highlighter-rouge">dl</code></li> <li>write markup for list items using the HTML elements <code class="language-plaintext highlighter-rouge">li</code>, <code class="language-plaintext highlighter-rouge">dt</code>, and <code class="language-plaintext highlighter-rouge">dd</code></li> <li>write markup for inline and block quotes using the HTML elements <code class="language-plaintext highlighter-rouge">q</code> and <code class="language-plaintext highlighter-rouge">blockquote</code> respectively</li> <li>apply corresponding WAI-ARIA properties when native HTML elements cannot be used</li> <li>describe related requirements for content authors to use appropriate structures to convey content meaning, such as paragraphs and lists</li> </ul> <h4 id="teaching-ideas-for-topic-1">Teaching Ideas for Topic</h4> <p>Optional ideas to teach the learning outcomes:</p> <ul> <li>Define the <code class="language-plaintext highlighter-rouge">section</code> element as a thematic grouping of content. An example of how to mark up the <code class="language-plaintext highlighter-rouge">section</code> element is provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/content/#sections">Sections</a>.</li> <li>Define the <code class="language-plaintext highlighter-rouge">article</code> element as a self-containing unit within the web page. An example of how to mark up the <code class="language-plaintext highlighter-rouge">article</code> element is provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/content/#articles">Articles</a>.</li> <li>Explain that the <code class="language-plaintext highlighter-rouge">p</code> element is used to mark up paragraphs of text. An example of how to mark up the <code class="language-plaintext highlighter-rouge">paragraph</code> element is provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/content/#paragraphs">Paragraphs</a>.</li> <li>Explain that unordered lists are used to group items where the numbering is not relevant, and ordered lists are used when numbering of items matters. Explain that these lists are marked up with the <code class="language-plaintext highlighter-rouge">ul</code> or <code class="language-plaintext highlighter-rouge">ol</code> element, and each of the items is coded with the <code class="language-plaintext highlighter-rouge">li</code> element. Emphasize that each of the list items can contain headings, paragraphs, and other lists. An example of how to mark up unordered lists is provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/content/#lists">Lists</a>.</li> <li>Define description lists as a grouping of several terms and descriptions. Description lists are marked up with the <code class="language-plaintext highlighter-rouge">dl</code> element, terms are marked up with the <code class="language-plaintext highlighter-rouge">dt</code> element, and descriptions are marked up with the <code class="language-plaintext highlighter-rouge">dd</code> element. Examples of how to mark up description lists are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/content/#description-lists">Description Lists</a>.</li> <li>Define quotes as text attributed to another author. Explain that there can be inline or block quotes, and that they are marked up using the HTML elements <code class="language-plaintext highlighter-rouge">q</code> and <code class="language-plaintext highlighter-rouge">blockquote</code> respectively. Examples of how to mark up quotes are provided in the WAI tutorials on <a href="/WAI/tutorials/page-structure/content/#quotes">Quotes</a>.</li> </ul> <h4 id="ideas-to-assess-knowledge-for-topic-1">Ideas to Assess Knowledge for Topic</h4> <p>Optional ideas to assess knowledge:</p> <ul> <li>Research — Students research the HTML specification and provide information about the different ways of coding sections of content. Assess students’ knowledge of the HTML elements for marking up content.</li> <li>Practical — Give students several types of lists and ask students to code them using their corresponding HTML list element. Assess students’ knowledge of the different types of lists.</li> <li>Practical — Give students a passage of text containing several sections, paragraphs, lists, and quotes. Ask students to code the passage using the corresponding HTML elements.</li> </ul> </div> </details> <details><summary> <h3 id="topic-page-regions">Topic: Page Regions</h3> </summary> <div> <p>Explain the use of common markup to identify page regions, such as header, footer, navigation, and main content areas. Explain how page regions support orientation and navigation for people with disabilities.</p> <h4 id="learning-outcomes-for-topic-2">Learning Outcomes for Topic</h4> <p>Students should be able to:</p> <ul> <li>explain how properly coded page regions can be presented in different ways; for example, read aloud using text-to-speech technologies, rendered using custom styling, and displayed in different screen and text sizes</li> <li>describe the purpose of the HTML elements <code class="language-plaintext highlighter-rouge">header</code>, <code class="language-plaintext highlighter-rouge">nav</code>, <code class="language-plaintext highlighter-rouge">main</code>, <code class="language-plaintext highlighter-rouge">section</code>, <code class="language-plaintext highlighter-rouge">article</code>, <code class="language-plaintext highlighter-rouge">aside</code>, and <code class="language-plaintext highlighter-rouge">footer</code></li> <li>write markup for regions of a page using the HTML elements <code class="language-plaintext highlighter-rouge">header</code>, <code class="language-plaintext highlighter-rouge">nav</code>, <code class="language-plaintext highlighter-rouge">main</code>, <code class="language-plaintext highlighter-rouge">section</code>, <code class="language-plaintext highlighter-rouge">article</code>, <code class="language-plaintext highlighter-rouge">aside</code>, and <code class="language-plaintext highlighter-rouge">footer</code>, as well as their corresponding WAI-ARIA landmarks when HTML structures cannot be used</li> <li>label regions using HTML headings, <code class="language-plaintext highlighter-rouge">aria-label</code>, and <code class="language-plaintext highlighter-rouge">aria-labelledby</code> when necessary</li> </ul> <h4 id="teaching-ideas-for-topic-2">Teaching Ideas for Topic</h4> <p>Optional ideas to teach the learning outcomes:</p> <ul> <li>Show examples of different page layouts, and their markup of the header, navigation, main content, section, article, complementary, and footer regions. Emphasize that native HTML elements are more likely to be supported by newer browsers and assistive technologies. Examples of using HTML elements to code page regions are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/regions/">Regions</a>.</li> <li>Explain that WAI-ARIA landmarks provide broader support for old assistive technologies and browsers. Emphasize that they can also enhance HTML 4 semantics if applied to an ordinary <code class="language-plaintext highlighter-rouge">div</code> element. Examples of using WAI-ARIA landmarks to code page regions are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/regions/#accessupport">Page Regions in HTML5 Using WAI-ARIA</a>.</li> <li>Show examples of providing labels for page regions, included by using HTML headings, <code class="language-plaintext highlighter-rouge">aria-label</code>, and <code class="language-plaintext highlighter-rouge">aria-labelledby</code>. Explain that page regions need to be labeled to distinguish them from one another, for example when two regions of the same type are used in a web page. Descriptions of how to label page regions are provided in the WAI Tutorials on <a href="/WAI/tutorials/page-structure/labels/">Labeling regions</a>.</li> <li>Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate page regions. Explore advanced functionality that some tools provide, such as presenting all page regions in a list or tree where users can select the region they are interested in. Examples of how people with disabilities interact with the Web are provided in <a href="/WAI/people-use-web/user-stories/">Stories of Web Users</a>.</li> <li>Invite students to try out functionality built-in to some browsers to facilitate reading. Explain that it changes the layout of the page, showing the main content of a web page when it is marked up appropriately. Discuss with students how this can improve readability for all users. Refer to the support pages of browsers for more information on the particular reading modes they provide.</li> </ul> <h4 id="ideas-to-assess-knowledge-for-topic-2">Ideas to Assess Knowledge for Topic</h4> <p>Optional ideas to assess knowledge:</p> <ul> <li>Short Answer Questions — Ask students about the types of page regions and how each of these can be coded in HTML and WAI-ARIA. Assess students’ knowledge of the different coding techniques for page regions.</li> <li>Practical — Give students several page layouts and ask students to mark them up using HTML elements and WAI-ARIA landmarks. Assess students’ knowledge of the different types of page regions and the different coding techniques to mark them up.</li> </ul> </div> </details> <details><summary> <h3 id="topic-page-orientation-and-navigation">Topic: Page Orientation and Navigation</h3> </summary> <div> <p>Explain how page regions, sections of content, and section headings (described in prior topics) are combined to provide a coherent over-arching page structure. Explain how orientation and navigation across the page is facilitated by additional mechanisms, such as links, visible focus indicator, meaningful sequence, and meta-information.</p> <h4 id="learning-outcomes-for-topic-3">Learning Outcomes for Topic</h4> <p>Students should be able to:</p> <ul> <li>write markup for page titles to identify web pages</li> <li>write markup for the primary language of web pages to allow correct interpretation by assistive technologies</li> <li>label blocks of content repeated on multiple pages with consistent names</li> <li>write code to allow people using only the keyboard to skip over blocks of repeated content</li> <li>write code that allows to present content in a meaningful sequence</li> <li>write code for distinguishable focus indicators, for example by using the CSS <code class="language-plaintext highlighter-rouge">:focus</code> selector</li> <li>describe related requirements for content authors to write meaningful link texts and page titles</li> <li>describe related requirements for designers to provide distinguishable focus indicators for links and other navigational elements</li> <li>describe related requirements for content authors and designers to provide clear layouts and designs that support different viewport sizes</li> </ul> <h4 id="teaching-ideas-for-topic-3">Teaching Ideas for Topic</h4> <p>Optional ideas to teach the learning outcomes:</p> <ul> <li>Demonstrate the use of the HTML element <code class="language-plaintext highlighter-rouge">title</code> within the <code class="language-plaintext highlighter-rouge">head</code> element to convey the topic or purpose of the page. Show examples of where and how browsers and assistive technologies show the contents of the <code class="language-plaintext highlighter-rouge">title</code> element: screen reader keystrokes, browser tabs, browser window titles, and search results. Relate this requirement to WCAG success criterion <a href="https://www.w3.org/WAI/WCAG21/quickref/#page-titled">2.4.2 Page Titled</a>. Examples of how to provide descriptive titles are provided in techniques <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html">G88: Providing descriptive titles for Web pages</a> and <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H25">H25: Providing a title using the title element</a>. Examples of how to write page titles are provided in the Easy Checks resource, section <a href="/WAI/test-evaluate/preliminary/#title">Page title</a>.</li> <li>Demonstrate the use of the <code class="language-plaintext highlighter-rouge">lang</code> attribute, together with a valid language tag, to convey the main language of a web page. Explain that it is placed within the <code class="language-plaintext highlighter-rouge">html</code> tag. Examples of how to convey the main language of a web page are provided in technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57.html">H57: Using the language attribute on the HTML element</a>.</li> <li>Emphasize that, when there is a passage of text in a different language than the default, the <code class="language-plaintext highlighter-rouge">lang</code> attribute needs to be used with a valid language tag that corresponds to the language of that passage. For an explanation of how to code the <code class="language-plaintext highlighter-rouge">lang</code> attribute to convey changes in language, see <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H58.html">H58: Using language attributes to identify changes in the human language</a>.</li> <li>Demonstrate the use of HTML links and other navigational elements, such as those that allow to bypass blocks of content that repeats on multiple pages. Mention that these links need to have the HTML attribute <code class="language-plaintext highlighter-rouge">href</code>, together with a value containing their destination in the form of a uniform resource identifier (URI). Explain that people using only the keyboard rely on bypass blocks mechanisms to skip large blocks of repetitive content, such as headers and navigation bars. Examples of how to code such links are provided in technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html">G1: Adding a link at the top of each page that goes directly to the main content area</a>.</li> <li>Show content in different layouts, for example, with different style sheets applied. Emphasize that content always needs to follow a meaningful sequence that allows to adapt the content to different ways of presentation. For information on how to ensure a meaningful sequence, see technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G57">G57: Ordering the content in a meaningful sequence</a>.</li> <li>Emphasize that keeping focus order is needed for consistency between the visual and programmatic order of items. Show examples of web pages where source order matches visual presentation and compare them with pages where it does not. Link this requirement to WCAG success criterion <a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-order">2.4.3 Focus Order</a>.</li> <li>Show examples of default and custom visual focus indicators. Explain that these indicators can help people know where they are as they browse the web page. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios. Link this requirement to WCAG success criterion <a href="https://www.w3.org/WAI/WCAG21/quickref/#focus-visible">2.4.7 Focus Visible</a>.</li> </ul> <h4 id="ideas-to-assess-knowledge-for-topic-3">Ideas to Assess Knowledge for Topic</h4> <p>Optional ideas to support assessment:</p> <ul> <li>Practical — Give students a set of web pages. Ask students to choose a title that best describes each of the pages and code it appropriately. Assess students’ knowledge of the <code class="language-plaintext highlighter-rouge">title</code> element and how to provide descriptive content.</li> <li>Practical — Give students several passages of text written in different languages and ask students to code them using the correct language tag. Assess students’ knowledge of how to code the different language tags.</li> <li>Practical — Students build a mechanism to bypass blocks of content. Assess students’ understanding of the difference between repeated blocks and content specific to a web page.</li> <li>Short answer questions — Ask students about different navigational mechanisms they are aware of and request students to explain their main features. Assess students’ knowledge of how people navigate within web pages and find specific content.</li> </ul> </div> </details> <div class="excol-all"></div> <h2 id="ideas-to-assess-knowledge-for-module">Ideas to Assess Knowledge for Module</h2> <p>Optional ideas to support assessment:</p> <ul> <li>Practical — Supervise students using different mechanisms that assistive technologies provide to move to next and previous heading and to show all the headings of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through headings.</li> <li>Practical — Supervise students using different mechanisms that assistive technologies provide to move to next and previous region and to show all the regions of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through regions.</li> <li>Practical — Supervise students using different mechanisms that assistive technologies provide to check page titles. Assess students’ knowledge of mechanisms of assistive technologies to check page titles.</li> <li>Portfolio — Students build a simple web page with proper structure and semantics. Assess how students mark up different features, including regions of the page, sections of content, headings, passages of text, title, and page language.</li> </ul> <h2 id="teaching-resources">Teaching Resources</h2> <p>Suggested resources to support your teaching:</p> <ul> <li><a href="/tutorials/page-structure">Page Structure (WAI Web Accessibility Tutorials)</a> — Shows how to provide page structures that are accessible to people with disabilities.</li> <li><a href="/WAI/people-use-web/">How People with Disabilities Use the Web</a> — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.</li> <li><a href="/WAI/perspective-videos/speech/">Text to Speech (Web Accessibility Perspective)</a> — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.</li> <li><a href="/WAI/perspective-videos/layout/">Clear Layout and Design (Web Accessibility Perspectives)</a> — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.</li> <li><a href="/WAI/standards-guidelines/wcag/">WCAG</a> — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.</li> <li><a href="/WAI/standards-guidelines/aria/">WAI-ARIA</a> — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications.</li> <li><a href="https://html.spec.whatwg.org/multipage/">HTML5 living standard <svg focusable="false" aria-hidden="true" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a> — The core markup language for the web.</li> </ul> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/curricula/developer-modules/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Developer Modules</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/curricula/developer-modules/menus/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Menus</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/teach-advocate/curricula/developer/page-structure.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-curricula&wai-url=https://www.w3.org/WAI/curricula/developer-modules/page-structure/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Date:</strong> Updated 4 March 2021. First published December 2019.</p> <p><strong>Editors:</strong> Daniel Montalvo and <a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a>. Contributors: <a href="https://www.w3.org/WAI/EO/EOWG-members">EOWG Participants</a>. <a href="/WAI/curricula/acknowledgements/">Acknowledgements</a> lists contributors and credits.</p> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/WAI/EO/">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide Project</a> funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).</p> <p><svg focusable="false" aria-hidden="true" class="icon-creative-commons "><use xlink:href="/WAI/assets/images/icons.svg#icon-creative-commons"></use></svg> This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p></div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732542395990846989"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732542395990846989"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>