{"id":42088,"date":"2018-12-04T22:01:20","date_gmt":"2018-12-04T14:01:20","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42088"},"modified":"2022-07-15T17:01:25","modified_gmt":"2022-07-15T09:01:25","slug":"create-auto-generated-table-of-contents-html-slot","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/","title":{"rendered":"How to Auto-generated Table of Contents with HTML Slots"},"content":{"rendered":"

Table of contents<\/strong> can greatly improve the user experience of many websites, for instance documentation sites<\/strong> or online encyclopedias<\/strong> like Wikipedia. A well-designed table of contents gives an overview of the page<\/strong> and helps users quickly navigate to the section they are interested in.<\/p>\n

Traditionally, you can create table of contents either in HTML or with JavaScript, but the lately standardized HTML slots provide a middle way between the two<\/strong>. HTML Slot<\/a><\/strong> is a web standard that allows you to add placeholders to a web page<\/strong> and later fill it with content dynamically<\/strong>.<\/p>\n

Read Also:<\/strong> How to Use HTML <template> & <slot> With Shadow DOM<\/a><\/p>\n

When to use the <slot><\/code> tag<\/h2>\n

You can place <slot><\/code> tags into the table of contents inside your HTML file, so the slots later can be filled with the relevant headings and subheadings<\/strong>. When the headings are changed the slots are auto-updated<\/strong>.<\/p>\n

With this technique, you need to create the HTML source code of the table of contents manually. JavaScript only auto-generates the text content of the table of contents, based on the headings or subheadings on the page<\/strong>.<\/p>\n

If you don\u2019t want to table of contents to be present in the HTML you need to generate both the layout and the content with JavaScript<\/strong>.<\/p>\n

1. Create the HTML<\/h2>\n

The HTML source code for the TOC (table of contents) will be inside a <template><\/code><\/a> tag<\/strong>. The code inside <template><\/code> doesn\u2019t get rendered until it\u2019s added to the document by JavaScript. Our TOC will have placeholders<\/strong>, held in <slot><\/code> tags, for all the headings and subheadings<\/strong> found in the document.<\/p>\n

The name<\/code> attribute of each <slot><\/code> will have the same value as the slot<\/code> attribute in their corresponding headings and subheadings in the document.<\/p>\n

Below, you can see a sample HTML <article><\/code> with some headings and subheadings<\/strong>. The <div><\/code> at the beginning is where we\u2019ll insert the auto-filled TOC.<\/p>\n

\r\n<div id='toc'><\/div>\r\n<article>\r\n<p>Velociraptor (meaning \"swift seizer\" in Latin) is a \u2026<\/p>\r\n\r\n<h2 slot='h-1'>Description<\/h2>\r\n<p>Velociraptor was a mid-sized dromaeosaurid, with adults \u2026<\/p>\r\n\r\n\t<h3 slot='sh-1-1'>Feathers<\/h3>\r\n\t<p>Fossils of dromaeosaurids more primitive than \u2026<\/p >\r\n\r\n<h2 slot='h-2'>History of discovery<\/h2>\r\n<p>During an American Museum of Natural History expedition \u2026<\/p>\r\n\r\n<h2 slot='h-3'>Classification<\/h2>\r\n<p>Velociraptor is a member of the group Eudromaeosauria, a derived sub-group of \u2026<\/p>\r\n\r\n<h2 slot='h-4'>Paleobiology<\/h2>\r\n<p>The \"Fighting Dinosaurs\" specimen, found in 1971, preserves a \u2026<\/p>\r\n\r\n\t<h3 slot='sh-4-1'>Scavenging behavior<\/h3>\r\n\t<p>In 2010, Hone and colleagues published a paper on \u2026<\/p>\r\n\r\n\t<h3 slot='sh-4-2'>Metabolism<\/h3>\r\n\t<p>Velociraptor was warm-blooded to some degree, as it required a \u2026<\/p>\r\n\r\n\t<h3 slot='sh-4-3'>Pathology<\/h3>\r\n\t<p>One Velociratoptor mongoliensis skull bears two parallel \u2026<\/p>\r\n<\/article><\/pre>\n
As you can see, each heading is given a unique slot<\/code> value<\/strong>.<\/p>\n
And, here\u2019s the HTML code of the TOC<\/strong>, inside a <template><\/code> tag.<\/p>\n
\r\n<template>\r\n<ul>\r\n\t<li>\r\n\t\t<slot name='h-1'><\/slot>\r\n\t\t<ul>\r\n\t\t\t<li><slot name='sh-1-1'><\/slot><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li><slot name='h-2'><\/slot><\/li>\r\n\t<li><slot name='h-3'><\/slot><\/li>\r\n\t<li>\r\n\t\t<slot name='h-4'><\/slot>\r\n\t\t<ul>\r\n\t\t\t<li><slot name='sh-4-1'><\/slot><\/li>\r\n\t\t\t<li><slot name='sh-4-2'><\/slot><\/li>\r\n\t\t\t<li><slot name='sh-4-3'><\/slot><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n<\/ul>\r\n<style>\r\n\tul {\r\n\t\tlist-style: none;\r\n\t}\r\n\/* \u2026 *\/\r\n<\/style>\r\n<\/template>\r\n<\/pre>\n
In the two code snippets above, notice the matching slot<\/code> and name<\/code> attributes<\/strong> inside the headings and the <slot><\/code> tags.<\/p>\n
2. Number the headings<\/h2>\n
Before looking into the JavaScript\tcode that will add the TOC from the <template><\/code> to the document, let\u2019s add serial numbers for the headings, using CSS counters<\/a><\/strong>.<\/p>\n
\r\narticle {\r\n\tcounter-reset: heading;\r\n}\r\narticle h2::before {\r\n\tcounter-increment: heading;\r\n\tcontent: '0'counter(heading)': ';\r\n}\r\n<\/pre>\n
Ensure that the counter-reset<\/code> rule belongs to the element that\u2019s the immediate parent of all the titles carrying the slot<\/code> attribute<\/strong> (which is the <article><\/code> element in our code).<\/p>\n
3. Insert the TOC into the document<\/h2>\n
Now, we add the script that inserts the TOC above the <article><\/code> tag<\/strong>, inside the <div id='toc'><\/div><\/code> container.<\/p>\n
\r\ntemplateContent = document.querySelector('template').content;\r\narticle = document.querySelector('article').cloneNode(true);\r\narticle.attachShadow({  mode: 'closed' }).appendChild(templateContent.cloneNode(true));\r\ndocument.querySelector('#toc').appendChild(article);\r\n<\/pre>\n
The code snippet above creates a copy of <article><\/code><\/strong> and attaches a Shadow DOM Tree to it<\/strong>. We also add a copy of <template><\/code>\u2018s content<\/strong> to this Shadow DOM tree.<\/p>\n
Then, the cloned <article><\/code> is inserted into the <div id='toc'><\/code> element. The <article><\/code> element is now present in the TOC as well<\/strong>, however only its headings and subheadings that found a placeholder inside the TOC are visible.<\/p>\n
If we would reset the CSS counter at the body<\/code> or html<\/code> element instead of article<\/code>, the counter would have counted the list of headings inside the TOC as well. That\u2019s why you should reset the counters at the immediate parent of the headings<\/strong>.<\/p>\n
Here is the screenshot of the output:<\/p>\n
\"Auto-generated<\/figure>\n
4. Add hyperlinks<\/h2>\n
If you want to link the TOC titles to their respective headings and subheadings<\/strong> by adding id<\/code> to the headings and anchoring their corresponding TOC text you will have to remove the repetitive id<\/code> values from the cloned article<\/code><\/strong>.<\/p>\n
\r\n<div id='toc'><\/div>\r\n<article>\r\n<p>Velociraptor (meaning \"swift seizer\" in Latin) is a \u2026<\/p>\r\n\r\n<h2 id='h-1' slot='h-1'>Description<\/h2>\r\n<p>Velociraptor was a mid-sized dromaeosaurid, with adults \u2026<\/p>\r\n\r\n<h3 id='sh-1-1' slot='sh-1-1'>Feathers<\/h3>\r\n<p>Fossils of dromaeosaurids more primitive than \u2026<\/p >\r\n<!-- ... -->\r\n<\/article>\r\n<\/pre>\n
As you can see above, the id<\/code> attribute is added to every heading and subheading in the article<\/strong>.<\/p>\n
And, the titles inside the table of contents are anchored<\/strong>:<\/p>\n
\r\n<template>\r\n<ul>\r\n<li>\r\n\t\t<a href='#h-1'><slot name='h-1'><\/slot><\/a>\r\n\t\t<ul>\r\n\t\t\t<a href='#sh-1-1'><li><slot name='sh-1-1'><\/slot><\/li><\/a>\r\n\t\t<\/ul>\r\n<\/li>\r\n<!-- ... -->\r\n<\/ul>\r\n<\/template>\r\n<\/pre>\n
In the extra line above, all id<\/code> attributes are removed from the cloned article<\/strong> before<\/em> attaching the Shadow DOM tree to it.<\/p>\n
\r\ntemplateContent = document.querySelector('template').content;\r\narticle = document.querySelector('article').cloneNode(true);\r\narticle.querySelectorAll('*[id]').forEach((ele)=>{ele.removeAttribute('id')})\r\narticle.attachShadow({  mode: 'closed' }).appendChild(templateContent.cloneNode(true));\r\ndocument.querySelector('#toc').appendChild(article);\r\n<\/pre>\n
See the screenshot of the linked table of contents<\/strong> below:<\/p>\n
\"Linked<\/figure>\n
Github demo<\/h2>\n
You can check out, download, or fork the code used in this post from our Github Repo<\/a>.<\/p>\n
Read Also:<\/strong> How to Create a Text-Search Bookmarklet with JavaScript <\/a><\/p>","protected":false},"excerpt":{"rendered":"
Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A well-designed table of contents gives an overview of the page and helps users quickly navigate to the section they are interested in. Traditionally, you can create table of contents either in HTML or…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Auto-generated Table of Contents with HTML Slots - Hongkiat<\/title>\n<meta name=\"description\" content=\"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Auto-generated Table of Contents with HTML Slots\" \/>\n<meta property=\"og:description\" content=\"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-04T14:01:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T09:01:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Auto-generated Table of Contents with HTML Slots\",\"datePublished\":\"2018-12-04T14:01:20+00:00\",\"dateModified\":\"2022-07-15T09:01:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/\"},\"wordCount\":673,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-generated-table-of-contents-html-slot\\\/toc.jpg\",\"keywords\":[\"HTML\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/\",\"name\":\"How to Auto-generated Table of Contents with HTML Slots - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-generated-table-of-contents-html-slot\\\/toc.jpg\",\"datePublished\":\"2018-12-04T14:01:20+00:00\",\"dateModified\":\"2022-07-15T09:01:25+00:00\",\"description\":\"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-generated-table-of-contents-html-slot\\\/toc.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-generated-table-of-contents-html-slot\\\/toc.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-generated-table-of-contents-html-slot\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Auto-generated Table of Contents with HTML Slots\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Auto-generated Table of Contents with HTML Slots - Hongkiat","description":"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/","og_locale":"en_US","og_type":"article","og_title":"How to Auto-generated Table of Contents with HTML Slots","og_description":"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A","og_url":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-12-04T14:01:20+00:00","article_modified_time":"2022-07-15T09:01:25+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Auto-generated Table of Contents with HTML Slots","datePublished":"2018-12-04T14:01:20+00:00","dateModified":"2022-07-15T09:01:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/"},"wordCount":673,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg","keywords":["HTML","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/","url":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/","name":"How to Auto-generated Table of Contents with HTML Slots - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg","datePublished":"2018-12-04T14:01:20+00:00","dateModified":"2022-07-15T09:01:25+00:00","description":"Table of contents can greatly improve the user experience of many websites, for instance documentation sites or online encyclopedias like Wikipedia. A","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-generated-table-of-contents-html-slot\/toc.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-generated-table-of-contents-html-slot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Auto-generated Table of Contents with HTML Slots"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-aWQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=42088"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42088\/revisions"}],"predecessor-version":[{"id":60458,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42088\/revisions\/60458"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42088"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}