SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table of Contents in HTML5 - What element to use?

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

    Code:
    <div 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>
    </div>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I'd replace the div tag with a nav tag as the content is navigation. It certainly isn't an aside or details.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    It certainly isn't an aside or details.
    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.

    Code:
    <details class="cb-toc">
        <summary>Table of Contents</summary>
        <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>
    </details>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    details/summary is looking more appropriate
    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.

    Code:
    <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>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •