{"id":191,"date":"2020-05-17T22:47:47","date_gmt":"2020-05-17T22:47:47","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=191"},"modified":"2022-08-30T08:47:51","modified_gmt":"2022-08-30T12:47:51","slug":"heading-block","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-web-platform\/blocks\/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\"><li>They help create an outline of content that screen reader users leverage to navigate through a web page.<\/li><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><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><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"765\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels-1024x765.jpg\" alt=\"\" class=\"wp-image-765\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels-1024x765.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels-300x224.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels-768x573.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels-1536x1147.jpg 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/heading-levels.jpg 1610w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using Heading Levels Correctly<\/h2>\n\n\n\n<p>There are only a few things that you need to remember to use heading levels correctly.<\/p>\n\n\n\n<p>First and foremost, don&#8217;t skip over levels. Headings should be used in numerical sequential order. It is web convention for a web page&#8217;s title to be heading level one (H1), and there should generally only be one H1 on each web page.<\/p>\n\n\n\n<p>That means that all of the headings that appear within the body of your web page should be H2 or lower. In fact, the NC&#160;State Theme is coded so that you can&#8217;t insert an H1 within the body of a page.<\/p>\n\n\n\n<p>If you need to have subsections within an H2 section of your web page, you&#8217;d then use an H3 header and so on.<\/p>\n\n\n\n<p>On most web pages there will only be the H1 for the title and H2s for the subsections within the body copy. On some very information-dense pages, you might also use some H3 headings. If you are using heading levels 4-6, you might want to consider restructuring your content and potentially splitting it over multiple pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Heading Anchor Points<\/h2>\n\n\n<div class=\"wp-block-image alignright\">\n<figure class=\"size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/anchor-points.jpg\" data-fullsize=\"276x550\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"550\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/anchor-points.jpg\" alt=\"\" class=\"wp-image-199\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/anchor-points.jpg 276w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/anchor-points-151x300.jpg 151w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/a><\/figure><\/div>\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},"excerpt":{"rendered":"<p>Overview 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&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":178,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/191"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":5,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/191\/revisions"}],"predecessor-version":[{"id":2927,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/191\/revisions\/2927"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/178"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}