What is a Table of Contents (TOC) Link?
A TOC (Table of Contents) Link is an anchor link that helps users navigate within the same webpage by clicking on a list of section titles. It is commonly used in long articles, documentation, or blogs to make content easier to access.
How to Create TOC (Table of Contents) Links
TOC (Table of Contents) links are anchor links that allow users to jump to specific sections within a webpage. Here’s how you can create them using HTML and CSS.
Step 1: Create a Table of Contents (TOC)
First, create a list of links that will point to different sections of your page.
Now, add content sections that match the id values in the TOC links.
Step 3: Add Smooth Scrolling with CSS (Optional)
For a smooth scrolling effect, add this CSS:
How It Works:
- The <div> structure organizes the table of contents.
- The <ol> (ordered list) provides clickable links for navigation.
- Clicking a link will jump to the respective section if the id attributes match within your content.
Where Can You Use TOC Links?
- Blogs (Blogger, WordPress, HTML Sites)
- FAQs & Documentation Pages
- Long Articles for Better Navigation
- Wikipedia-Style Content Pages
Introduction
This section explains what TOC links are and how they help users.
What is a TOC Link?
A TOC link is an internal anchor link that helps users jump to different sections on the same page.
How to Create TOC Links
You create a TOC link by using the <a href="#section-id">Text</a> format.
Example Code
Here’s an example of how to create TOC links using HTML and CSS.