语义化标签的理解

1.什么是语义化标签

语义化标签就是具有语义的标签，它可以清晰地向我们展示它的作用和用途。例如h系列标签，可以将文字加粗放大。<strong>标签可用于区别其他文字，起到强调作用。

2.语义化标签的好处

• 语义化标签具有可读性，使得文档结构清晰
• 浏览器便于读取，有利于SEO优化
• 展现在页面中时，用户体验好
• 便于团队开发和维护

3.语义化标签有哪些

1. h系列标签--标题
2. p标签--段落标签
3. 格式化文本标签：

• • 加粗--strong
  • 倾斜--em
  • 下划线--ins
  • 删除线--del

4.H5新增语义化标签

1.herder标签：

• • 代表网页或者section的页眉，作为整个页面或者一个内容块的标题。
  • 也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关的logo
  • 整个页面没有限制herder元素的个数，可以拥有多个

2.footer标签：

• • 定义了整个页面或者一部分的页脚，通常包含一些基本信息，譬如：作者，相关文档连接，站点地图，版权信息等
  • 如果footer包含了整个节，那么它就代表附录，索引，许可协议，标签，类别等一些其他类似的信息。
  • 可以网页或者任意setion的底部部分，没有个数限制。

3.hgroup标签：

• • 用于对网页或者区段标题的组合。它可以包含h系列标题，例如主标题，副标题的组合
  • 如果只有一个h标题不用使用hgroup
  • 如果有连续多个标题和其他文章数据，就包含h标题，一起放入herder中

4.nav标签：

• • 定义整个页面的主要导航部分。

5.aside标签：

• • 特殊的section，可以独立于内容存在而不会使得整体受到影响
  • 通常用作侧边栏，包含与内容相关各种链接。它是特殊的section
  • aside标签被包含在article中时，作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

6.section标签：

• • 定义文档中的节或段，段可以时一篇文章按照主体的分段，节可以指一个页面里面的分组

7.article标签：

• • 定义一个文档，页面，或者网站中自成一体的内容。例如论坛的帖子，用户的评论
  • article内部乐意嵌套article，例如一篇帖子里，可以用article包含评论，嵌套的article一定是和文章相关联的
  • article section div的区别

1. 1. article更具有语义，可以作为一个独立的页面整体
   2. section表示一个独立的段，节，是一个独立的组的分类，这些组之间是相关联的
   3. div是一个容器，没有语义

 总结

语义化标签给我们带来了很多的便利，但是我们不能为了刻意追求语义化，而滥用语义化标签。之前的div，span这些没有语义的标签也有它本身的独特性，在写页面的时候，我们还是要根据需求结合语义化标签一起使用。

参考来源：

http://www.html5jscss.com/html5-semantics-section.html?iajsto=graea

https://blog.csdn.net/qq_38128179/article/details/80811339

http://caibaojian.com/html5/ele.html

https://blog.csdn.net/liuyingv8/article/details/80800841

https://www.cnblogs.com/zjf-1992/p/6182406.html