Summary - Table of contents

Build a table of contents with nested ordered and unordered lists.

What we learned in this group

In this group you saw four list types:

Unordered list: <ul> and <li>
Ordered list: <ol> with type and start attributes
Description list: <dl>, <dt>, <dd>
Nested and linked lists

Now we will combine them to build a table of contents that makes navigating a page easier.

Exercise Build a table of contents

Add a <ul> table of contents to body. It should have two <li> items; each with an in-page link <a href="#section-1"> and <a href="#section-2">. Then add two headings: <h2 id="section-1">Section 1</h2> and <h2 id="section-2">Section 2</h2>.

Show example solution

<body>
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
  </ul>
  <h2 id="section-1">Section 1</h2>
  <h2 id="section-2">Section 2</h2>
</body>

Test yourself

Match each tag to its role

<ul>

Unordered list container
<ol>

Ordered list container
<dl>

Description list container
<a href="#x">

In-page link
<h2 id="x">

Heading that serves as anchor
What is the main purpose of a table of contents?
- It shortens the page's load time
- It sets the page's background color
- It gives quick jumps to headings
- It changes the font of headings
Show answer

It gives quick jumps to headings — Correct. A table of contents gives quick jumps to headings via clickable links.

Write the in-page link

<a href="____">Go to section 1</a>

Show answer

<a href="#section-1">Go to section 1</a>

Next lesson: Project: Business card page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies