col*_*ite 8 html seo html5 semantic-markup
根据HTML5Doctor.com和其他HTML5介绍性网站,header元素应包含h1-h6标记以及其他导航或介绍内容.但是,大多数网站上的传统"标题"仅包含徽标和一些导航元素.
许多主要网站,包括Facebook和Twitter都使用h1标签作为他们的徽标,这对我来说似乎不合逻辑,因为徽标不是页面上最重要或最具信息性的元素.
h1标签出现在95%的网站的内容部分,而不是标题部分.那么为什么我们被指示在标题中包含ah标签？如果必须,为什么Facebook和Twitter不使用h6标签呢？
您可能希望您的网站标题/徽标是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.从语义上讲,这意味着该页面的所有内容都在本标题的范围内.请参阅此页面的大纲:
但这不是真的(以语义方式):层次结构,页眉"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." 是什么使所有的网页形成一个网站,这就是为什么有网页的全部意义.导航和博客条目是"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>
现在我们有这个大纲:
这正是示例网页的内容所意味着的内容.(顺便说一下,这也适用于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,轮廓也会保持不变.
如果您不希望导航的"显式"标题,您可以自由删除它:轮廓保持不变(现在具有隐含/"未命名"标题nav).无论您是否添加,每个部分都有一个标题.
你甚至可以改变h1内header到h6,它不会改变轮廓.您可以将此标题视为"标题body".
header在这些示例中不需要该元素.我只是添加了它,因为你在问题中提到了它.h1并将其添加img为子项.那么alt属性的值应该给出名称.article(其内部标题)是最重要的内容.h2 ... h6(但为了清晰度或向后兼容性,您可以自由使用它们).| 归档时间： |
|
| 查看次数： |
1401 次 |
| 最近记录： |