当前位置：文江博客话题详情

为什么 HTML5 header 元素需要 ah 标签？

发布于 2024-12-10 06:03:43 字数 292 浏览 0 评论 0原文

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

许多主要网站（包括 Facebook 和 Twitter）都使用 h1 标签作为其徽标，这对我来说似乎不合逻辑，因为徽标并不是页面上最重要或信息最丰富的元素。

h1 标签出现在 95% 网站的内容部分，而不是标题部分。那么为什么我们被要求在标头中包含 ah 标签呢？如果必须的话，为什么 Facebook 和 Twitter 不使用 h6 标签呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简美 2024-12-17 06:03:43

您应该查看概述算法HTML5。

您可能希望您的网站标题/徽标为 h1。

想象一个小网页，由页面标题（徽标、网站名称等）、网站导航和博客条目（此页面的主要内容）组成：

<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>

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

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>

好多了！页面大纲现在看起来像：

ACME Inc.
站点导航
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>

现在我们有了这样的大纲：

ACME Inc.
1. 网站导航
2. 洛雷姆·伊普苏姆

这正是示例网页的内容的含义。
（顺便说一句，这也适用于 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 （在 nav 和 article 内部）更改回 h1，大纲将也保持不变。

如果您不想要导航的“显式”标题，您可以随意删除它：轮廓保持不变（现在导航带有隐式/“未命名”标题）。每个部分都有一个标题，无论您是否添加它。

您甚至可以将 header 内的 h1 更改为 h6 并且不会改变轮廓。您可以将此标题视为“正文 的标题”。

其他注释

这些示例中不需要 header 元素。我添加它只是因为您在问题中提到了它。
如果您想使用徽标而不是文本名称（“ACME Inc.”），您仍应使用 h1 并将 img 添加为子项。 alt 属性的值应该给出当时的名称。
顶级标题不一定是“页面上最重要或信息最丰富的元素”。这不是标题的用途。他们给出结构/大纲并“标记”其范围内容。在此示例中，您可以假设 article（其标题位于内部）是最重要的内容。
如果每次需要时都使用分段元素，则不再需要 h2...h6 （但您可以自由使用它们，因为清晰度或向后兼容性）。
您可以使用 ~~HTML Outliner 来尝试和测试一些标记结构：http://gsnedders.html5。 org/outliner/~~（它有一些未修复的错误）HTML5大纲。

You should take a look at the outline algorithm for HTML5.

You probably want your site title/logo to be a h1.

Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):

<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>

Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:

Lorem Ipsum

But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".

So the site header and the site navigation need a heading. Let's try to give them a h1, too:

<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>

Way better! The page outline now looks like:

ACME Inc.
Site navigation
Lorem Ipsum

But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.

So we should go and change the navigation and blog entry headings from h1 to 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>

Now we have this outline:

ACME Inc.
1. Site navigation
2. Lorem Ipsum

And this is exactly what the content of the example webpage means.
(By the way, this would work in HTML 4.01, too.)

As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:

<body>

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

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

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

</body>

The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.

If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.

You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".

Additional notes

The header element is not needed in these examples. I only added it because you mentioned it in your question.
If you want to use a logo instead of a textual name ("ACME Inc."), you should still use a h1 and add the img as a child. The value of the alt attribute should give the name then.
The top level heading doesn't have to be "the most important or most informative element on the page". This is not what headings are used for. They give the structure/outline and "label" their scoped content. In this example, you could assume that the article (with its heading inside) is the most important content.
If you use the sectioning elements everytime whend needed, you don't need h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
You can play around and test some markup constructs with ~~the HTML Outliner: http://gsnedders.html5.org/outliner/~~ (it had some unfixed bugs) the HTML5 Outliner.

回复收藏 0 原文

素衣风尘叹 2024-12-17 06:03:43

不要对“应该”包含和“必须”包含感到困惑。您不需要在标头中包含任何您不想要的内容，但标头的“语义”目的是您应该在文档的头部查找并放置此类内容。就像您在打印页面顶部查找标题、简介或目录一样。

回复收藏 0 原文

一杆小烟枪 2024-12-17 06:03:43

对于 SEO 和基本 HTML 编程来说，这是一个灵活但重要的概念。虽然这个标准还有一些调整的余地，但它不会造就或破坏您的网站。

例如，您提到 Facebook 在其标题中使用徽标而不是 H1。这对一半是正确的，因为它们的标题位于一对 h1 标签内，使其功能本质上与任何其他 H1 文本可能相同：

<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></a></h1>

再说一次，这并不完全理想，但他们是 Facebook，可以做他们想做的事。另一方面，您在构建网站时可能希望更加注意这些最佳实践。

This is a flexible but important concept for SEO and basic HTML programming. While there is some room for wiggling through this standard, it will not make or break your site.

For example, you mention Facebook has the logo instead of an H1 in their header. This is half true as they have their header within a pair of h1 tags, making it function essentially the same as any other H1 text might:

<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></a></h1>

Again, not exactly ideal, but they are Facebook and can do what they want. You on the other hand might want to be more mindful of these best practices when building out a site.

回复收藏 0 原文

~没有更多了~