{"id":191,"date":"2020-05-17T22:47:47","date_gmt":"2020-05-17T22:47:47","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=191"},"modified":"2026-02-25T12:19:41","modified_gmt":"2026-02-25T17:19:41","slug":"heading-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/heading-block\/","title":{"rendered":"Heading Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Heading blocks are used on almost all types of pages. Most web users do not read everything on a web page word-for-word. Rather, they skim to try to find the section of content that might answer the question that they have. Well-structured headings help with this navigation process. <\/p>\n\n\n\n<p>Web pages have six &#8220;levels&#8221; of headings. Correct usage of the heading levels is important for the following reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>They help create an outline of content that screen reader users leverage to navigate through a web page.<\/li>\n\n\n\n<li>They help provide semantic meaning to your web page so that search engines can better crawl your site&#8217;s content. The better a search engine can understand your content, the higher you are likely to appear in search results.<\/li>\n\n\n\n<li>Assuming all content maintainers of a site are using headings correctly, they help create a consistent look-and-feel as users navigate through your site.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"765\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels-1024x765.jpg\" alt=\"Screenshot example of structuring header hierarchies on a webpage.\" class=\"wp-image-765\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels-1024x765.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels-300x224.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels-768x573.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels-1536x1147.jpg 1536w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/heading-levels.jpg 1610w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Heading hierarchies are essential to both the readability and accessibility of webpages <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-heading-levels\">Using Heading Levels Correctly<\/h2>\n\n\n\n<p>Proper heading structure is essential for web accessibility. Headings are not just visual styling tools \u2014 they create a meaningful outline of your content that assistive technologies rely on to interpret and navigate a page.<\/p>\n\n\n\n<p>There are a few key principles to follow to ensure your heading levels are used correctly and accessibly:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Accessibility Considerations<\/h3>\n\n\n\n<ul class=\"wp-block-list is-style-padded-list\">\n<li><strong>Use headings in sequential order<\/strong>: Do not skip heading levels (for example, going from H2 directly to H4). Screen reader users rely on a logical heading hierarchy to understand page structure.<\/li>\n\n\n\n<li><strong>Include only one H1 per page<\/strong>: By web convention, the page title should be the single H1. This clearly identifies the main topic of the page for assistive technologies and search engines.<\/li>\n\n\n\n<li><strong>Use H2s for main sections within the body<\/strong>: All headings within the body content should be H2 or lower. In the NC State Theme, inserting an additional H1 within the body is intentionally restricted to preserve proper structure.<\/li>\n\n\n\n<li><strong>Use H3s and beyond only for true subsections<\/strong>: If you need to divide content within an H2 section, use an H3. Continue descending sequentially (H4, H5, H6) only when content structure genuinely requires it.<\/li>\n\n\n\n<li><strong>Avoid deep heading levels when possible<\/strong>: If you find yourself using H4\u2013H6 frequently, consider restructuring your content or splitting it across multiple pages. Overly complex hierarchies can make navigation more difficult for screen reader users.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why This Matters<\/h3>\n\n\n\n<p>Screen reader users often navigate pages by jumping from heading to heading. A clear, consistent heading structure allows them to:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-padded-list\">\n<li>Quickly scan page sections<\/li>\n\n\n\n<li>Understand relationships between topics<\/li>\n\n\n\n<li>Navigate efficiently without reading all content sequentially<\/li>\n<\/ul>\n\n\n\n<p>When heading levels are used correctly, they create a predictable and accessible experience for all users \u2014 not just those using assistive technology.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Heading Anchor Points<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large alignright\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/anchor-points.jpg\" data-fullsize=\"276x550\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"550\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/anchor-points.jpg\" alt=\"Screenshot of the various heading hierarchies found in the block settings \" class=\"wp-image-199\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/anchor-points.jpg 276w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/anchor-points-151x300.jpg 151w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML anchors are a great way to help users navigate a page quickly<\/figcaption><\/figure>\n\n\n\n<p>If you have a long web page with many sections, you might want to add an anchor point so that you link a user to the specific portion of the web page that will address their question.<\/p>\n\n\n\n<p>Anchor points can be added by clicking in a heading block and then looking at the block&#8217;s settings in the right-hand panel. The &#8220;HTML Anchor&#8221; section lets you add an anchor point that you can then use in linking.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Heading blocks help you provide structure within a web page. This structure helps users navigate to the pieces of content that answer their questions.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[51],"class_list":["post-191","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":10,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/191\/revisions"}],"predecessor-version":[{"id":39255,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/191\/revisions\/39255"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=191"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}