> For the complete documentation index, see [llms.txt](https://xiaobaiha.gitbook.io/tech-share/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaobaiha.gitbook.io/tech-share/html/html5-yu-yi-yu-jie-gou-yuan-su.md).

# html5语义与结构元素

## 前言

本文所讨论的html5新标签仅限于语义与结构类的元素，也就是在html5.0规范中新增的用于提供解释意义的元素。

## div 与语义化新标签对于

平日里偶尔能看到一些谈论 `html5` 新特性的文章或是面试题。对于2008年就发布的 `html5` 而言，这些特性其实并不新鲜，只是相对前代的新。所以 `html5` 的标签语义与结构化也已经是一个老生常谈的问题了。作为一个深受 `div + span` 体系熏陶的前端开发，加之项目中可引入的html5新标签极少，所以个人接触新标签的机会也并不多，那么就趁此机会来学习一下语义标签。

时至今日，通过审查元素可以发现，至少在我日常浏览的网页中，只有极少数html5新加入的标签。放眼望去几乎都是 `<div>` 标签，偶尔能看到超链接地方的 `<a>` 标签，亦或是内联元素 `<span>` 标签。个人认为`<div>`标签好用的原因有以下几点

* 通过为 `<div>` 标签加类名的形式，分离dom与样式代码，提高了代码的可读性，也让开发人员写代码变的更加快速高效。同时对于整个系统来说，提高了扩展与可维护性，当类名进行有序维护后，样式改版或是多皮肤样式的推进将变的十分简单。
* 使用 `div` 页面结构层次更为清晰，降低代码的复杂程度，提高加载速度。在开发环境下，对于dom元素的调试与调整也可以在控制台更为方便的进行。
* `<div>`标签作为一个块级元素，友好程度自然高于一些内联元素，配合`flex`容器能够解决大部分基本的样式问题。

当然了，`<div>`标签所拥有的优势，html5新标签同样也有，那么相比前者而言，新标签的优势在于

* 更优的可读性，对于一些重用较少或者只在一处使用的类而言，不同开发人员的命名方式往往是不同的。所以在阅读他人代码，或是隔一段时间读自己代码的时候，对于dom结构往往会有一些懵逼，第一反应可能会是，诶？这个class写的是什么意思？而对于新标签来说，看到标签的第一时刻，至少能够大致明白其子元素所拥有的大致功能。
* SEO(Search Engine Optimization)，意为搜索引擎优化，是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。对Google、Bing等搜索引擎而言，语义化的html5新标签对于其解析来说更为的友好，换句话说，就是新标签对于爬虫而言是更加友好的。这对于一些需要提高知名度的网页来说是极为重要的。
* 直接可使用的样式效果，部分语义化标签并不是只是`div`换个名称而已，比如`<meter>`、`<ruby>`等标签，就提供了一定的默认样式实现与功能，进而可以在其基础上更快捷的实现所需要的功能。

## 新增语义与结构元素

| 标签             | 说明                                                                           |
| -------------- | ---------------------------------------------------------------------------- |
| `<header>`     | 定义文档的头部区域                                                                    |
| `<aside>`      | 定义页面的侧边栏内容                                                                   |
| `<footer>`     | 定义 section 或 document 的页脚                                                    |
| `<section>`    | 定义文档中的节（section、区段），一般通过是否包含一个标题 `<h1>-<h6>` 作为子节点来辨识每一个`<section>`          |
| `<article>`    | 定义页面独立的内容区域，如文章或贴子的内容等                                                       |
| `<figure>`     | 规定独立的流内容（图像、图表、照片、代码等等）                                                      |
| `<figcaption>` | 定义 `<figure>` 元素的标题                                                          |
| `<nav>`        | 定义导航链接的部分，一般作为多个`<a>`标签的父元素使用                                                |
| `<bdi>`        | 允许设置一段脱离其父元素的文本方向的文本，换句话说就是可以加上类似`ltr`等样式改变其方向                               |
| `<command>`    | 定义命令按钮，比如单选按钮、复选框或按钮，用于做button的功能，但没有默认的样式                                   |
| `<details>`    | 用于描述文档或文档某个部分的细节                                                             |
| `<summary>`    | 标签包含 `details` 元素的标题                                                         |
| `<dialog>`     | 用于定义弹窗的标签，本身并不具有弹窗样式                                                         |
| `<mark>`       | 定义带有记号的文本，会有一些不同于周围字的样式                                                      |
| `<meter>`      | 定义度量衡，仅用于已知最大和最小值的度量，具有默认样式，类似于一个不会动的进度条                                     |
| `<progress>`   | 定义任何类型的任务的进度，默认样式是一个会动的进度条                                                   |
| `<ruby>`       | 定义 ruby 注释（中文注音或字符）                                                          |
| `<rt>`         | 与`ruby`元素绑定使用，定义字符（中文注音或字符）的解释或发音                                            |
| `<rp>`         | 与`ruby`元素绑定使用，定义不支持 `ruby` 元素的浏览器所显示的内容                                      |
| `<time>`       | 定义日期或时间，没有什么特殊样式，单纯的表明其内容是个时间                                                |
| `<wbr>`        | 规定在文本中的何处适合添加换行符，比如`XML<wbr>Http<wbr>Request`，其中的`<wbr>`就是其适合因为宽度限制而适合换行的分界点 |

## 结语

html5新标签拥有许多优势，但新标签的使用与否，其实完全看所在团队产品的需要与工程的架构规范。

从兼容性的角度来看，html5新标签并不支持IE8及以前的浏览器版本，且个别标签兼容性还有特定的差别，所以会存在一定程度的兼容问题。

新标签本身能够覆盖的含义依旧是比较少的，以我平时浏览的网页来说，确实不存在太多可以使用新标签的场景，往往布局元素才是唯一所需。某些特定场景下的选择使用 `<div>` 配合一个class的形式反而让语义更加明朗。

另外，对于一些to B的产品来讲，并不需要什么营销推广，进而也没有SEO的意义。

所以合理使用新标签，提高团队效率才是是否使用问题的本质所在。