与HTML5中新增的结构元素的初次邂逅

举报
lwq1228 发表于 2021/07/26 17:11:52 2021/07/26
【摘要】 在HTML5之前,对于页面中较大块的结构(如导航、内容区、侧边栏、底部等),一般都是使用div元素来实现。但是我们都知道,div是一个无语义的元素,如果整个页面都使用div来实现,那么可读性和可维护性是非常差的。在HTML5中,新增了一组结构元素,以帮助完善页面的语义化,提高可读性、可维护性以及SEO(即搜索引擎优化)。语义化并不是简单的一个术语,可以说是HTML中最重要的概念。

在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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200