HTML5语义化开发指南

时间 2019-12-07

标签 html5 html 语义开发指南栏目 HTML5 繁體版

原文原文链接

为何要作 HTML5 语义化

HTML5的主要进步之一是引入了一组标准化的语义元素。html

”语义元素“是用于以更有意义的方式标记文档结构的元素，这种方式能够清楚地代表它们的用途和目的是什么。并且重要的是，因为它们是标准化的，定义文档的这些元素能够被每一个人使用并理解，包括机器人。html5

在web无障碍开发领域，给视障用户使用的屏幕阅读器是视障群体访问网络的必备工具，合理的 HTML5 语义化元素，会让屏幕阅读器正确的理解网页的内容，从而以最为合适的方式朗读。git

站在开发者的角度，写出符合 HTML5 语义化的结构，也是显示咱们职业素养的一种方式，最为重要的是这样的代码自带翻译，好比下面的div结构，为了让开发者明白div的含义，咱们必须在class命名上下功夫。程序员

<div class="header">
    <h1>Super duper best blog ever</h1>
    ...
</div>
<div class="main">
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</div>
<div class="footer">
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</div>
复制代码

而若是采用语义化元素，结构一目了然，不论是往后维护仍是交接给他人，都是件轻松的事情。github

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
复制代码

先来回顾一下 HTML5 有哪些元素（根据 MDN 资料整理）web

HTML5 元素大全

文档元素

元素
html	HTML 文档中最外层的元素，也可称为根元素。

文档元数据

元素		元素
head	表示文档的头部	title	用来定义文档的标题
base	为页面上的全部的相对连接规定默认 URL 或默认目标	link	定义文档与外部资源的关系
meta	提供了 HTML 文档的元数据	style	用于表示文档所使用的样式

区块

元素		元素
body	表示文档的内容	article	表示文档、页面、应用或网站中的独立结构
section	表示文档中的一个区域（或节）	nav	描绘一个含有多个超连接的导航栏区域
aside	表示一个和其他页面内容几乎无关的部分	h1-h6	标题(Heading)元素呈现了六个不一样的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低
footer	表示最近一个章节内容或者根节点（sectioning root ）元素的页脚	header	用于展现介绍性内容

内容分组

元素		元素
p	表示文本的一个段落	address	表示其中的内容提供了某我的或某个组织（等等）的联系信息
hr	表示段落级元素之间的主题转换	pre	表示预约义格式文本
blockquote	表示其中的文字是引用内容	ol	表示多个元素的有序列表
ul	表示多个元素的无序列表	li	表示列表里的条目
dl	表示一个包含术语定义以及描述的列表	dt	用于在一个定义列表中声明一个术语
dd	用来指明一个描述列表元素中一个术语的描述	figure	表明一段独立的内容
figcaption	与其相关联的图片的说明/标题	main	呈现了文档的 `<body>` 或应用的主体部分
div	通用型的流内容容器，它应该在没有任何其它语义元素可用时才使用

文本级语义

元素		元素
a	定义超连接，用于从一个页面连接到另外一个页面	em	标记出须要用户着重阅读的内容
strong	表示文本十分重要	small	表示边注释和附属细则，包括版权和法律文本
s	表示再也不相关，或者再也不准确的事情	cite	表示一个做品的引用
q	表示一个封闭的而且是短的行内引用的文本	dfn	表示术语的一个定义
abbr	用于展现缩写	ruby	用来展现东亚文字注音或字符注释
rb	用于分隔`<ruby>`注释的基本文本组件	rt	包含字符的发音
rtc	包含 `<ruby>` 元素中文字的语义注解	rp	用于为那些不能使用 `<ruby>` 元素展现 ruby 注解的浏览器
data	将一个指定内容和机器可读的翻译联系在一块儿	time	用来表示24小时制时间或者公历日期
code	呈现一段计算机代码	var	表示变量的名称，或者由用户提供的值
samp	用于标识计算机程序输出	kbd	表示用户输入
sub	定义了一个下标文本区域	sup	定义了一个上标文本区域
i	用于表现因某些缘由须要区分普通文本的一系列文本	b	用于吸引读者的注意到该元素的内容上
u	表示具备未标注的文本跨度，显示渲染，非文本注释	mark	用来表示上下文的关联性的而突出显示的文字
bdi	隔离可能以不一样方向进行格式化的外部文本	bdo	用于覆盖当前文本的朝向
span	短语内容的通用行内容器，并无任何特殊语义	br	在文本中生成一个换行（回车）符号
wbr	一个文本中的位置，其中浏览器能够选择来换行

修改记录

元素		元素
ins	定义已经被插入文档中的文本	del	表示一些被从文档中删除的文字内容

