Creating a Table of Contents using Anchors

1. Format a list of your subheadings
2. Create titles for your subheadings
3. Place an anchor at each subheading
4. Select the text in your table of contents
5. Good Practice

---

---

---

---

---

Format a list of your subheadings

First, create a list of your subheadings to be used as the Table of Contents. In this document, they are the five numbered lines above. These correspond to the five sections in this document.

To create a numbered list, use the <ol> tag.

Return to top

---

---

---

---

---

Create titles for your subheadings

Copy and paste each label from your table of contents to the corresponding section in the document. In this document, I've made each subheading in the body of the page an <h3> heading (Format popup). Note also that I've put a series of 5 horizontal rules between each setting.

Return to top

---

---

---

---

---

Place an anchor at each subheading

In front of the first word of a subheading withing the body of your page create the following tag:

<a name="anchorname">Name of Heading</a>

Replace anchorname with a unique name (value) for this anchor. This places an invisible piece of code in front of the text that serves as a place marker.

Note: Anchors should be given descriptive names to make your job as a coder easier.

Return to top

---

---

---

---

---

Tag the text in your table of contents

When you have put all of the anchors in place throughout the document, return to the table of contents. Tag each entry in the following way:

<a href="#anchorname">Section Name</a>

Each line of the table of contents will have a link to its section.

Return to top

---

---

---

---

---

Good Practice

It's good practice to include a link back to the top of the page, as I've done throughout this document. These are simply anchors in reverse. I've placed an anchor around the page heading and then linked to each to the Return to top text.

Note: Once you've created one "Return to top" link, you can simply copy the entire tag and paste it in each location throughout your page.

Return to top