# 什么是语义化?

就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

# 语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。

有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。

方便其他设备解析,如盲人阅读器根据语义渲染网页

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


今天先介绍主体结构标签,如图所示: 1

# 1.header

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

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


# 2.nav

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

在一个文档中,可定义多个nav元素。


# 3.main

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

需要注意的是在一个文档中不能出现多个main标签。


# 4.article

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

当article元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的article元素可嵌套在代表博客文章的article元素中。


# 5.aside

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


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

使用footer插入联系信息时,应在 footer 元素内使用 address 元素,注意 不能包含footer或者header。


# 7.section

section>表示文档中的一个区域或功能,比如,内容中的一个专题组。

如果元素内容可以分为几个部分的话,应该使用article 而不是section。 不要把section 元素作为一个普通的容器来使用,特别是当section仅仅是为了美化样式或方便脚本使用的时候,应使用div。


# article 和 section 的区别

阿帝扣article 色克孙section

article元素重点在于内容,一般用作闭合一块与自身相关的内容,你只需要知道这块内容的信息,就能懂它的意思,而且acticle是可以独立分配和可复用的。

例如:论坛帖子、杂志或新闻文章、用户提交的评论、或者其他独立的内容等。

参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article


section元素重点在于功能,相对于article元素更加广泛,可以是某个单独功能的聚合,对页面上的内容进行分块,或者说对文章进行分段,每个区块都可以使用。

例如:一个小型地图,页面里的导航菜单、文章正文、文章的评论等。

参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section

如果一个元素的内容能分成几个部分话应该使用article而不是section