{"id":38270,"date":"2025-01-13T14:43:49","date_gmt":"2025-01-13T19:43:49","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?post_type=reference-article&#038;p=38270"},"modified":"2025-01-13T22:20:26","modified_gmt":"2025-01-14T03:20:26","slug":"table-of-contents-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/table-of-contents-block\/","title":{"rendered":"Table of Contents Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1.png\" data-fullsize=\"1384x870\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"644\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1-1024x644.png\" alt=\"An example of the Table of Contents block\" class=\"wp-image-38284\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1-1024x644.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1-300x189.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1-768x483.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-1.png 1384w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>The Table of Contents block can enhance the overall experience of visiting a webpage. Certain webpages benefit from the inclusion of a table of contents. In particular, pages that are <a href=\"https:\/\/www.wordstream.com\/blog\/ws\/2014\/05\/05\/longform-content\" data-type=\"link\" data-id=\"https:\/\/www.wordstream.com\/blog\/ws\/2014\/05\/05\/longform-content\">long-form<\/a> in nature. Some common examples are:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-padded-list\">\n<li>In-depth articles<\/li>\n\n\n\n<li>How-to guides<\/li>\n\n\n\n<li>Whitepapers<\/li>\n\n\n\n<li>Research reports<\/li>\n\n\n\n<li>Documentation or FAQs<\/li>\n<\/ul>\n\n\n\n<p>The main goal of including a Table of Contents block is to increase navigability. Below are several other reasons you may want to consider using the Table of Contents block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use the Table of Contents Block?<\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Improvements to navigation<\/strong><\/td><td>The Table of Contents block helps users jump to specific sections of a page. This prevents them from having to scroll through the entire page. This in turn could retain your users on your site.<\/td><\/tr><tr><td><strong>Provides a Helpful Content Overview<\/strong><\/td><td>The Table of Contents block gives users a snapshot of the page&#8217;s structure and topics covered. This helps users determine if they need to search elsewhere on your site for what they are seeking.<\/td><\/tr><tr><td><strong>Enhances Accessibility<\/strong><\/td><td>The Table of Contents block is especially helpful for users with disabilities, in particular those using screen readers or keyboard navigation assistive technology.<\/td><\/tr><tr><td><strong>Reduction of Cognitive Load<\/strong><\/td><td>By breaking content into manageable chunks, the Table of Contents block makes the page less overwhelming. Users tend to skim content on the web. A table of contents can ensure that they see the most important parts of your page.<\/td><\/tr><tr><td><strong>Boosts SEO and Usability<\/strong><\/td><td>The Table of Contents block leverages anchor links. These anchor points within the page are often indexed by search engines. This improves visibility on search engines while providing a better browsing experience.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p>You can find the Table of Contents block within the header area of a page. The block is unlike other blocks, in that is part of the header area. You can add the block here, but nowhere else on the page. This is by design to ensure that your table of contents is first on the page, accessible, and easy to read.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor.png\" data-fullsize=\"1396x887\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor-1024x651.png\" alt=\"Example of table of contents in the WordPress editor\" class=\"wp-image-38287\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor-1024x651.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor-300x191.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor-768x488.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-example-editor.png 1396w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>By default the Table of Contents block is turned off. To enable the block, you must toggle it on. You can do this through the block settings, or the header area toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-toggle.gif\" data-fullsize=\"1398x938\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1398\" height=\"938\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-toggle.gif\" alt=\"GIF demoing toggling the Table of Contents block on\" class=\"wp-image-38289\" \/><\/a><\/figure>\n\n\n\n<p>Before the Table of Contents block populates any content, you must add <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/heading-block\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/heading-block\/\">headings<\/a> to your page. You will also need to set anchor links for each heading item. To learn more about setting you anchor links, you can read our <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/jump-links\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/jump-links\/\">anchor links documentation<\/a>.<\/p>\n\n\n\n<p>After populating your headings and anchor links, they will automatically be added to your table of contents. You can also modify the section title, anchor links, and hide sections you don&#8217;t want to include.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings.png\" data-fullsize=\"1397x904\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings-1024x663.png\" alt=\"Table of Contents block settings\" class=\"wp-image-38293\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings-1024x663.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings-300x194.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings-768x497.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2025\/01\/toc-settings.png 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A Note on Headings<\/h3>\n\n\n\n<p>To get the most out of your Table of Contents block, it&#8217;s important to leverage a good heading structure. Having a thoughtful heading structure also produces a more readable webpage. Which should yield higher reader retention. Feel free to read the article linked below for more information on thoughtful heading structure and anchor links.<\/p>\n\n\n<div class=\"is-text wp-block-ncst-buttons\">\n    \n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/heading-block\/#using-heading-levels\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Learn more about heading hierarchy<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n  <\/div>\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_dynamicHeaderData":"","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[100,51],"class_list":["post-38270","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-accessibility","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38270","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":12,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38270\/revisions"}],"predecessor-version":[{"id":39567,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38270\/revisions\/39567"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=38270"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=38270"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=38270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}