Question about HTML code: table of contents

[Pjotr]

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 />

[gm10]

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.

[Pjotr]

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.

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....

[gm10]

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.

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.

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.

[Pjotr]

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.

[gm10]

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.

[Pjotr]

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

[gm10]

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).

[Pjotr]

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

Excellent! Klappt tadellos. Thanks again.

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.