与HTML5中新增的结构元素的初次邂逅
在HTML5之前，对于页面中较大块的结构（如导航、内容区、侧边栏、底部等），一般都是使用div元素来实现。但是我们都知道，div是一个无语义的元素，如果整个页面都使用div来实现，那么可读性和可维护性是非常差的。
在HTML5中，新增了一组结构元素，以帮助完善页面的语义化，提高可读性、可维护性以及SEO（即搜索引擎优化）。语义化并不是简单的一个术语，可以说是HTML中最重要的概念。
HTML5新增的主要结构元素有7个：hgroup、header、nav、article、aside、section、footer。
1、hgroup元素
hgroup元素主要对多层级的h1~h6标题进行分组，也可以将一个article 元素里的主标题和子标题进行分组。
- 只要页面中内容区块有主标题和副标题，就可以对其进行组合。
<hgroup>
<h1>我是主标题</h1>
<h2>我是副标题</h2>
</hgroup>
- 用于文章(article标签)或者某段独立的内容区块。
<article>
<hgroup>
<h1>我是文章主标题</h1>
<h2>我是文章副标题</h2>
</hgroup>
文章内容
</article>
- 用于章节、段(section标签)中或者需要分区块的地方。
<section>
<hgroup>
<h1>我是文章主标题</h1>
<h2>我是文章副标题</h2>
</hgroup>
</section>
使用注意事项：
-
标签只是对标题进行组合，而对标题的样式没有影响；
-
如果只需要一个h1-h6标签就不用hgroup，如果有连续多个h1-h6标签就用hgroup；
-
如果在页面头部、文章头部、章节或者分段分块的头部，至少有两个主题标签，才使用hgroup标签，如果只有一个主题标签，则不需要使用；
2、header元素
在HTML5中，header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。
- 当用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等。
<body>
<header>文档的Header</header>
</body>
- 当用于文章头部时（即article元素头部），header元素一般用于包含“文章标题”和“meta信息”两部分。所谓的meta信息，一般指的是作者、点赞数、评论数等。
<article>
<header>文章的Header</header>
</article>
- 当用于区块头部时（即section元素头部），header元素一般只包含区块的标题内容。
<section>
<header>section的Header</header>
</section>
3、nav元素
在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。
当用于顶部导航时，nav元素可以放到header元素内部，也可以放到header元素外部。具体放在里面还是外面，取决于实际开发需求。一般情况下，主导航主要是使用无序列表来实现。在HTML5之前，都是使用一个div来包含着无序列表，而现在我们可以使用nav元素来代替div元素，以使结构更具有语义。
以前的导航结构如下：
<div id="nav">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
现在的导航结构如下：
<nav id="nav">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</nav>
4、article元素
在HTML5中，article元素一般只会用于一个地方：文章内容部分。我们可以把article看成一个独立的部分，它内部可以包含标题以及其他部分。也就是说，article元素内部可以包含header元素、section元素和footer元素等。在严格意义上，每一个article元素内部都应该有一个header元素。
<article>
<header>
<h1>文章标题</h1>
<p>作者、浏览量...</p>
</header>
<div id="content">文章内容...</div>
<footer>
<nav>上一篇、下一篇导航</nav>
</footer>
</article>
5、aside元素
在HTML5中，aside元素一般用于表示跟周围区块相关的内容，想要正确地使用aside元素，主要取决于它的使用位置，我们大体可以分为以下两种情况。
- 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。
- 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如相关文章、相关链接、相关广告等。
6、section元素
在HTML5中，section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素。在HTML5中，article、aside这两个元素可以看成是“特殊”的section元素，因为它们比section元素更具有语义化。在实际开发中，对于页面某一个区块，优先考虑语义化更好的article元素和aside元素，如果这两个都不符合，再考虑使用section元素。
7、footer元素
在HTML5中，footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。当用于页面底部时，footer元素一般包含友情链接、版权声明、备案信息等。当用于文章底部时，也就是放在article元素内部时，footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。
<article>
<header>
<h1>文章标题</h1>
<p>作者、浏览量...</p>
</header>
<div id="content">文章内容...</div>
<footer>
<nav>上一篇、下一篇导航</nav>
</footer>
</article>
<footer>友情链接、版权声明、备案信息等...</footer>
- 点赞
- 收藏
- 关注作者
评论（0）