gpt4 book ai didi

html - 为什么 HTML5 header 元素需要 h 标签?

转载 作者:太空狗 更新时间:2023-10-29 13:44:52 24 4
gpt4 key购买 nike

根据 HTML5Doctor.com 和其他 HTML5 介绍性网站, header 元素应包含 h1-h6 标签以及其他导航或介绍性内容。然而,大多数网站上的传统“标题”仅包含 Logo 和一些导航元素。

包括 Facebook 和 Twitter 在内的许多主要网站都在其 Logo 中使用 h1 标签,这对我来说似乎不合逻辑,因为 Logo 不是页面上最重要或信息量最大的元素。

h1 标 checkout 现在 95% 网站的内容部分,而不是标题部分。那么为什么我们被指示在标题中包含一个 h 标签呢?如果必须的话,为什么 Facebook 和 Twitter 不使用 h6 标签呢?

最佳答案

你应该看看 outline algorithm for HTML5 .

您可能希望您的站点标题/ Logo 是 h1

想象一个小网页,由页眉( Logo 、站点名称等)、站点导航和博客条目(此页面的主要内容)组成:

<body>
<!-- not using sectioning elements, for the sake of the example -->

<header>ACME Inc.</header>

<div class="navigation">
<ul>…</ul>
</div>

<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>

</body>

这里唯一的标题是 div 中的 h1。从语义上讲,这意味着该页面的所有 内容都在该标题的范围内。请参阅此页面的大纲:

  1. Lorem Ipsum

但这不是真的(以语义方式):在层次上,页面标题“ACME Inc.”。不是博客条目的“一部分”。导航也是如此;这是站点导航,而不是“Lorem Ipsum”的导航。

所以站点标题和站点导航需要一个标题。让我们也尝试给他们一个 h1:

<body>
<!-- not using sectioning elements, for the sake of the example -->

<header>
<h1>ACME Inc.</h1>
</header>

<div class="navigation">
<h1>Site navigation</h1>
<ul>…</ul>
</div>

<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>

</body>

好多了!页面大纲现在如下所示:

  1. ACME 公司
  2. 网站导航
  3. Lorem Ipsum

但它仍然不完美:它们都处于同一水平,但“ACME Inc.”。是什么让所有的网页形成一个网站,这就是为什么有网页的全部意义所在。导航和博客条目是“ACME Inc.”的一部分,代表公司和网站本身。

因此我们应该将导航和博客条目标题从 h1 更改为 h2:

<body>
<!-- not using sectioning elements, for the sake of the example -->

<header>
<h1>ACME Inc.</h1>
</header>

<div class="navigation">
<h2>Site navigation</h2>
<ul>…</ul>
</div>

<div class="content">
<h2>Lorem Ipsum</h2
<p>…</p>
</div>

</body>

现在我们有了这个大纲:

  1. ACME 公司
    1. 网站导航
    2. Lorem Ipsum

这正是示例网页内容的意思。(顺便说一句,这也适用于 HTML 4.01。)

如链接中所述,HTML5 为我们提供了分段元素,这些元素对大纲起着重要作用(而不是 div,它不影响大纲)我们应该使用它们:

<body>

<header>
<h1>ACME Inc.</h1>
</header>

<nav>
<h2>Site navigation</h2>
<ul>…</ul>
</nav>

<article>
<h2>Lorem Ipsum</h2
<p>…</p>
</article>

</body>

大纲保持不变。我们甚至可以将 h2(在 navarticle 内)改回 h1,大纲将也保持不变。

如果您不想要导航的“显式”标题,您可以随意将其删除:大纲保持不变(现在 nav 有一个隐式/“未命名”标题).无论您是否添加,每个部分都有一个标题。

您甚至可以将 header 中的 h1 更改为 h6,它不会更改大纲。您可以将此标题视为“body 的标题”。

附加说明

  • 这些示例中不需要 header 元素。我添加它只是因为您在问题中提到了它。
  • 如果您想使用 Logo 而不是文本名称(“ACME Inc.”),您仍应使用 h1 并将 img 添加为子项. alt 属性的值应该给出名称。
  • 顶级标题不必是“页面上最重要或信息量最大的元素”。这不是标题的用途。他们给出结构/大纲并“标记”其范围内的内容。在此示例中,您可以假设 article(标题在里面)是最重要的内容。
  • 如果您每次需要时都使用分段元素,您就不再需要h2h6(但您可以自由使用他们,为了清楚或向后兼容)。
  • 您可以使用 HTML Outliner 测试一些标记结构:http://gsnedders.html5.org/outliner/ (它有一些未修复的错误) HTML5 Outliner .

关于html - 为什么 HTML5 header 元素需要 h 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7796367/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com