语义化的HTML

为什么要语义化

在 uni-app 等移动开发框架上，如果做过项目，就可以发现一个很常见的问题：整个页面几乎全是 <view>`` 这样的标签。

同样的，在网页端开发上，也会有光使用 div 来构建整个页面的功能：

`<div class="html">`
  ...
`</div>`
`<div class="panel">`
  `<div class="title">``</div>`
  `<div class="content">``</div>`
`</div>`
`<div class="footer">`
  ...
`</div>`

这在 HTML5 出来之前是非常普遍的。但是，这样也出现了不少的问题：

1. 不易读，也不好维护。有人说，除了使用div，还可以通过 class 或 id 属性来标识。但是反标签仍然是div，尤其是当 div 特别多的时候，阅读和维护会相对费力。
2. 脱离CSS后就难以表明内容结构。例如，对于搜索引擎的爬虫来说，如果整个页面都是div结构，那么它将难以分辨哪个是整个页面最重要的内容。
3. 方便特殊设备的解析。例如针对残障人士的设备，使用语义化的HTML可以帮助设备更好地判断网页的内容；对于浏览器的阅读模式，语义化的HTML也可以更好地提取文本内容。
4. 便于浏览器未来版本的特殊功能。语义化的HTML可以帮助浏览器识别一些内容，进而提供对于的功能。例如自动填充。

HTML 语义化标签介绍

• <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。

• <ul>：无序列表。

• <ol>：有序列表。

• <header>：整个页面，或者文章的头部。但一般用于页面的头部。

• <nav>：标记导航。一般只用于页面的导航栏。

• <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

• <article>：定义外部的内容，其中的内容独立于文档的其余部分。

• <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

• <aside>：定义其主要内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

• <footer>：整个页面，或者文章的页脚。通常只包含版权、来源信息、法律限制等等之类的文本或链接信息，其他的部分可以使用 div 代替。

• <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

• <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

• <em>：将其中的文本表示为强调的内容，表现为斜体。

• <mark>：使用黄色突出显示部分文本。

• <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

• <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

• <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

• <blockquote>：定义块引用，块引用拥有它们自己的空间。

• <q>：短的引述（跨浏览器问题，尽量避免使用）。

• <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

• <abbr>：简称或缩写。

• <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

• <del>：移除的内容。

• <ins>：添加的内容。

• <code>：标记代码。

• <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）

• <progress>：定义运行中的进度（进程）。

容易混淆的一些标签

1. i: 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

2. em: 表达对文本内容的强调,其强调位置的不同往往带来语义的变化。

3. strong: 表示强调带有着重意味，意在传达内容的重要性（需要尽快被看到）、严重性或者紧急性

实践上的一些规则

• 尽量少用无语义的标签 div 和 span
• 尽量少用纯样式标签 b、font、u，应当使用CSS代替这些标签
• 强调文本尽量使用 strong 和 em
• 对于表格，标题要用 caption，表头用 thead ，主体部分用 tbody 包围，尾部用 tfoot 包围
• 对于表格，行列头 th 应该与普通的单元格 td 分开
• 表单域使用 fieldset 标签包起来，并使用 legend 标签说明用处
• 每个 input 标签应当对应一个 label 标签，并在 input 设置 id，label 设置 for 。这样，每个表单项便会有对应的说明。
• 对于图片 img 元素，应当增加一个 alt 属性。这个属性包含一条对图像的文本描述。尽管不是强制的，但这对于使用阅读器的人士是十分便利的。
• 不要滥用 h1-h6 这样的标签。如果仅仅是想需要一个大的字号，请使用 CSS 代替。

参考

1. HTML 语义化是什么 https://www.jianshu.com/p/35de4476fe27
2. 初探：HTML语义化 https://zhuanlan.zhihu.com/p/32570423
3. MDN：https://developer.mozilla.org/