How to Create Table of Content on AMP Blog

How to Create Table of Content Like Wikipedia in AMP Blog

Today let's create a list with a sublist like Table Of Content on Wikipedia. This TOC resembles the Table of Contents that we often see in books, Of course, this can also be used on AMP or Non-AMP blog.

Actually, it can also create lists with sub-lists using ul or ol tags, but we have to use additional CSS to remove the list-style that usually appears automatically in the form of numbers or dots.

There is a way to create lists with sub-lists that do not have list-style so we do not need to add CSS to remove list-style, and this seems to be rarely used by bloggers.

We can use the HTML Description List to create a list that has a sublist or list description as used in Wikipedia or Table of Contents on the book or as in the picture above.

HTML Description List to create a list that has a sub list or description of this list using the following code:

<dl>

    <dd>List 1</dd>

    <dt>Sub List 1</dt>

    <dd>List 2</dd>

    <dt>Sub List 2</dt>

</dl>

For example, writing for Table Of Content as follows:

<dl>

  <dt>1. Coffee</dt>

  <dd>1.1. black hot drink</dd>

  <dd>1.2. black hot drink</dd>

  <dd>1.3. black hot drink</dd>

  <dd>1.4. black hot drink</dd>

  <dt>2. Milk</dt>

  <dd>2.1. white cold drink</dd>

  <dd>2.2. white cold drink</dd>

  <dd>2.3. white cold drink</dd>

  <dd>2.4. white cold drink</dd>

  <dd>2.5. white cold drink</dd>

  <dt>3. Coffee and Milk</dt>

  <dd>3.1. brown hot drink</dd>

  <dd>3.2. brown hot drink</dd>

</dl>

And the result will be like this:

1. Coffee

1.1. black hot drink

1.2. black hot drink

1.3. black hot drink

1.4. black hot drink

2. Milk

2.1. white cold drink

2.2. white cold drink

2.3. white cold drink

2.4. white cold drink

2.5. white cold drink

3. Coffee and Milk

3.1. brown hot drink

3.2. brown hot drink

To adjust the tab spacing of the sub list if you think it is too deep, please add the following CSS:

dd{-webkit-margin-start:15px;}

Please set the value, by default the browser will give a distance of 40px for tab sub list.

Of course this we can use on Table Of Content Blogger, I have edited it and looks like on JSFiddle widget below, please see its HTML mode to see its application on this Blogger TOC.

For headers List on TOC can use H3 tag (Subheading), and for Sub List header can use tag H4 (Minor heading).

How easy is not it? Maybe useful.