每日前端进阶第三题：说一说你对HTML5语义化的理解

栏目: Html5 · 发布时间: 6年前

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

标签分类

在一个 html 文档中，标签大致可以分为以下两个大类：
1. <!DOCTYPE> ：声明文档类型；
1. <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）：这定义了元素是干什么的；
属性：通过定义一些属性给元素，让他们具备更多的语义；
状态：用于表达元素当前的条件的特殊属性。

如果你、喜欢探讨技术，或者对本文有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“

”，随时与鱼头互动。欢迎！衷心希望可以遇见你。

以上所述就是小编给大家介绍的《每日前端进阶第三题：说一说你对HTML5语义化的理解》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Numerical Recipes 3rd Edition

William H. Press、Saul A. Teukolsky、William T. Vetterling、Brian P. Flannery / Cambridge University Press / 2007-9-6 / GBP 64.99

Do you want easy access to the latest methods in scientific computing? This greatly expanded third edition of Numerical Recipes has it, with wider coverage than ever before, many new, expanded and upd......一起来看看《Numerical Recipes 3rd Edition》这本书的介绍吧!

码农工具