如何在HTML5中正确使用h1

前端之家收集整理的这篇文章主要介绍了如何在HTML5中正确使用h1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下哪项是构建页面的正确方法

1)h1只在标题

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

如果我在标题中只使用h1作为网站的标题,那么每个页面都会有相同的h1标签内容。这似乎不是很有用。

2)h1在标题和部分,对于网站和页面标题

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

我也看到了使用h1的例子不止一次,在标题和部分标签。但是,同一页面有两个标题是不是错了?此示例显示多个标头和h1标签http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3)h1只在部分,强调页面标题

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

最后,W3似乎建议在主要部分元素中使用h1,这是否意味着我不应该在头部元素中使用它?

Sections may contain headings of any rank,but authors are strongly
encouraged to either use only h1 elements,or to use elements of the
appropriate rank for the section’s nesting level.

解决方法

正如我在我的评论中说,你在W3C中引用,h1是一个标题,而不是一个标题。每个分段元素可以具有其自己的标题元素。你不能认为h1只是一个页面标题,而是作为页面的特定部分的标题。就像报纸的首页,每篇文章都可以有自己的标题(或标题)。

Here is a good article on this.

猜你在找的HTML5相关文章