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

背景:由高级前端工程师@刘小夕 在github上发起的一个开源项目:每个工作日发布一个前端相关的问题,每周进行一次汇总。我觉得很不错,也参与其中,如果你也感兴趣,可以一起参与,项目地址:https://github.com/YvetteLau/Step-By-Step

首先我们先来了解下什么是语义类标签?

《重学前端》里面的定义:

语义是我们说活表达的意思,多数的语义实际上都是文字来承载。语义类的标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义类标签代为表达。 说下自己对HTML语义的理解:根据不同的内容和结构,选择合适的标签来展示。

通过标签,我们就能大概的知道展示的是什么样的内容,是一张图片,一个段落,一个标题或者是一个列表等等。

我们平常最常用的应该就是这些了:

比如我们需要显示一张图片,我们就放一个<img>标签

<img src="test.jpg" alt="描述这是一张什么图片">

要显示一个段落,我们就放一个<p>标签

<p>我是一个段落我是一个段落</p>

要显示一个无序列表,我们就用一个<ul>

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

要显示一个有序列表,我们就用一个<ol>

<ol>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

需要一个标题,我们就用h1~h6的标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

还有很多就不一一列举了,这些都是最基本的。

HTML5新增的语义化标签

HTML5新增了很多语义化的标签,能够让我们更恰当的描述你的内容是什么。

比如<header><footer><nav><main><aside><article><section><audio><video>等。

比如在HTML5出现之前,我们要定义一个头部,可能会这样写:

<div class="header">这是一个头部</div>

HTML5出现后,我们可以直接使用<header>标签来定义一个头部

<header>这是一个头部</header>

更加详细的可以参考:MDN

语义化有什么好处

虽然说语义化不是强制要求的,但是正确的使用语义标签可以带来很多好处:

  • 语义类标签对开发者更为友好,可以使我们的页面结构更加清晰明了
  • 增强了可读性,即使是在没有CSS的情况下,开发者也能够清晰的看出网页结构,也更便于团队的开发和维护
  • 有利于搜索引擎优化(SEO),可以让搜索引擎爬虫更好的获取到更多有效的信息,有效提升网页的搜索量
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)等
  • 避免了<div><span>标签的滥用和嵌套,有利于页面的维护和拓展

无障碍设计

本段摘抄自github @fish_head的回答。

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

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

WAI-ARIA

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

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

  1. 角色(role):这定义了元素是干什么的;
  2. 属性: 通过定义一些属性给元素,让他们具备更多的语义;
  3. 状态:用于表达元素当前的条件的特殊属性。

注意

虽然语义化有很多好处,但是不恰当的使用语义标签,反而会造成负面作用。

错误的使用语义标签,会给机器阅读造成混淆、增加嵌套,给CSS编写加重负担。