deb*_*deb 76 html seo html5 semantic-markup semantics
以下哪一项是构建页面的正确方法:
1)h1仅限于header
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
如果我仅使用h1内部header作为网站的标题,则每个页面都将具有相同的h1标记内容.这似乎没有很多信息.
2)h1in header和section,用于站点和页面标题
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
我也看过h1两次header和section标签中使用不止一次的例子.但是,同一页面有两个标题是不是错了？此示例显示了多个标题和h1标记http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3)h1仅在section,强调页面标题
<header>
<p>Site title</p>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
最后,W3似乎建议h1在主section元素中使用,这是否意味着我不应该在header元素中使用它？
章节可能包含任何等级的标题,但强烈建议作者仅使用h1元素,或者使用适当等级的元素作为该部分的嵌套级别.
Rob*_*Rob 58
正如我在评论中所说,你在W3C中引用,h1是标题,而不是标题.每个切片元素都可以有自己的标题元素.您不能将h1视为页面的标题,而是将其视为页面特定部分的标题.就像报纸的头版一样,每篇文章都有自己的标题(或标题).
chh*_*vey 14
我建议h1全程使用.忘记h2通过h6.
回到HTML4,6个标题级别用于隐式定义部分.例如,
<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>
现在使用该section元素,您可以显式定义这些部分,而不必依赖浏览器创建的隐式部分来读取不同的标题级别.配备HTML5的浏览器知道section元素中的所有内容都在文档大纲中被"降级"一级.因此,例如a section > h1在语义上被视为a h2,a section > section > h1就像是h3,等等.
令人困惑的是,浏览器仍然根据h2- h6标题级别创建隐式部分,但h2- h6元素不会更改其样式.这意味着,h2无论嵌套多少个部分,它仍然会像h2(至少在Webkit中)一样出现.如果你h2应该是一个4级标题,那将会令人困惑.
混合h2- h6与section导致非常意外的结果.只坚持使用h1,并用于section创建显式部分.
<body>
<!-- optional --><header>
<h1>This is a top-level heading</h1>
<p>you may optionally wrap this p and the h1 above it inside a header element.
the header element doesn't affect the doc outline.
the section element does, however.</p>
<!-- optional --></header>
<section>
<h1>even though this is an h1, the browser "treats it" like an h2
because it's inside an explicit section.
(it got demoted).</h1>
<p>content in the subsection</p>
</section>
<section>
<h1>Another subsection begins here, also treated like an h2</h1>
<p>content</p>
<h2>This is misleading. it is semantically treated like an h3.</h2>
<p>that is because after an h1, an h2 is demoted one level. the h1 above is
already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
<section>
<h1>just do this instead.</h1>
<p>it is treated like an h3 because it's in a section within a section.
(It got demoted twice.)</p>
</section>
</section>
<h1>another top-level heading</h1>
此外,您可以使用该<main>元素.此元素仅包含特定于页面的信息,不应包含在站点范围内重复的内容,例如导航链接,站点页眉/页脚等.可能只有一个 <main>元素存在<body>.所以你的解决方案可能就像这样简单:
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>
| 归档时间： |
|
| 查看次数： |
34037 次 |
| 最近记录： |