Table of Contents in HTML5 - What element to use?

HTML & CSS
1

Each of my posts has a table of contents that contains the links to each page or main section in the article.

What are your opinions on which html5 element would be most appropriate as a container for this content? aside, section, nav, details?

Here’s the typical markup (currently using a generic div for the container):

<[B][COLOR="#FF0000"]div[/COLOR][/B] class="cb-toc">
    <h4>Table of Contents</h4>
    <ul>
        <li><a href="#/">Compensation Disclosure</a></li>
        <li><a href="#/2/">Good Faith Recommendations</a></li>
        <li><a href="#/3/" class="active">Potential Bias and Due Diligence</a></li>
    </ul>
</[B][COLOR="#FF0000"]div[/COLOR][/B]>
2

I’d replace the div tag with a nav tag as the content is navigation. It certainly isn’t an aside or details.

3

Agree its probably not an aside, but details/summary is looking more appropriate the more I read. HTML5 doctor specifically indicates a table of contents as an example usage.

As a bonus, on supported browsers, the user can toggle the TOC open and closed.

<[B][COLOR="#FF0000"]details[/COLOR][/B] class="cb-toc">
    <[B][COLOR="#FF0000"]summary[/COLOR][/B]>Table of Contents</[B][COLOR="#FF0000"]summary[/COLOR][/B]>
    <ol>
        <li><a href="#/">Compensation Disclosure</a></li>
        <li><a href="#/2/">Good Faith Recommendations</a></li>
        <li><a href="#/3/" class="active">Potential Bias and Due Diligence</a></li>
    </ol>
</[B][COLOR="#FF0000"]details[/COLOR][/B]>
4

I agree that does look like a possible choice - of course all of the details that the summary is referring to need to be included inside the details tag as well so that it can be toggled when your visitor selects to view just the summary. You wouldn’t code it the way you have it as “Table of Contents” is not a summary of the list - the list is a summary of the main page content.

<details class="cb-toc">
    <summary><h4>Table of Contents<h4>
    <ol>
        <li><a href="#/">Compensation Disclosure</a></li>
        <li><a href="#/2/">Good Faith Recommendations</a></li>
        <li><a href="#/3/" class="active">Potential Bias and Due Diligence</a></li>
    </ol></summary>

The content that the list is a summary of goes here

</details>