『速查手册』HTML 语义化标签 | 语义化标签必要性？

『速查手册』HTML 语义化标签 | 语义化标签必要性？

---

一、语义化

HTML5 进一步推进了 Web 语义化发展，采用了诸如<header>、<main>等元素，弥补了采用id="footer" 或者 class="footer"形式的不足，以更好的推动Web的发展。
在大多数情况下，我们说的语义化元素指的是 HTML5 中新增元素，语义元素清楚地向浏览器和开发人员描述了它的含义，每个标签都有自己的身份，每个身份都代表着各自分工，基于这个思想其实大多数标签可以是语义化元素，<div>、<span>则为非语义化元素。基于 HTML5，参考此 网站 可以快速了解语义化布局页面。

---

二、语义化元素「速查表」🐔

1、速查表「部分」

标签	描述	元素等级
<header>	规定页面或节的页眉	块级
<main>	规定页面或节的主内容	块级
<footer>	规定页面或节的页脚	块级
<nav>	定义导航链接	块级
<article>	表示页面内容的某一块可独立分配或可复用的结构，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。简单来讲就是一块文章、条目或独立内容的外层包裹	块级
<aside>	表示页面内容以外的内容，是独立于某内容的一部分并且可以被单独的拆分出来而不会使整体受影响。一般用于侧边栏、标注框、tips	块级
<details>	比较实用的标签，用于查看或隐藏额外内容，配合 使用	块级
<summary>	定义 元素的可见标题	单元素为块级，中第一个为列表元素
<mark>	定义重要的或强调的文本	行内
<time>	以机器可读的形式，定义时间/日期文本	行内
<figure>	可附标题内容元素，配合 使用， 通常为图像、图表、代码片段添加一个说明元素	块级
<figcaption>	定义 所包裹元素的说明	块级
<section>	表示 HTML 文档中一个通用独立章节	块级

2、语义化布局图

页面布局方式有很多种，可根据实际情况进行选择，该图仅作参考。

3、相关讲解点

• <details>与 <summary> 元素能够在不使用 js 的情况下，查看或隐藏额外内容，是比较实用的标签。以一个卡片 ui 的例子，展示其妙用。

  <style>
    p {
      padding: 0;
      margin: 0;
    }
    .panel-openai {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 16em;
      padding: .5em;
      border: 1px solid #000;
      border-radius: .5em;
    }
    .panel-openai .openai-img {
      width: 5em;
    }
    .panel-openai .openai-detail {
      align-self: flex-start;
      width: 100%;
    }
    .panel-openai .openai-detail > summary {
      display: block;
      text-align: center;
      margin: .2em 0;
      color: #0066CC;
      border-radius: 3% / 50%;
      list-style: none;
      cursor: pointer;
    }
    /* Chrome内核隐藏样式list-style */
    .panel-openai .openai-detail > summary::-webkit-details-marker {
      display: none;
    }
    .panel-openai .openai-detail > summary:hover {
      color: #FFF;
      background-color: #BEBEBE;
    }
    .panel-openai .openai-detail[open] > summary {
      font-size: 0;
      height: 5px;
      margin: 10px 0;
      background-color: #BEBEBE;
    }
  </style>
  <main>
    <article class="panel-openai">
      <img src="https://seeklogo.com/images/O/open-ai-logo-8B9BFEDC26-seeklogo.com.png" alt="openai" class="openai-img">
      <p>OpenAI（开放人工智能）是美国一个人工智能研究实验室，由营利组织 OpenAI LP 与母公司非营利组织OpenAI Inc 所组成。</p>
      <details class="openai-detail">
        <summary>详情</summary>
        <p>目的是促进和发展友好的人工智能，使人类整体受益。OpenAI成立于2015年底，总部位于加利福尼亚州旧金山，组织目标是通过与其他机构和研究者的“自由合作”，向公众开放专利和研究成果。创始人山姆·柯曼以及伊隆·马斯克的动机是出于对强人工智能潜在风险的担忧。至2018年，OpenAI的总部坐落于旧金山的米慎区，与伊隆·马斯克的另一座公司Neuralink在同一办公室大楼。</p>
      </details>
    </article>
  </main>
  

  

• <figure> 比较偏向于叶分支，一般为图像、插图、图表、代码片段等使用，特点是子元素只有两个部分，一个内容，一个内容描述，内容描述使用 <figcaption>定义。这个比较容易理解且使用上，要为图片或则代码片段添加标题或描述的场景下，将传统的 <div> 嵌套，改成 <figure> 即可。

  <style>
    figure {
      width: 500px;
      display: flex;
      flex-direction: column;
    }
    figure figcaption {
      text-align: center;
      color: #FFF;
      background-color: #222;
    }
  </style>
  <figure>
    <img src="https://w.wallhaven.cc/full/e7/wallhaven-e7jj6r.jpg" alt="壁纸图片">
    <figcaption>An elephant at sunset</figcaption>
  </figure>
  

  

