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>withtypeandstartattributes - 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>