Should i use <h1> or <ul> in table of contents (ToC)?-CodePudding

I'm making a table of contents in html. Should I use headings tags <h1>-<h6> or nested <ul> and <li> tags ?

First would look like:

<h2>Home</h2>
<h2>Posts</h2>
<h3><a href="page1.html">Page 1</a></h3>
<h3><a href="page2.html">Page 2</a></h3>
<h3><a href="page3.html">Page 3</a></h3>

Second would look like:

<ul>
  <li>Home</li>
  <li>
    Posts
    <ul>
      <li><a href="page1.html">Page 1</a></li>
      <li><a href="page2.html">Page 2</a></li>
      <li><a href="page3.html">Page 3</a></li>
    </ul>
  </li>
</ul>

I had a look on the common websites: Wikipedia and so on seem to use the second choice, but I couldn't find any definitive answer on whether the first is bad or not.

Thanks a lot,

CodePudding user response：

Consider traditional dead tree press (books, academic journal papers, etc):
- A Table-of-Contents does not contain headings.
  - It contains references to headings.
- Chapters and sections have their own headings.
- HTML's semantic elements are intended to be used in the same way.
So your TOC should be a <ol> (not <ul>, as headings are numbered and ordered).
- Also consider enclosing the list/tree structure within a <nav>.
So use the <h1>, <h2>, etc elements for the actual headings, not references to headings (where you should use <a>: the clue is in the name: anchor element).

I had a look on the common websites: Wikipedia and so on seem to use the second choice, but I couldn't find any definitive answer on whether the first is bad or not.

The W3C has an extensive library of authoritative (even legally enforceable (e.g. under the ADA in the US) articles and guidelines on the WCAG and WAI websites:

Also consider the <h1> element:
- While the HTML spec does allow multiple <h1> elements in a page, the intent is that each web-page should only ever have a single <h1> element that contains the title of the document.
- To quote MDN:
  
  Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.
- Therefore, if a page already has a <h1> then going-by your initial thought-process you would have to duplicate the <h1> in the TOC - which gives you two <h1> elements, but HTML intends for you to have only one <h1> element. See the problem?

Also, you won't find many resources for using HTML effectively if you search for "table of contents", it seems the W3C/web-author community prefers the term "navigation menu", even for document structures that would (in dead-tree-press) be referred to as a table-of-contents.

_{(I speculate it might be to avoid confusing a HTML <table> for a table-of-contents, which honestly really isn't any kind of tabular structure anyway)}

CodePudding user response：

w3docs.com claim about h1...h6 tags

Headline tags have SEO value as well. A search engine tries to find out two things about your page: what the page is about, and how good it is. One of the main things that search engines look at for determining a page content is the words inside heading tags.

Therefore I would advise against use od <h2> and <h3> tags you have demonstrated, as I found unlikely users to put say Page 1 in use search engine.