Question about HTML code: table of contents

Chat about just about anything else
Post Reply
User avatar
Pjotr
Level 20
Level 20
Posts: 10960
Joined: Mon Mar 07, 2011 10:18 am
Location: The Netherlands (Holland)
Contact:

Question about HTML code: table of contents

Post by Pjotr » Thu Oct 11, 2018 4:48 am

I'm struggling a bit with setting up a table of contents for a page on a Blogger.com (Google-owned) website of mine. It's a long page, with several items, and I want to create a clickable ToC for those items.

Below is the most simple code that appears to work. But is it faultless? Can it perhaps be improved upon, without making it too complicated?

Code: Select all

<div class="td-post-content">
<div class="toc_white" id="toc_container">
<div class="toc_title">
Contents of this page:</div>
<ul class="toc_list">
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID1"><span class="toc_number">1</span> First item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2"><span class="toc_number">2</span> Second item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2"><span class="toc_number">2.1</span> Sub-item for the second item</a></li>
</ul>
</div>
<br />
<h2>
<span id="ID1">First item</span></h2>
1. This is absolutely the first item of them all.<br />
<br />
<h2>
<span id="ID2">Second item</span></h2>
2. And this is the second item.<br />
<br />
<h2>
<span id="ID2.1">Sub-item for the second item</span></h2>
2.1. This sub-item is the very last one.<br />
Tip: 10 things to do after installing Linux Mint 19 Tara
Keep your Linux Mint healthy: Avoid these 10 fatal mistakes
Twitter: twitter.com/easylinuxtips
All in all, horse sense simply makes sense.

gm10
Level 12
Level 12
Posts: 4089
Joined: Thu Jun 21, 2018 5:11 pm

Re: Question about HTML code: table of contents

Post by gm10 » Thu Oct 11, 2018 5:13 am

Pjotr wrote:
Thu Oct 11, 2018 4:48 am
Below is the most simple code that appears to work. But is it faultless? Can it perhaps be improved upon, without making it too complicated?
You know how it goes, these kinds of questions are hard to answer without knowing what you want to improve.

Things that can be simplified at face value are to drop all those unnecessary <span> tags (add the ids to the h2 tags) and you can use relative URIs so <a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID1"> becomes <a href="#ID1">.

Also your <br /> tags irk me, markup is not like a typewriter, you should handle paragraph spacing in css, not by adding line breaks.
Last edited by gm10 on Thu Oct 11, 2018 6:51 am, edited 1 time in total.

User avatar
Pjotr
Level 20
Level 20
Posts: 10960
Joined: Mon Mar 07, 2011 10:18 am
Location: The Netherlands (Holland)
Contact:

Re: Question about HTML code: table of contents

Post by Pjotr » Thu Oct 11, 2018 6:21 am

Thanks for responding! However, I'm an absolute, 100 % autodidact in these matters. So unfortunately I don't fully understand how exactly to implement all of your remarks. :P

May I trouble you to clean up the code I've posted in my first message, and post it in your reply?

My purpose is to get a simple faultless code that I can easily apply in that Blogger site of mine, in which I plan to create a lot of pages on which a ToC will be useful (long pages, with many items on them).

The code should be "halbwegs anständig", and I'm not capable of bringing that about myself....
Tip: 10 things to do after installing Linux Mint 19 Tara
Keep your Linux Mint healthy: Avoid these 10 fatal mistakes
Twitter: twitter.com/easylinuxtips
All in all, horse sense simply makes sense.

gm10
Level 12
Level 12
Posts: 4089
Joined: Thu Jun 21, 2018 5:11 pm

Re: Question about HTML code: table of contents

Post by gm10 » Thu Oct 11, 2018 6:47 am

I'm 100% self-taught in all things computer myself, but we all taught ourselves different things and to different extents, so that's a non-statement as far as assessing your background goes. :mrgreen:

Also it's not that your code is faulty (your 3rd ToC entry has the wrong ID but that's all I noticed), I only said how you could simplify it since you asked. I'll give you an example:

Code: Select all

<div class="toc_white" id="toc_container">
<div class="toc_title">
Contents of this page:</div>
<ul class="toc_list">
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID1"><span class="toc_number">1</span> First item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2"><span class="toc_number">2</span> Second item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2"><span class="toc_number">2.1</span> Sub-item for the second item</a></li>
</ul>
</div>
<br />
<h2>
<span id="ID1">First item</span></h2>
1. This is absolutely the first item of them all.<br />
<br />
could be simplified to this:

Code: Select all