嵌入内容

元素		元素
picture	经过包含零或多个 `<source>` 元素和一个 `<img>` 元素来为不一样的显示/设备场景提供图像版本	source	为 `<picture>`, `<audio>` 或者 `<video>` 元素指定多个媒体资源
img	表明文档中的一个图像	iframe	表示嵌套的浏览上下文，有效地将另外一个HTML页面嵌入到当前页面中
embed	将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其余交互式内容源（如浏览器插件）提供	object	表示引入一个外部资源，这个资源多是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源
param	为`<object>`元素定义参数	video	用于支持文档内的视频播放
audio	用于在文档中表示音频内容	track	指定计时字幕（或者基于时间的数据）
map	与 `<area>` 属性一块儿使用来定义一个图像映射(一个可点击的连接区域)	area	在图片上定义一个热点区域，能够关联一个超连接

表格数据

元素		元素
table	表示表格数据	caption	展现一个表格的标题
colgroup	用来定义表中的一组列表	col	定义表格中的列，并用于定义全部公共单元格上的公共语义
tbody	表示它们包含表的主体	thead	定义了一组定义表格的列头的行
tfoot	定义了一组表格中各列的汇总行	tr	定义表格中的行
td	定义包含数据的表格的单元格	th	定义表格内的表头单元格

表单

元素		元素
form	示了文档中的一个区域，这个区域包含有交互控制元件	label	表示用户界面中某个元素的说明
input	用于为基于Web的表单建立交互式控件，以便接受来自用户的数据	button	表示一个可点击的按钮
select	表示一个控件，提供一个选项菜单	datalist	包含了一组`<option>`元素，这些元素表示其它表单控件可选值
optgroup	建立包含在一个 `<select>` 元素中的一组选项	option	用于定义在`<select>`, `<optgroup>` 或`<datalist>` 元素中包含的项
textarea	表示一个多行纯文本编辑控件	output	表示计算或用户操做的结果
progress	用来显示一项任务的完成进度	meter	用来显示已知范围的标量值或者分数值
fieldset	用来对表单中的控制元素进行分组	legend	用于表示它的父元素`<fieldset>`的内容的标题

交互元素

元素		元素
details	可建立一个挂件，仅在被切换成展开状态时，它才会显示内含的信息	summary	用做一个`<details>`元素的一个内容的摘要，标题或图例
dialog	表示一个对话框或其余交互式组件

脚本元素

元素		元素
script	用于嵌入或引用可执行脚本	noscript	定义脚本未被执行时的替代内容
template	用于保存客户端内容机制，该内容在加载页面时不会呈现	canvas	用来经过脚本（一般是JavaScript）绘制图形
slot	是 Web Components 技术套件的一部分，是Web组件内的一个占位符

基本布局

<html>
    <head>
        <title>示例页面</title>
    </head>
    <body>
        <div>
            <header>
                <h1>个人网站</h1>
                <nav>
                    <a href="">首页</a>
                    <a href="">文章</a>
                    <a href="">留言</a>
                </nav>
                <aside>
                    <img src="https://via.placeholder.com/30.png/09f/fff" alt="用户头像">
                </aside>
            </header>
            <div>
                <main>
                    <article>
                        <section>
                            <h2>文章标题11111</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                        <section>
                            <h2>文章标题2222</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                        <section>
                            <h2>文章标题3333</h2>
                            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                        </section>
                    </article>
                    <ul>
                        <a href="" title="第1页">1</a>
                        <a href="" title="第2页">2</a>
                        <a href="" title="第3页">3</a>
                    </ul>
                </main>
                <aside>
                    <section>
                        <h2>做者介绍</h2>
                        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
                    </section>
                    <nav>
                        <a href="">HTML</a>
                        <a href="">JS</a>
                        <a href="">CSS</a>
                    </nav>
                </aside>
            </div>
        </div>
        <footer>
            <address>
                xxxx@xxx.com <br />
                <a href="">https://twitter.com/home</a>
            </address>
        </footer>
    </body>
</html>
复制代码

查看示例canvas

article 、 section 、 div 的用法区别

若是元素内容能够分为几个部分的话，应该使用 <article> 而不是 <section>。
若是内容中的几个部分是互相独立的，应该使用 <article> 嵌套，几个部分的内容之间是关联的应该使用 <section>。
不要把 <section> 元素做为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片断仅仅是为了美化样式的时候）。

MacOs VoiceOver 读屏软件对3个元素的朗读方式没有区别，都是直接读取内部的内容。查看示例浏览器

section 、 figure 的用法区别

section 和 figure 有类似的地方，均可以表示一个区域，结构上也类似，均可以有标题和内容，但两个元素的用法是彻底不同的。ruby

