HTML: 语义化

历史

1. 最开始后面 PHP 程序员写前端布局的时候，只使用 table 来布局，但是 table 本应该被用来在表格里显示数据，这就违反了 HTML 语义化。
2. 后来出现了较为简单的前端布局，主要是用 div + css 来布局，CSS 方面主要使用 float 和 position 来决定元素的位置，这样稍微符合了语义化。
3. 现在前端变得更加专业了，要追求的是使用更合适的 HTML 标签放在 HTML 文档里，这可以使用 HTML 文档可读性更高，同时更容易维护。

有什么用

学习一个知识的时候最关键就是看有什么用，HTML 语义化有下面的优点：

可访问性

这个是专门指残疾人的无障碍阅读的，因为现在电脑上一般都会有听说读功能，它可以根据网页的结构读出网页的内容，HTML 语义化可以使得这个功能更容易正确读给残疾人听。

可检索性

像 Google 这种搜索引擎或者一般的 Python 爬虫，本质上也是都 HTML 进行分析的，如果全用 div，那么就要自定义 CSS 类，如

<div class="="aWebsiteFooter"></div >

<div class="="bWebsiteFooter"></div >

<div class="="cWebsiteFooter"></div >

这样是非常不利于检索的，如果算法差了点，这个就被认为是普通的 div 而不是脚注了。

国际化

当我们写好一个网站后，有可能需要别人来翻译这个网站。HTML 语义化可能使得别人更容易阅读自己的 HTML 文档。

可读性

如果大家都使用合适的 HTML 元素，别的开发者就很容易立马上手你的 HTML 文档，更容易维护。这也可以避免离职后的那个拼盘侠不会干你。

一些不符合 HTML 语义化的例子

下面有一些不符合 HTML 语义化的例子，你可以看看你中了几个。

1. 使用 blockquote 使得文本缩进，如果是代码应该使用 pre 或者 code 标签，或者使用 margin, padding 来缩进。
2. 使用 h1~h6 来控制文本大小，正确应该用 font-size。
3. 使用 p 来获得上下空白，正确应该用 padding 或者 margin。

总结

HTML 语义化本质上就是使用更符合语境的标签，而不要全都 div。