Adding a table of contents; anchor links appear automatically
On this pageLoading table of contents
How to use the table of contents
Table of contents is a component you can add to your page if you want. You can see from the image here what a table of contents looks like. As this page is very short, users can easily skim it through, so the table of contents is not needed here.
You can find the table of contents component from the component list behind the "Add component" button by the name of "content: Table of contents". The component will always appear after the main image, even if you add it as the last component. Table of contents will be formed automatically from each subheading on your page, including liftups your page may have (excluding single liftups), and from almost all component headings. If you want to change any text on your table of contents, you need to edit the heading where that text comes from.
List of components in which titles include an anchor link and also appear in the table of contents:
- Text paragraph
- Manual and Automatic liftups
- Image with text
- Highlight quicklinks
- Donations components
- People liftups (also manual)
- Automatic research outputs
- Social media components
Some components have a field for the title in the top of the component, such as in the Listing component, whereas other components include a separate text field, in which you need to format the titles as headings, such as in the image with text component (see the image on the right).
You can find an example of the Listing component in which the content is behind a so-called accordion on our Drupal FAQ page. The table of contents will show only the text in the Title field, and that field also contains an anchor link. The listing items each have a field called Category, which doesn't appear in the table of contents or contain an anchor link (see the image on the right).
Always use proper hierarchy
The page hierarchy has to be correct, so that the table of contents looks good and works as intended. The title of your page is heading one in the page hierarchy, and the subheading following the title has to be formatted as heading two. If you add a subheading under your subheading, that has to be formatted as heading three. The heading of this paragraph is heading three, the one before that is a heading two. The paragraph describing the anchor links below is formatted as heading two as it introduces a new topic.
Using proper hierarchy is essential from an accessibility point of view, as screen readers will read the heading hierarchy to the user. If one level in the hierarchy is missing - i.e. if you jump from the title of the page to heading three - it gives the impression that something was left unread from heading two.
Better headings equal better table of contents
Since the table of contents will be formed from each subheading on your page, including titles given to components, it's very important to give some thought to each heading. A good heading is short and concise and presents the topic or contents in the text paragraph or a liftup underneath it.
When you add a table of contents, remember the following:
- Use proper hierarchy
- Write clear headings
- Table of contents appears always after the main image
In addition to the table of contents, the site has anchor links. Each subheading on every page is automatically also an anchor link. Anchor links cannot be created, and you don't need to be an editor on aalto.fi to be able to access them. Anyone can link to any anchor link. All subheadings on all pages are anchor links whether those pages have a table of contents or not. Also headings of almost all components (excluding single liftups) are anchor links. You can find the list of all components that contain an anchor link from the beginning of this page.
If you want to link to a specific place on a specific page, just click the heading you want to link to. That link will automatically be copied to your clipboard. You can paste that directly to your browser, which will take you to that specific heading at aalto.fi, or you can use that link e.g. as a hyperlink at the site.
The importance of a good heading becomes even more important with anchor links. When a user lands on your page directly to a specific heading, for instance halfway to the page, the heading needs to be clear so the user can understand what this content is about and what its context is. Please avoid headings that don't really say anything, for example "Instructions" or "Do this", and be more specific, for example "Instructions on creating a table of contents" or "How to apply for a study leave".
More Drupal instructions
Here, you'll find a short description of and a link to the different liftup components available to you at aalto.fi. With them, you can visualise and highlight the versatile content on the site.