Search code examples
htmlsemantic-markup

What HTML elements are recommended semantically for keywords index (in books)?

What HTML elements are the most appropriate semantically for building markup of an index (as in publishing)? Keyword index usually can be found in technical literature, and while it is clear that page numbers are a bit off here, but let's imagine those are abbreviated chapter numbers wrapped with hyperlinks.

Here is the screenshot of "Index" Appendix with keywords used in a book and their page numbers

While the screenshot is a bit specific, nevertheless I assume my question is generic enough in its essence.

Solution

  • A <dl> (description list) would be the best fit for marking up an index.

    <dl>
  <dt>absolute URLs</dt>
  <dd>79</dd>

  <dt>accessibility</dt>
  <dd>7
    <dl>
      <dt>alt text</dt>
      <dd>99, 272, 480</dd>
      <dt>contrast</dt>
      <dd>253, 420</dd>
    </dl>
  </dd>
  
  <dt>acronyms</dt>
  <dd>53</dd>
</dl>

    According to the spec:

    The dl element represents an association list consisting of zero or more name-value groups (a description list). [...] Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

    You can think of each keyword in the index as a "term/name," and each page number as a "definition/value."