{"id":2637,"date":"2024-01-31T14:23:31","date_gmt":"2024-01-31T19:23:31","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2637"},"modified":"2026-08-10T21:00:22","modified_gmt":"2026-08-11T01:00:22","slug":"table-of-contents","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/intermediate-training\/intermediate-training-module-2-common-content-blocks\/table-of-contents\/","title":{"rendered":"Table of Contents"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Table of Contents Block\n <\/h1>\n \n \n \n\n

Intermediate Training Module 2: Common Content Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

The Table of Contents block automatically creates a navigational menu based on the headings used on a page. It is one of the easiest ways to improve navigation on longer pages and help visitors find information more quickly.<\/p>\n\n\n\n

As headings are added, removed, or updated, the Table of Contents updates automatically. This makes it an ideal solution for pages containing large amounts of content, such as guides, policies, FAQs, and training materials.<\/p>\n\n\n\n

You’ll notice that many pages throughout this training site use a Table of Contents to help readers jump directly to the sections they’re interested in.<\/p>\n\n\n\n

When to Use a Table of Contents<\/h2>\n\n\n\n

A Table of Contents is most useful on pages that contain multiple sections or a significant amount of content.<\/p>\n\n\n\n

Common examples include:<\/p>\n\n\n\n

    \n
  • Training modules<\/li>\n\n\n\n
  • Documentation pages<\/li>\n\n\n\n
  • Policies and procedures<\/li>\n\n\n\n
  • FAQ collections<\/li>\n\n\n\n
  • Resource guides<\/li>\n\n\n\n
  • Long-form content<\/li>\n<\/ul>\n\n\n\n

    For shorter pages with only one or two sections, a Table of Contents is usually unnecessary.<\/p>\n\n\n\n

    How the Table of Contents Works<\/h2>\n\n\n\n

    The block automatically generates links based on the headings that appear below it on the page.<\/p>\n\n\n\n

    Typically:<\/p>\n\n\n\n

      \n
    • H2 headings<\/strong> become top-level items.<\/li>\n\n\n\n
    • H3 headings<\/strong> appear as sub-items beneath the relevant H2 heading.<\/li>\n<\/ul>\n\n\n\n

      For example:<\/p>\n\n\n\n

      Introduction (H2)\nGetting Started (H2)\n    Creating Content (H3)\n    Publishing Content (H3)\nAdditional Resources (H2)<\/code><\/pre>\n\n\n\n
      Would automatically generate a navigation menu based on that structure.<\/p>\n\n\n\n
      Because it relies on headings, using proper Heading blocks and heading hierarchy is important.<\/p>\n\n\n\n
      Adding a Table of Contents<\/h2>\n\n\n\n
      To add a Table of Contents:<\/p>\n\n\n\n
        \n
      1. Click the +<\/strong> button and search for Table of Contents<\/strong>.<\/li>\n\n\n\n
      2. Select the Table of Contents block.<\/li>\n\n\n\n
      3. Place it where you want the navigation menu to appear.<\/li>\n<\/ol>\n\n\n\n
        That’s it!<\/p>\n\n\n\n
        The block will automatically build itself using the headings that follow it on the page.<\/p>\n\n\n\n
        Block Placement<\/h2>\n\n\n\n
        The position of the Table of Contents matters.<\/p>\n\n\n\n
        The block will generate links based on the headings that appear below it in the page structure.<\/p>\n\n\n\n
        For this reason, it is usually placed:<\/p>\n\n\n\n
          \n
        • Near the top of the page<\/li>\n\n\n\n
        • Below the page introduction<\/li>\n\n\n\n
        • Before major content sections<\/li>\n<\/ul>\n\n\n\n
          This allows visitors to immediately see all available sections and navigate directly to them.<\/p>\n\n\n\n
          Heading Structure Matters<\/h2>\n\n\n\n
          The quality of a Table of Contents depends on the quality of your heading structure.<\/p>\n\n\n\n
          Good Example:<\/p>\n\n\n\n
          H2 Admissions\n    H3 Applying\n    H3 Deadlines\nH2 Tuition\n    H3 Fees\n    H3 Scholarships<\/code><\/pre>\n\n\n\n
          Less Effective Example<\/strong><\/p>\n\n\n\n
          H2 Admissions\n    H4 Applying\nH2 Tuition\n    H5 Fees<\/code><\/pre>\n\n\n\n
          Using proper heading levels creates a clearer and more accessible navigation experience.<\/p>\n\n\n\n
          Benefits of Using a Table of Contents<\/h2>\n\n\n\n
            \n
          • Improved Navigation<\/strong>
            Visitors can jump directly to relevant sections without scrolling through the entire page.<\/li>\n\n\n\n
          • Better User Experience<\/strong>
            Large pages become easier to browse and understand.<\/li>\n\n\n\n
          • Automatic Updates<\/strong>
            As headings change, the Table of Contents updates automatically.<\/li>\n\n\n\n
          • Encourages Better Page Structure<\/strong>
            Using a Table of Contents reinforces the importance of clear heading hierarchy and accessible content organization.<\/li>\n<\/ul>\n\n\n\n
            Best Practices<\/h2>\n\n\n\n
            Use on Longer Pages<\/strong>
            A Table of Contents provides the greatest value on pages with several sections.<\/p>\n\n\n\n
            Use Descriptive Headings<\/strong>
            Visitors should be able to understand what each section contains based on the heading alone.<\/p>\n\n\n\n
            Good Examples:<\/p>\n\n\n\n
              \n
            • Admission Requirements<\/li>\n\n\n\n
            • Contact Information<\/li>\n\n\n\n
            • Frequently Asked Questions<\/li>\n<\/ul>\n\n\n\n
              Avoid:<\/p>\n\n\n\n
                \n
              • Details<\/li>\n\n\n\n
              • More Information<\/li>\n\n\n\n
              • Section 1<\/li>\n<\/ul>\n\n\n\n
                Follow Heading Hierarchy<\/strong><\/p>\n\n\n\n
                Use headings in a logical order: h2, h3, h4<\/code>. This creates a cleaner navigation structure.<\/p>\n\n\n\n
                Place It Near the Top<\/strong>
                Users should be able to see the Table of Contents before they begin scrolling through the page.<\/p>\n\n\n\n
                \n