您建议为目录使用哪种标记？

Question

我需要为 HTML 书籍创建一个大型目录，但我无法确定其标记的最佳解决方案是什么。我有两个选择：定义列表或有序列表。

您会认为这是个人风格决定吗？那么语义呢？

我喜欢对我的列表进行编号，但是我在将 "ol" 与 nestes 列表一起使用时遇到了问题。我想我会通过手动编号（并在我的列表中禁用样式）来对我的定义列表做同样的事情。

我想到了这两个：

选项A：

<div class="TOC">
    <dl>
        <dt><a href="#">Preface</a></dt>
        <dt>I. <a href="#">Chapter 1</a></dt>
        <dd>
            <dl>
                <dt>1 <a href="#">Section 1</a></dt>
                <dd>
                    <dl>
                        <dt>1.1 <a href="#">Subsection A</a></dt>
                        <dt>1.2 <a href="#">Subsection B</a></dt>
                        <dt>1.3 <a href="#">Subsection C</a></dt>
                    </dl>
                    <dt>2 <a href="#">Section 2</a></dt>
                </dd>
            </dl>
        </dd>
    </dl>
</div>

选项 B：

<div class="TOC">
    <ol>
        <li><a href="#">Preface</a></li>
        <li><a href="#">Chapter 1</a>
            <ol>
                <li><a href="#">Section 1</a>
                    <ol>
                        <li><a href="#">Subsection A</a></li>
                        <li><a href="#">Subsection B</a></li>
                        <li><a href="#">Subsection C</a></li>
                    </ol>
                </li>
                <li><a href="#">Section 2</a></li>
            </ol>
        </li>
    </ol>
</div>

Answer 1

2020年意见...

用于<nav>指示导航

• <nav>暗示role=navigation
• <div role="navigation">还不错，但是<nav>很理想
• <nav>应该有标题或者[aria-label]说明目的

使用<ol>或<ul>对链接进行分组

• 用于<ol>有关连续内容（例如书籍章节）的目录
• 用于<ul>关于非顺序内容（例如常见问题解答）的目录

TOC 语义标记示例

<nav>
  <h2>Chapters</h2>
  <ol>
    <li><a href="#chapter-1">Chapter 1</a>
    <li><a href="#chapter-2">Chapter 2</a>
    <li><a href="#chapter-3">Chapter 3</a>
  </ol>
</nav>

<nav aria-label="Chapters">
  <ol>
    <li><a href="#chapter-1">Chapter 1</a>
    <li><a href="#chapter-2">Chapter 2</a>
    <li><a href="#chapter-3">Chapter 3</a>
  </ol>
</nav>

<nav>
  <h2>Questions</h2>
  <ul>
    <li><a href="#money">How do artists get paid?</a>
    <li><a href="#feedback">How do artists get feedback?</a>
    <li><a href="#fans">How do artists get fans?</a>
  </ul>
</nav>

<nav aria-label="Questions">
  <ul>
    <li><a href="#money">How do artists get paid?</a>
    <li><a href="#feedback">How do artists get feedback?</a>
    <li><a href="#fans">How do artists get fans?</a>
  </ul>
</nav>

Answer 2

有序列表是正确的标记。使用定义列表意味着主要部分标题是由其子部分的标题定义的术语，这是不完全正确的。

Answer 3

定义列表并不严格用于“定义”，正如某些人似乎所说的那样 - 如果是的话，它们的用途会非常少。然而，虽然<dl/>s 非常灵活并且有很多用途，但有序列表在这里似乎是更好的选择。

如果您尝试对嵌套列表进行编号（无论它们是嵌套的<ol/>还是<dl/>嵌套的），您可以使用 CSS counter-increment 和 counter-reset 属性根据嵌套深度自动添加数字，而不是为每个列表手动维护编号修订。

例子：

.TOC ol{
  list-style-type:none;
  counter-reset:toc1;
}

.TOC ol li::before{
  content:counter(toc1)' ';
  counter-increment:toc1;
}

.TOC ol li ol{
  counter-reset:toc2;
}

.TOC ol li ol li::before{
  content:counter(toc1)' .'counter(toc2)' ';
  counter-increment:toc2;
}

.TOC ol li ol li ol{
  counter-reset:toc3;
}

.TOC ol li ol li ol li::before{
  content:counter(toc1)' .'counter(toc2)' .'counter(toc3)' ';
  counter-increment:toc3;
}