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的意义。

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

最后更新于4年前

这有帮助吗？

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及以前的浏览器版本，且个别标签兼容性还有特定的差别，所以会存在一定程度的兼容问题。

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

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