几个 HTML 标签的用法

上周我给开发团队做了一次 HTML 入门的培训. 因为是入门, 那都是很基础的内容, 包括对 HTML, XHTML 和 HTML5 的介绍和一些常用标签的说明. 本来以为是一个简单的叙述过程, 但在准备材料的过程中发现一些标签的用法我并不那么熟悉, 却一直用得那么理所当然.

标题标签包括 h1 到 h6, 我们常用 h1, h2, h3, 但极少用到 h4, h5 和 h6.

在一个合理语义化, 敢于裸奔 (不使用 CSS 进行布局) 的网站里面, 标题标签除了语义化, 还带有一些样式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其实没有太大区别, 反正外观也能随便套.

作为标题标签, 有更牛逼的功能, 标题元素意味着页面上高权值的关键词, 所以 h1, h2 和 h3 被频繁利用来为关键词加权. 而 h4, h5 和 h6 的权值并不高, 甚至比不上 strong 和 em, 所以很少被用到. 估计他们权限层次如下:

h1 > h2 > h3 > strong > em > h4 > h5 > h6

我本来认为 thead 作为表头用来放表格标题单元, 如 th; 而 tbody 是放表格内容, tfoot 是表格说明. 其实我的理解不太正确, 这几个标签其实是可有可无的.

因为浏览器一般需要整个表格下载完才开始显示, 在以 table 为布局的时代影响用户阅读. 所以这几个标签是用来将表格划分成多个表格部分, 下载完成部分即可显示. 另外, 也为了打印长表格时的时候表头和表尾可以在每一页出现.

关于 table 标签, 这里有篇文章写得很详细: 《标准化 - 表格》(原文: 《Bring on the tables》)

不是 input type="button" 可以理解, 因为低版本的 IE 上看不到 hover 效果. 但为什么或者 span, 而是 a 标签? a 标签做成按钮, 不带 href, 这种做法是对的吗? 我还没想好, 以前这么做就像是条件反射一样.

很多人以为 b 标签和 i 标签的命运和 u 标签一样, 被 W3C 归类为 "不推荐使用标签". 但 HTML5 规范中, 这两个标签还是推荐使用的. 这一点我一直清楚, 还跟朋友为这事争执过. 但我一直不明白 HTML5 中如何定义它们.

事实上, HTML5 对这两个标签进行了重新的定义. 比如 i 标签, 更多应该用在术语, 书籍和引用他人说过的话等场景上. 这里有个文章说到了这一点: 《Using <b> and <i> elements》

hr 是一根线, 分割内容的横线. 我一直认为 hr 是个蹩脚的东西, 画出来的线用 CSS 好不好处理, 毫无用处. 其实 hr 在语义上是文章的分割线, 将文章上下文完全划分开, 让它们毫无关系.

其作用就像很多日志类博客文章里面出现的下图的分割线, 只不过 hr 在语义上也是如此, 爬虫也能理解.

文章中的分割线

div, section 和 article 有很多相关说明, 我能理解它们的含义, 但我还是不能理解什么场景下更应该使用 section, 还有就是 section 和 article 的嵌套关系应该怎样?

为此我在知乎上提问过, 回答都不难以, 求追加解答.
http://www.zhihu.com/question/20227599

这次课程的内容好像很简单, 但整理资料的过程发现自己对一些问题其实没有那么自信, 平时用起来手到擒来的感觉究竟是条件反射还是无奈之举, 连我自己都迷糊了. 虽说是给别人培训, 自己也收获了不少, 感觉挺好的.