你推荐什么样的标记用于目录？

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

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

Answer 2

100％我会使用有序列表。这正是他们用于语言的原因。使用定义列表是滥用语言，只是因为它们的默认呈现有点像您想要看到的。 （使用CSS使其正确）

您对嵌套有序列表有什么问题？ （你甚至不应该嵌套DL）

Answer 3

定义列表并非严格用于“定义”，因为有些人似乎在说 - 如果他们是这样，他们的用途极少。但是，虽然<dl/>非常灵活并且有很多用途，但有序列表似乎在这里看起来更好。

如果您尝试对嵌套列表进行编号（无论它们是嵌套<ol/>还是<dl/> s），您可以使用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;
}

Answer 4

2020年观点...

使用<nav>表示导航

• <nav>暗示role=navigation
• <div role="navigation">不错，但<nav>是理想的
• <nav>应该有标题，否则[aria-label]才能表明目的

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

• 将<ol>用于有关书籍内容等顺序内容的目录
• 将<ul>用于常见问题之类的TOC，例如FAQ

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>