<div class="toc_white" id="toc_container">
<div class="toc_title">Contents of this page:</div>
<ul class="toc_list">
<li><a href="#ID1">1 First item</a></li>
<li><a href="#ID2">2 Second item</a></li>
<li><a href="#ID2.1">2.1 Sub-item for the second item</a></li>
</ul>
</div>
<h2 id="ID1">First item</h2>
1. This is absolutely the first item of them all.
The style is to be adjusted in the CSS that you didn't include.
Pjotr wrote:
Thu Oct 11, 2018 6:21 am
My purpose is to get a simple faultless code that I can easily apply in that Blogger site of mine, in which I plan to create a lot of pages on which a ToC will be useful (long pages, with many items on them).
Not necessarily simpler as far as the code goes, but maybe simpler in maintenance: You could use javascript to generate the ToC on the fly so you don't have to do it by hand. Works best with ToCs that are folded by default because you can only generate it after the full page has loaded.

User avatar
Pjotr
Level 20
Level 20
Posts: 10960
Joined: Mon Mar 07, 2011 10:18 am
Location: The Netherlands (Holland)
Contact:

Re: Question about HTML code: table of contents

Post by Pjotr » Thu Oct 11, 2018 7:11 am

Thanks! That helps to simplify it. :)

Only Blogger.com doesn't seem to accept relative ID's, so this is what works on Blogger.com:

Code: Select all

<div class="toc_white" id="toc_container">
<div class="toc_title">Contents of this page:</div>
<ul class="toc_list">
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID1">1 First item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2">2 Second item</a></li>
<li><a href="https://www.pjotrs-non-existent-website.net/p/tutorial-one.html#ID2.1">2.1 Sub-item for the second item</a></li>
</ul>
</div>
<h2 id="ID1">First item</h2>
1. This is absolutely the first item of them all.
Simpler. Better. Danke schön. 8)
Tip: 10 things to do after installing Linux Mint 19 Tara
Keep your Linux Mint healthy: Avoid these 10 fatal mistakes
Twitter: twitter.com/easylinuxtips
All in all, horse sense simply makes sense.

gm10
Level 12
Level 12
Posts: 4089
Joined: Thu Jun 21, 2018 5:11 pm

Re: Question about HTML code: table of contents

Post by gm10 » Thu Oct 11, 2018 8:02 am

Pjotr wrote:
Thu Oct 11, 2018 7:11 am
Only Blogger.com doesn't seem to accept relative ID's, so this is what works on Blogger.com:
Apparently this is a decades old bug with them: https://productforums.google.com/forum/ ... yvIzHuOBdI - there's a workaround in there but I don't think this really matters to you so just leave it.

User avatar
Pjotr
Level 20
Level 20
Posts: 10960
Joined: Mon Mar 07, 2011 10:18 am
Location: The Netherlands (Holland)
Contact:

Re: Question about HTML code: table of contents

Post by Pjotr » Thu Oct 11, 2018 8:13 am

By the way: is there perhaps a coding trick to show <h3> item headers indented in the ToC, relative to <h2> item headers?

Like the items 8.1 and 9.1 in the ToC on this Google Site web page of mine:
https://sites.google.com/site/easylinuxtipsproject/2
Tip: 10 things to do after installing Linux Mint 19 Tara
Keep your Linux Mint healthy: Avoid these 10 fatal mistakes
Twitter: twitter.com/easylinuxtips
All in all, horse sense simply makes sense.

gm10
Level 12
Level 12
Posts: 4089
Joined: Thu Jun 21, 2018 5:11 pm

Re: Question about HTML code: table of contents

Post by gm10 » Thu Oct 11, 2018 8:51 am

Sure, the standard way is a nested list which most/all browsers display with a left margin:

Code: Select all

<ul class="toc_list">
<li><a href="#ID1">1 First item</a></li>
<li><a href="#ID2">2 Second item</a></li>
<li><ul><li><a href="#ID2.1">2.1 Sub-item for the second item</a></li></ul></li>
</ul>
Alternatively you can specify a class with a left margin. Or even just add some non-breaking spaces in front, haha (don't do that).

User avatar
Pjotr
Level 20
Level 20
Posts: 10960
Joined: Mon Mar 07, 2011 10:18 am
Location: The Netherlands (Holland)
Contact:

Re: Question about HTML code: table of contents

Post by Pjotr » Thu Oct 11, 2018 10:23 am

gm10 wrote:
Thu Oct 11, 2018 8:51 am
Sure, the standard way is a nested list which most/all browsers display with a left margin:
Excellent! Klappt tadellos. Thanks again. :mrgreen:

For the sake of posterity I've posted on GitHub the full code that creates a fine simple ToC with page contents on a Blogger.com website, with indenting for sub-items and sub-sub-items:
https://github.com/Pjotr123/toc-blogger

With a short how-to.
Tip: 10 things to do after installing Linux Mint 19 Tara
Keep your Linux Mint healthy: Avoid these 10 fatal mistakes
Twitter: twitter.com/easylinuxtips
All in all, horse sense simply makes sense.

Post Reply

Return to “Open chat”