前端进阶之说一说你对HTML5语义化的理解

作者：陈大鱼头

github： KRISACHAN

链接：github.com/YvetteLau/S…

背景：最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo，怀着学习的心态我也参与其中，以下为我的回答，如果有不对的地方，非常欢迎各位指出。

标签分类

在一个 html 文档中，标签大致可以分为以下两个大类：

<!DOCTYPE>：声明文档类型；

<html></html>：限定文档区域；

<html></html> 内又有以下几类：

1. head

<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。 head内可存放标签有：

<base>：为页面上的所有链接规定默认地址或默认目标。
<link>：主要用于style文件引入
<style>：样式表区域
<title>：可定义文档的标题。<title> 标签是 <head> 标签中唯一要求包含的东西。
<meta>：提供了有关当前HTML元素的元信息 (meta-information)

2. body

<body>标签内存放文档的内容。 <body>内标签分类有以下11类：

内容分区
文本内容
内联文本语义
图片和多媒体
内嵌内容
脚本
编辑标识
表格内容
表单
交互元素
Web组件

HTML 标签语义化

语义化到底重不重要？

我们知道，在HTML中，每个标题是通过标题标签来定义的，标题标签一共有6个，分别是：h1~6。例子如下：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
复制代码

如果是连续的标题，则可以用 <hgroup> 来连接：

<hgroup><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>
</hgroup>
复制代码

如果是段落内容，则用 <p>：

<p>我是段落内容</p>
复制代码

如果我们要列一个列表则可以用 <ol></ol> 或 <li></li> 。如果只是要标记项目，我们可以用 <li></li> ，例子如下：

<ul><li>苹果</li><li>香蕉</li><li>奥特曼</li><li>橙子</li>
</ul>
复制代码

若是标记顺序，则用 <ol></ol> ，例子如下：

<ol><li>向前走300米</li><li>右转</li><li>向前走300米</li><li>右转</li><li>向前走300米</li>
</ol>
复制代码

当然我们也可以按需嵌套。

<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li><li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li><li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li><li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li><ul><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li><li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li></ul>
</ol>
复制代码

在我们平常说话的时候，为了突出重点，我们往往会强调某些词，就如如下的例子：

<p>我<em>非常</em>喜欢加班</p>
复制代码

如果是重音强调，则：

<p>鱼头，明天<strong>别迟到</strong>了</p>
复制代码

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
更便于SEO优化 — 比起使用非语义化的

标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。（虽然在9012年的今天，SEO并没太大软用）

无障碍设计

在Web开发无障碍性意味着使尽可能多的人能够使用Web站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。

“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。"

WAI-ARIA

WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。

WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：

角色（role）：这定义了元素是干什么的；
属性：通过定义一些属性给元素，让他们具备更多的语义；
状态：用于表达元素当前的条件的特殊属性。

后记

HTML语义化非常地重要，虽然在组件化开发的今天，利益没那么明显，但是对于后期维护，用户访问以及用户友好度来说都是非常重要的，在某些国家，语义化跟无障碍标准化甚至是衡量一个线上产品能否上线的标准。

如果你、喜欢探讨技术，或者对本文有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心希望可以遇见你。