html语义化

什么是html语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

html语义化的好处

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
可以提升用户体验，给用户多一些解释/提示信息。
方便其他设备解析，如盲人阅读器根据语义渲染网页
便于团队开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

主体结构标签，示例如图：

各个标签的介绍

1、 header

header 定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

在一个文档中:

可以定义多个 header 元素；
header 元素不能作为 address 、 footer 或 header 元素的子元素；
可以是“网页”或任意“section”的头部部分；
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2、 nav

nav 描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

主要用于定义页面的主要导航部分。

在一个文档中

可定义多个 nav 元素。
用在整个页面主要导航部分上
不合适就不要用nav元素；

3、 main

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

主要用于定义页面的主要内容部分。

在一个文档中

不能出现多个 main 标签。

4、 article

article 元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

当 article 元素嵌套使用时，则该元素代表与外层元素有关的文章。

article代表一个在文档，页面或者网站中自成一体的内容，目的是为了让开发者独立开发或重用。

例如，论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。

如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的。

一定要区分article、section、div

自身独立的情况下：用article
是相关内容：用section
没有语义的：用div

5、 aside

aside 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。

通常表现为侧边栏或嵌入内容。

当做特殊的section来使用。

aside在article内表示主要内容的附属信息，
在article之外则可做侧边栏，没有article与之对应，最好不用。
如果是广告，其他日志链接或者其他分类导航也可以用

6、 footer

footer 定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

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

可以是“网页”或任意“section”的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。
不能包含 footer 或者 header

7、 section

section 表示文档中的一个区域（或节），比如，内容中的一个专题组。

如果元素内容可以分为几个部分的话，应该使用 article 而不是 section 。

不要把 section 元素作为一个普通的容器来使用，特别是当 section 仅仅是为了美化样式或方便脚本使用的时候，应使用 div 。

为了防止混淆 ** article ** 比 section 更具有独立性、完整性。可通过 该段内容脱离了所在的语境，是否完整、独立 来判断。

表示文档中的节或者段；
article、nav、aside可以理解为特殊的section；
如果可以用article、nav、aside就不要用section;
没实际意义的就用div

其他结构元素标签

h1-h6

h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。

address

address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

对html语义化的理解认知