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

时间 2019-12-05

标签前端进阶一说 html5 html 语义理解栏目 HTML5 繁體版

原文原文链接

做者：陈大鱼头

github： KRISACHAN

连接：github.com/YvetteLau/S…

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

标签分类

在一个 html 文档中，标签大体能够分为如下两个大类：

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

<html></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类：git

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

HTML 标签语义化

语义化到底重不重要？github

咱们知道，在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海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。