究竟什么是HTML5`和语义化标签

一、什么是 `HTML5`

1. `HTML5` 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
两个概念：
- 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
- 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

2. `HTML5` 拓展了哪些内容

语义化标签
本地存储
兼容特性
2D、3D
动画、过渡
CSS3 特性
性能与集成

3. `HTML5` 的现状

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，总的来说：HTML5 已经是大势所趋

二、`HTML5` 新增标签

1. 新增了那些语义化标签

header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签
······

2. 使用语义化标签的注意

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好
另外，HTML5 新增的了很多的语义化标签，这里只是部分

三、语义化标签

1. 语义化标签是什么？

语义类标签也是大家工作中经常会用到的一类标签，它们的特点是视觉表达上都互相差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的 section、nav、p，这些都是语义类标签。

语议是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

2、使用的好处是什么？

语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。

除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

但使用语义化标签的前提是需要正确的使用，如果不能正确使用语义化标签，那还不如直接使用div和span。

3. 作为整体结构的语义类标签

一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用article来组织。

<body>
    <header>……</header>
    <article>
        <header>……</header>
        <section>……</section>
        <section>……</section>
        <section>……</section>
        <footer>……</footer>
    </article>
    <article>
        ……
    </article>
    <article>
        ……
    </article>
    <footer>
        <address></address>
    </footer>
</body>

body里面有自己的header和footer,然后里面是竖篇的article,每-个article里面都有自己的header、section、footer。这是一个典型的多文章结构。

aside 表示跟文章主体不相关的部分，可能包含导航，广告工具性质的内容；aside很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是aside，aside不一定是侧边栏

aside和header中都可能出现导航(nav 标签)，二者的区别是，header 中的导航多数是到文章自己的目录，而aside中的导航多数是到关联页面或者是整站地图。

最后footer中包含address,这是个非常容易被误用的标签。address 并非像date一样，赫一个给机器阅读的地址，是示“文章(作者)的联系方式”，address 明确地只关联到article和body。

4. 是否要语义化

我们应该分开些场景来看语义, 把它用在合适的场景下，可以获得额外的效果。

自然语言表达能力的补充;
文章标题摘要;
适合机器阅读的整体结构。

来源：CSDN

作者：司~夏

链接：https://blog.csdn.net/qq_44721831/article/details/104017273

标签

html5

html标签语义化