什么是HTML语义化标签？为什么要用H5语义化标签？HTML5语义化标签有哪些

  对于大部分初学者来说，可能无法理解，明明在学习的时候，用div标签就能构成页面，为什么要用h5语义化标签？可能有一些前端工作者对HTML标签语义化的概念也不是很清楚，那么究竟什么是HTML语义化标签？我们为什么要用h5语义化标签？常用的HTML5语义化标签有哪些呢？下面，我们就带着问题找答案。

什么是HTML语义化标签？

  语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

  过去我们常常采用DIV+CSS 的方式布局页面，但DIV 标签本身没有独特的含义，这样做的结果就是文档结构不够清晰，不利于浏览器对页面的读取，在分离CSS样式后，用户体验不友好。

  所以HTML5 新增了很多语义化标签，使文档更具可读性，页面结构更清晰。

为什么要用H5语义化标签？

1. 代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
2. 在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验。
3. 对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息。

HTML5语义化标签有哪些？

  header 标签： 页眉，通常包括网站标志、主导航、全站链接以及搜索框

  nav 标签：标记导航，仅对文档中重要的链接群使用

  main标签：页面主要内容，一个页面只能使用一次

  article标签：用来定义独立于文档且有意义的来自外部的内容

  section标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

  aside标签：定义article标签外的内容，可用作文章的侧边栏

  footer标签：页脚，只有当父级是body时，才是整个页面的页脚。

  title标签：定义文档的标题

  h1~h6标签：创建文档结构的层级关系

  ul标签：无序列表

  ol标签：有序列表

  strong标签：强调文本，表现为粗体

  em标签：强调文本，表现为斜体

  p标签：段落

  那么有了HTML5新增的这些语义化标签，我们就可以抛弃DIV了吗？也不尽然，在今后的文章中我会详细讲到这些H5语义化标签的使用和注意事项。