{"id":9094,"date":"2021-01-11T15:16:18","date_gmt":"2021-01-11T20:16:18","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=9094"},"modified":"2026-05-20T10:04:38","modified_gmt":"2026-05-20T14:04:38","slug":"headings","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","title":{"rendered":"Headings"},"content":{"rendered":"<p>Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/headings\/\">Headings<\/a> page in the User Guide.<\/p>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Why Accessible Headings Matter<\/h2>\n<ul>\n<li>Screen readers rely on headings, not text size or color, to understand page structure.<\/li>\n<li>Proper headings make long pages easier to skim and improve overall usability.<\/li>\n<li>Clear hierarchy improves <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/analytics-and-seo\/\">SEO<\/a> by helping search engines understand how your content is organized.<\/li>\n<\/ul>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Key Requirements for Accessible Headings<\/h2>\n<h3>1. Use Headings for Structure<\/h3>\n<ul>\n<li>Use headings to organize content into meaningful sections, not to make text large or bold.<\/li>\n<li>Headings make pages easier to scan and read. Visitors rely on them to quickly identify where new topics begin and locate information of interest.<\/li>\n<li><a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey10\/#finding\">Navigating through content by headings is the most common way people use screen readers<\/a> to quickly move through a page\u2019s contents.<\/li>\n<\/ul>\n<h3>2. Heading Styles<\/h3>\n<ul>\n<li>A\u00a0<strong>common accessibility mistake<\/strong>\u00a0is bolding text to make it look like a heading instead of applying the actual heading level through the editor.<\/li>\n<li>Do not manually changing heading fonts, colors, or sizes. These styles are already built into the School of Medicine theme for consistency and accessibility.<\/li>\n<\/ul>\n<h3>3. Follow Proper Hierarchy (H1 \u2192 H2 \u2192 H3 \u2192 H4)<\/h3>\n<ul>\n<li>Headings should be used in descending order.<\/li>\n<li>Each page should only have one H1. The page title automatically serves as the page\u2019s H1.<\/li>\n<li>Use H2 through H6 headings within the main content area to organize sections and sub-sections of content.<\/li>\n<li>Do <strong>not<\/strong> skip heading levels (e.g., from H2 to H4).<\/li>\n<\/ul>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<h4>For Example<\/h4>\n<p>Consider the following heading structure from a &#8220;Favorite Recipes&#8221; web page:<\/p>\n<ul class=\"condensed\">\n<li><b>H1:<\/b>\u00a0My Favorite Recipes\n<ul style=\"margin-top: 0px;\">\n<li><b>H2:<\/b>\u00a0Quick and Easy\n<ul style=\"margin-top: 0px;\">\n<li><b>H3:<\/b>\u00a0Spaghetti<\/li>\n<li><b>H3:<\/b>\u00a0Hamburgers<\/li>\n<li><b>H3:<\/b>\u00a0Tacos\n<ul style=\"margin-top: 0px;\">\n<li><b>H4:<\/b>\u00a0Beef Tacos<\/li>\n<li><b>H4:<\/b>\u00a0Chicken Tacos<\/li>\n<li><b>H4:<\/b>\u00a0Fish Tacos<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><b>H2:<\/b>\u00a0Some Assembly Required\n<ul style=\"margin-top: 0px;\">\n<li><b>H3:<\/b>\u00a0Tuna Casserole<\/li>\n<li><b>H3:<\/b>\u00a0Lasagna\n<ul style=\"margin-top: 0px;\">\n<li><b>H4:<\/b>\u00a0Vegetable Lasagna<\/li>\n<li><b>H4:<\/b>\u00a0Beef Lasagna<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><b>H2:<\/b>\u00a0All-In\n<ul style=\"margin-top: 0px;\">\n<li><b>H3:<\/b>\u00a0Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce<\/li>\n<li><b>H3:<\/b>\u00a0Sun Dried Tomato and Pine Nut Stuffed Beef Tenderloin<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"text-align: right;\">Example from <a href=\"https:\/\/webaim.org\/techniques\/headings\">WebAIM<\/a><\/p>\n<\/div>\n<h3>4. Headings Should Be Descriptive and Clear<\/h3>\n<ul>\n<li>Headings should accurately reflect the content that follows.<\/li>\n<li>Keep each heading unique and relevant so users, and search engines, can quickly understand the page structure.<\/li>\n<\/ul>\n<h3>5. Do Not Use All Caps for Headings<\/h3>\n<ul>\n<li>All caps are harder to read and can cause issues for screen readers and voice dictation tools.<\/li>\n<\/ul>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Continue to the Full How-To<\/h2>\n<p>For step-by-step guidance on adding headings, see our <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/headings\/\"><strong>Headings<\/strong><\/a> documentation.<\/p>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"videos\"><\/a>Related Accessibility Videos<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/9ylBqOnEXos\" title=\"Making Headings and Lists More Accessible\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Making Headings and Lists More Accessible<\/h3>\n<p style=\"text-align: center;\">Learn how screen reader users navigate using headings and lists.<br \/>\n4 min. 38 sec.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/QP1rzxMRap4\" title=\"Web Headings for Screen Readers\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Web Headings for Screen Readers<\/h3>\n<p style=\"text-align: center;\">A blind presenter demonstrates real-world heading navigation.<br \/>\n1 min. 52 sec.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"resources\"><\/a>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/webaim.org\/techniques\/headings\"> WebAIM: Headings<\/a> \u2013 Best practices for using headings to improve accessibility, organization, and page structure.<\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/semanticstructure\/\">WebAIM: Semantic Structure: Regions, Headings, and Lists<\/a> \u2013 Overview of semantic HTML and how proper page structure improves accessibility and usability.<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/\">World Wide Web Consortium (W3C): Headings<\/a> \u2013 W3C guidance on creating accessible heading structures and organizing page content logically.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"example\"><\/a>Example<\/h2>\n<figure id=\"attachment_14372\" class=\"thumbnail wp-caption alignnone\" style=\"width: 561px\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14372\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png\" alt=\"\" width=\"551\" height=\"2560\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png 551w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-768x3570.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-441x2048.png 441w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-241x1120.png 241w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><figcaption class=\"caption wp-caption-text\">Example of a well-structured webpage using multiple heading levels.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the Headings page in the User Guide. Why Accessible Headings Matter &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\" aria-label=\"Read more about Headings\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":9092,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9094","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Headings - Web Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Headings - Web Guide\" \/>\n<meta property=\"og:description\" content=\"Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the Headings page in the User Guide. Why Accessible Headings Matter &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-20T14:04:38+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\",\"name\":\"Headings - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png\",\"datePublished\":\"2021-01-11T20:16:18+00:00\",\"dateModified\":\"2026-05-20T14:04:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png\",\"width\":551,\"height\":2560,\"caption\":\"Example of a well-structured webpage using multiple heading levels.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digital Accessibility\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Headings\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"name\":\"Web Guide\",\"description\":\"School of Medicine IT\",\"publisher\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#organization\",\"name\":\"UNC School of Medicine\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png\",\"width\":612,\"height\":150,\"caption\":\"UNC School of Medicine\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Headings - Web Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","og_locale":"en_US","og_type":"article","og_title":"Headings - Web Guide","og_description":"Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the Headings page in the User Guide. Why Accessible Headings Matter &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","og_site_name":"Web Guide","article_modified_time":"2026-05-20T14:04:38+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","url":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","name":"Headings - Web Guide","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png","datePublished":"2021-01-11T20:16:18+00:00","dateModified":"2026-05-20T14:04:38+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png","width":551,"height":2560,"caption":"Example of a well-structured webpage using multiple heading levels."},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/"},{"@type":"ListItem","position":2,"name":"Digital Accessibility","item":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/"},{"@type":"ListItem","position":3,"name":"Headings"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/","name":"Web Guide","description":"School of Medicine IT","publisher":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.med.unc.edu\/webguide\/#organization","name":"UNC School of Medicine","url":"https:\/\/www.med.unc.edu\/webguide\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png","width":612,"height":150,"caption":"UNC School of Medicine"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/"}}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=9094"}],"version-history":[{"count":46,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094\/revisions"}],"predecessor-version":[{"id":15804,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094\/revisions\/15804"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9092"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=9094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}