Adding a table of contents; anchor links appear automatically

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 decide if the table of contents should expand or collapse by default on opening.

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
• Listing
• Image with text
• Quicklinks
• Highlight quicklinks
• Gallery
• Slider
• Donations components
• People liftups (also manual)
• Automatic research outputs
• Social media components

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:

1. Use proper hierarchy
2. Write clear headings
3. Table of contents appears always after the main image

Anchor links

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".