与下拉菜单没有真正直接的关系，但鉴于您对高效地使用标题感兴趣，您可能会对下面这个较早的文字墙感兴趣。
但至于（下拉）导航，我通常不会使用任何，除非在非常简约的网页上，比如 google.com（在你搜索之前）；几乎没有任何真实内容的页面；此时导航变成了内容。
不同的关卡？
每页应该只有一个<h1>。如果您的网页是一本书，那么<h1> 就是封面上提到的标题。
我们有这些不同级别（<h2> 是 2 级，<h5> 是 5 级等）的原因是为“客户”提供一种生成我们网页轮廓的方法。
现在与更典型的情况不同，这里的“客户”并不是真正指的是您可能习惯的普通正派罪犯。
网页浏览器（渲染器是迂腐的）、javascript、CSS 等，这些通常认为拥有多个级别的<h?> 标签几乎没有价值。
其他类型的客户端和一些更奇特的网络浏览器功能（尤其是扩展）最能使用它。
文档大纲
这是一个很好的例子来说明基本的大纲概念 (taken from here)
Fruit I like (<h1>)
Bananas (<h2>)
Apples (<h2>)
Pink Ladies (<h3>)
Braeburn (<h3>)
Gala (<h3>)
Oranges (<h2>)
这个小例子几乎展示了所有重要的细节。
- 您可以将大纲视为树结构（与 DOM 非常相似）
- 只有一个
<h1> 元素，它成为我们大纲的根。
- 每个
<h?> 元素都包含0 个或多个，它们都恰好是“向上”一级（因此<h2> 仅包含<h3>s 而没有1/4/5/6s）
- 没有间隙（如果您的文档没有任何
<h3> 元素，那么它也不应该有任何<h4>、<h5>、<h6>。
- 任何级别都没有内在意义 > 1，您可以为您从事的每个项目制作不同的级别（尽管在整个网站上坚持使用相同的方法当然是明智的）
使用它（网站管理员观点）
如果您或我正在开发这样的页面Wikipedia page on javascript，
那么将<h1>Javascript</h1> 作为标题/根是有意义的。
之后，对每个“章节”使用<h2> 是有意义的，因为这是该页面的大部分内容，所以从<h2>History</h2>、<h2>Trademark</h2>、...开始。
现在我们分别查看每一个，让我们从 <h2>History</h2> 开始：
这是一个强大的章节，让我们将它分解为“子章节”（或任何你想称之为的），这样你就会得到
- <h3>Creation at Netscape</h3>
- <h3>Adoption by Microsoft</h3>
- <h3>The rise of JScript</h3>
在这种情况下，此维基百科页面上的这些子章节的大小足够小，因此用<h4>s 进一步划分它们是没有意义的。
它的一般工作原理（开发者观点）
大多数客户会通过从上到下浏览 html 源代码来粗略地构建大纲。
为了说明这一点，在我刚刚给出的示例中，我们看到了 <h1>，然后是一个 <h2>History</h2>，然后是 3x <h3> 条目，然后是 <h2>Trademark</h2>。
它有点像这样解释它的结构：
<h1>
<h2>
<h3></h3>
<h3></h3>
<h3></h3>
</h2>
<h2></h2>
</h1>
这是标准的 html/sgml/xml 类型的文档结构方式；主要区别在于，对于大多数 html（如 <div>s），我们显式定义了该结构，
但是对于<h?>，它仅根据源代码中元素的顺序隐式解释。
所以，对于 TL/DR：在阅读 html 源代码时，从上到下，
如果之后看到<h1> -> <h2> -> <h3> -> <h4> 元素（按此顺序）：
- 它遇到更高级别的项目 (
<h5>)，它会认为 <h4> 的 子项，
- 如果遇到同等级别的项目 (
<h4>)，那么它将成为同级项目，
- 如果它是较低级别（如
<h2>），那么它将关闭（ala </div>）<h4>&<h3>-levels
用例
那么，这些客户如何处理文档大纲？这变化很大。
一组经常可能使用它的软件是无障碍软件。
为盲人提供一个可以读出通常会在屏幕上显示的文本（语音）的网络浏览器非常棒；但是，如果他们想知道一些与 javascript 相关的内容，并且他们的语音工具必须读出整个 wikipedia 页面，他们会在那里待一段时间。
因此，他们的读者可能会读出大纲，就像您致电大公司或某个帮助台时获得的电话菜单一样。
感谢您致电 JAVASCRIPT
按 #1 查看历史；按 #2 获取商标； 等等。
盲人按 #1 查询历史，现在得到，
按 #1 返回；按#2 在 NETSCAPE 进行创作；按 #3 表示微软采用，...
你明白了。无论他们以这种方式选择哪个<h?> 元素，它都会引用从该<h?>foo</h?> 开始的网站部分，并继续直到它达到相同或更低级别<h?> 或页面末尾（因为，请记住更高的数字是孩子，所以他们是所要求的主题的一部分）。
无论如何，这样盲人只需要听文本的相关部分。
题外话：
显然，这样的工具也可以进行搜索，然后让它读取搜索结果周围的文本行，但只有知道某物叫什么时，搜索才是好的。
就像平装书通常有一个目录（类似于我们的大纲）作为最早的页面之一（可能列出十几个章节和它们开始的页码），还有一个索引在最后书的，可能会列出 300 个被描述的主题，以及它们的确切页码。
另一种形式的无障碍软件可能是为行动不便的人准备的，也许他们可以正常阅读但晃动太多而无法使用鼠标导航；浏览器可以使用大纲为任何网站即时生成菜单。这可以呈现为一些超大字体的超链接列表，单击这些超链接会将浏览器滚动到右侧区域（就像<a name=...>anchors</a>）。
在那个例子中要注意的事情；是 Web 开发人员不必花时间为具有这种特定条件的用户优化她的网站。 Web 开发人员只选择了花几分钟时间考虑在她的页面上使用标题的最合乎逻辑的方式，结束。
用户从第三方购买了一些专门的软件，这些软件正在做所有艰苦的工作——改善对您网站的访问；如果没有开发人员 5 分钟的投资，第三方工具很可能会在为该用户自动创建导航方面做得更差。当然，如果您的网站是 Amazon.com，那么第三方开发人员可能会花一些时间为您的网站定制他们的软件，但这不会发生在较小的网站上。提供比竞争对手更好的体验的另一种廉价方式。
不仅仅是可访问性
它的用途不仅仅是辅助软件。
机器人/蜘蛛/网络爬虫软件可以使用大纲来更好地了解他们正在处理的内容。
想象一个更原始的 Googlebot（访问随机网站以收集数据以进行 Google 搜索）。
如果您只是索引和计算页面上的所有单词，并将它们用作该页面可能相关的事物的关键字，那么谷歌搜索最终会让纽约动物园的网站与您 5 岁的侄女竞争' 博客;毕竟她提到猫的次数多于有狮子的人。
如果大纲或多或少代表章节和子章节的概念，那么您的机器人可以推断出<h1>...</h1> 之间提到的几个词比<p> 中提到的大部分内容更相关元素，无论 cat 这个词被使用了多少次。
一种观察是“垃圾内容”通常很少关注结构（如果有的话）而不是好的内容（如维基百科文章）；
打印？！
Webbrowsers 提供了将页面打印到纸上的功能（我知道，yuk！），在没有好的打印样式表的情况下，大纲可以帮助 Webbrowser 更好地决定在哪里拆分页面，而不是适合一张纸。
（如果 Wikipedia 页面将占用 A4 纸的 160%，并且在渲染到一半时它只剩下大约 10 行文本的空间，下一行是 <h2>chapter<h2>，然后是 20 行 <p>；那么将第 1 页底部的 20% 留空并以该标题开始第 2 页可能对用户更友好，因为这样做会看起来更优化（不要浪费空间）。
结论
还有很多其他用途；我知道我以后会因为没有提及十几个更突出/有趣的应用程序而自责。
根据我的经验，几乎所有的用例一开始对于许多 webdevs 来说都像是一个奇特的利基市场（对于那些为 webdevs 付费的人来说更是如此），毕竟你关心多少人的 webcrawler，有多少“one-武装合法失明的部分失聪退伍军人”真正访问您的网站等；个别例子通常暗示了非常小的目标人口统计数据，但它们都由同一个小东西（“正确使用<h?>标签的一个很好的轮廓”）提供服务，这使其成为网站许多被低估（经常被忽视）的方面之一。