• 以往大多数做法是为时间包裹一个 <span>，将 <span> 替换成 <time> 能够增强浏览器识别功能。该元素拥有两个属性：

  • datetime：存放一个能被浏览器识别的时间日期，将转化为时间戳与<time>元素关联。
  • pubdate：该属性仍在被 WHATWG 和 W3C 组织设计和讨论中。主要作用是标识文档的发布日期，若祖先元素存在 <artcle> 则表示最近 <artcle> 元素的发布日期，不存在则表示整个文档/页面的发布日期。

  <article>
    <p>该文章发布于 <time datetime="2011-01-28" pubdate>2011-01-28</time>。</p>
  </article>
  <article>
    <p>游戏争霸赛将于 <time datetime="2001-05-15 19:00">六月十六日</time> 举行。</p>
  </article>
  

  

---

三、HTML 语义化元素的必要性🤔

最直观的一点，语义元素运用洽淡的代码比非语义化元素的好读多了，页面布局非常直观，这对于后期维护来讲十分友好，语义元素清楚地向浏览器和开发人员描述了它的含义，不需要通过寻找 class、id 等元素属性查阅代码。

在 HTML5 还未出来之前，以往的做法是在 div 元素添加 id、class属性进行标识，直到现在也有很多人会这么做<div id="header">，些许支持无障碍的浏览器上会尝试去搜寻这类元素，但不要过于理想，多数情况下浏览器并没有这么智能。使用火狐浏览器对比无障碍识别结果。

事物往往具有两面性，使用语义化元素在推进现代化以及无障碍发展的路程中，或多或少的会带来一些缺点隐患，比如说爬虫。页面更容易阅读的同时，爬虫也够更加容易去捕获页面内容，这对于一些敏感的数据不太友善，但好消息是通过 Ajax 动态加载、AES 非对称加密等手段能够一定手段遏制爬虫，存在一定防范手段，哪怕是使用 Seleunium 等方式直接获取页面加载后的源码，不使用语义化元素也阻止不了被爬虫抓取数据，转念一想语义化标签不显得是引狼入室。
纵观国内外，对于语义化标签的实用性一直讨论不停，React Conf 2019 会上曾说过：“无障碍更像是一场马拉松，而不是冲刺”。母庸置疑的是，使用语义化标签对于查阅、维护肯定是有利。

说了这么多，那在编写代码时使用语义化能成为高级工程师吗？能提高开发效率吗？很遗憾，辛辛苦苦写的语义化并不会对自身带来好处，也不能凭此得到领导赏识而升职加薪，对于习惯传统标签的人来说，还会增加学习成本，降低编写效率，属于是费力不讨好的类型。在现代主流网站，淘宝、百度、优快云 语义化程度都很低。使不使用语义化标签往往取决个人的选择，不用也没什么，因为所带来的收益确实也没必要，无障碍这一需求绝大公司都不会考虑，让自己早点下班不好吗？
如果你是一名刚刚步入行业的初级程序员，那么大可按照自己方便来，选择暂时性忽略语义化，把学习精力放到其他更重要的方面。对的事情比容易的事情更重要，如果你是一名追究提高代码质量，有技术追求、职业素养的开发者，那么我建议你把语义化带上，在每写下一个 <div> 、<span> 标签的同时想一想能不能使用更加准确的标签将其代替。写代码就和写字一样，为自己写下的代码负责，正如我在 Python 编程规范详解指南 上 所说：“评价一个程序员的能力往往是从代码这第一印象开始的”。
最后，也期待日后有成熟专业的插件能够识别页面内容，自动转换成语义化元素，从而降低学习维护成本，增加开发质量。

---

四、第三方标签扩展「了解」🥝

在第三方平台，前端框架等环境下，会有一些特殊的标签元素，这与上面所讲解的语义化标签不同，不能将其只是当作一个 <div> 的变形，也许是程序功能的扩展，又或者是特定环境下调用环境能力。列如微信 JS-SDK 中的开放标签，通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。
这里以微信开放标签为例，简单介绍其功能，便于以后在遇到这些标签的时候能够与语义化标签进行区分。

微信开放标签	描述
<wx-open-launch-weapp>	使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。
<wx-open-launch-app>	用于页面中提供一个可跳转指定 App 的按钮。
<wx-open-subscribe>	调起客户端服务号订阅通知界面，返回用户订阅通知的操作结果。
<wx-open-audio>	扩展音频标签，用于接入微信浮窗播放器。

对于编辑器或 IDE 无法识别的标签语法，以 jetbrains 家族 WebStorm 为例，可以配置添加自定义标签👇

---

五、参考资料💘

🍅因发布平台差异导致阅读体验不同，源文贴出：《『速查手册』HTML 语义化标签 | 语义化标签 必要性？》

• 维基百科中文版：
  • HTML5
• 官方手册：
  • MDN 语义化元素
  • MDN HTML：无障碍的良好基础
  • 微信H5 开放标签说明文档
• 网络文献：
  • 现代网站结构布局参考
  • 语义标签（英）
  • w3cschool 语义化元素
  • 知乎 - 如何理解语义化？

---

六、相关博文🍗

• JavaScript 两种方案打开文件对话框
• 『速查手册』MIME 多用途互联网邮件扩展