为什么HTML5头元素需要h标签？ [英] Why does the HTML5 header element require a h tag?
问题描述
根据HTML5Doctor.com和其他HTML5入门网站，标题元素应包含h1-h6标签以及其他导航或介绍性内容。然而，大多数网站上的传统标题仅包含徽标和一些导航元素。
许多主要网站，包括Facebook和Twitter，都使用h1标签标志，这对我来说似乎不合逻辑，因为标志不是页面上最重要或最有信息的元素。
h1标签出现在95％的网站，而不是标题部分。那么为什么我们要求在标题中包含一个h标签？如果我们必须的话，为什么Facebook和Twitter不使用h6标签呢？ 你应该看看< HTML5的大纲算法。
您可能希望您的网站标题/徽标为 h1 。
想象一个小页面，包含页眉（徽标，网站名称，...），网站导航和博客条目（本页面的主要内容）：
< body>
<！ - 不使用分段元素，为了示例 - >
< 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> ;
<！ - 不使用分段元素，为了示例 - >
< header>
< h1> ACME Inc.< / h1>
< / header>
< div class =navigation>
< h1>网站导航< / h1>
< ul> ...< / ul>
< / div>
< div class =content>
< h1> Lorem Ipsum< / h1>
< p> ...< / p>
< / div>
< / body>
更好！页面大纲现在看起来像：
- ACME Inc。
- 网站导航
- Lorem Ipsum b
但它仍然不完美：它们都处于同一水平，但ACME Inc. 是什么让所有的网页形成一个网站，这是为什么有网页的全部点。导航和博客条目是ACME Inc.的一部分，它代表公司和网站本身。
所以我们应该去并将导航和博客条目标题从 h1 更改为 h2 ：
< body>
<！ - 不使用分段元素，为了示例 - >
< header>
< h1> ACME Inc.< / h1>
< / header>
< div class =navigation>
< h2>网站导航< / h2>
< ul> ...< / ul>
< / div>
< div class =content>
< h2> Lorem Ipsum< / h2
< p> ...< / p>
< / div>
< / body>
现在我们有这个提纲：
- ACME Inc.
- 网站导航
- Lorem Ipsum
这正是示例网页意味着的内容。
（顺便说一句，这也适用于HTML 4.01。）
正如链接中所述，HTML5为我们提供了切分元素，我们应该使用它们：
<身体GT;
< header>
< h1> ACME Inc.< / h1>
< / header>
< nav>
< h2>网站导航< / h2>
< ul> ...< / ul>
< / nav>
<文章>
< h2> Lorem Ipsum< / h2
< p> ...< / p>
< / article>
< / body>
大纲保持不变。我们甚至可以更改 h2 （位于 nav 和文章 h1 ，大纲也会保持不变。
如果您不需要一个明确的导航标题，你可以自由地将其删除：大纲保持不变（现在对于 nav ）隐式/未命名标题）。每个部分都有一个标题，无论你是否添加标题。
你甚至可以在中更改 h1 code> header 到 h6 ，它不会改变轮廓。您可以将此标题视为 body 标题。
其他注释
- 在这些示例中不需要
头元素。我只是添加了它，因为您在您的问题中提到了它。 - 如果您想使用徽标而不是文本名称（ACME Inc.），则仍应使用
h1并添加img作为子项。alt属性的值应为该名称。 - 顶级标题不一定是最重要的或页面上最具信息量的元素。这不是用于标题的。他们给结构/轮廓和标签的范围内容。在这个例子中，你可以假定
文章（其内部的标题）是最重要的内容。 - 如果你使用每当需要的时候切片元素，你不需要
h2...h6您可以自由使用它们，以便清晰或向后兼容）。
- 您可以使用
HTML大纲图来测试一些标记结构： http://gsnedders.html5.org/outliner/（它有一些未固定的错误） HTML5大纲。
According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the traditional 'header' on most websites consists of just a logo and some navigational elements.
A lot of major sites including Facebook and Twitter use a h1 tag for their logo, which seems illogical to me, since the logo is not the most important or most informative element on the page.
A h1 tag appears in the content section of 95% of websites, not the header section. So why are we instructed to include a h tag in the header? If we must, why don't Facebook and Twitter use a h6 tag instead?
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.
- Site navigation
- 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
headerelement 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
h1and add theimgas a child. The value of thealtattribute 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…h6anymore (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.
这篇关于为什么HTML5头元素需要h标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