section 的内容跟上下文结构存在关联关系，figure 的内容是独立存在的一部分，把 figure 移除不影响主体内容的表达；
section 中存在标题只能在开始的位置，figure 中的标题能够在开头也能够在结尾；

MacOs VoiceOver 读屏软件会把 section 的标题说成“标题”，但对 figure 的标题会说成“文本”。查看示例网络

header 、footer 不止表示页头页尾

一般的用法都是把一个页面的页头用header，页尾用footer来表示，但这并非它们的惟一用法，根据元素的定义，它们表示的是章节或区块的头和尾，严格来讲一个<article> 元素的头部须要用 header 来表示，如：

<article>
    <header>
        <h2>咱们是相亲相爱的一家人</h2>
    </header>
    <p>.....</p>
</article>
复制代码

但以上这种 header 中只有一个 h2 的场景中 header 是能够忽略的。

MacOs VoiceOver 读屏软件对 div 中的 header 会说“横幅”，而对 article 、section 中的 header 会忽略，直接读内部的内容。查看示例

不是全部的导航连接都须要 nav

只用来将一些热门的连接放入 <nav> 导航栏，建议这些连接应该是跟当前页面或站点有较强的关联性。例如 <footer> 元素就经常使用来在页面底部包含一个不经常使用到，不必加入 <nav> 的连接列表。

MacOs VoiceOver 读屏软件遇到 nav 时会先说“导航“，下一步读取内部的内容，最后会说”导航的结尾“。查看示例

address 的内容不仅是地址

HTML <address> 元素表示其中的内容提供了某我的或某个组织的联系信息，包括真实地址、URL、电子邮箱、电话号码、社交媒体帐号、地理坐标等等，经过它会被放到 footer 里，但这并非惟一的用法，在页头 header 中，article 或其它区块中须要显示联系信息的地方均可以使用 address。

MacOs VoiceOver 读屏软件遇到 address 只是看成普通文本朗读。查看示例

em 、 strong 、 b 、 i 、 mark 的用法区别

这几个元素表示的都是对文本内容的强调，但强调的含义是不同的

em 强调的是语句的重心，如“我<em>今天</em>吃薯条了”、“我今天吃<em>薯条</em>了”；
strong 强调的是一句话中重要的必定要看的部分，如"天天早上9点打卡，<strong迟到者罚款1000元</strong>"；
b 强调的是视觉上须要吸引用户来看的内容，相似广告语，对用户来讲并不必定很重要；
i 强调的是一段文本中，某些部分须要跟周边的文本作一些视觉上区别，但不必定是吸引人的；
mark 强调的是上下文的关联性，如搜索关键字；

MacOs VoiceOver 读屏软件遇到这5个元素时只是看成普通文本朗读。查看示例

small 、 s 、 u 还能用吗

这三个元素在 HTML5 以前，都是为了表示明显的排版视觉效果，HTML5 中保留下来并添加了新的语义

small 用来描述对内容的注释，如版权和法律文本等；
s 用来表示再也不相关或再也不准确的事，如以前对某句话的解释，不少年以后已经不适用，但要保留在内容中的时候；
u 用来标记中文文本中的专有名称，或将文本标记为拼写错误；

建议在除了上面提到的几个特殊用途以外，再也不使用这三个元素；

MacOs VoiceOver 读屏软件遇到这3个元素时只是看成普通文本朗读。查看示例

blockquote 、 q 、 cite 都表示引用，如何区分

blockquote 引用的是长文本；
q 引用的是短文本；
cite 引用的是一个做品的名称或连接；

MacOs VoiceOver 读屏软件遇到这3个元素时只是看成普通文本朗读。查看示例

何时使用 div

根据元素的定义，只有在全部 html5 标签都不适用于你想表达的语义时，这时候才使用终极大法 div，从这个角度来讲，目前对 div 元素的滥用实际上是程序员偷懒的一种表现，反正有 div 兜底，也就懒得去思考那些语义元素的区别。

在追求开发效率和作不完的需求面前，使用 div 兜底也是不少人无奈的选择，我以为这个是能够理解，某种程度上也能够接受的，但进一步去想想，你的产品面向的用户也有可能会是存在各类行为障碍的视障、残障人群，他们没法像正常人那样使用你开发的功能，而须要借助相似于屏幕阅读器这样的辅助工具，这时候才是真正考验你的产品是否合格的时候。

咱们作语义化开发，很大程度上就是在帮助更多人的人正常的使用咱们的产品，同时也会让你离专业的程序员更进一步。

I'm Gafish 原创文章，首发于个人博客，内容若有错误，还望指正，谢谢您的阅读。