语义化

语义化优点：

1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3. 方便其他设备解析，如盲人阅读器根据语义渲染网页

4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

   
   image.png

1、<header>

在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

在一个文档中，可定义多个<nav>元素。

3、<main>

<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
在一个文档中不能出现多个<main>标签。

4、<article>

<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

6、<footer>

使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

7.<section>

综合来说，section元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。