怎样理解 HTML 语义化

HTML 语义化是在 HTML5 里加入的一个概念。

为什么要加入语义化？我们先看看没有语义化的 HTML 文档是怎么写的。

* <div id="header">
* <div id="nav">
* <div id="footer">

<div> 这个标签没有给文档带来任何语义，我不知道它包裹的内容是什么东西，只能通过后面的 id 才能知道。慢慢的，基本上所有开发者都这么写，那为什么不干脆把 <div id="header"> 直接改成一个 <header> 标签呢？这样岂不是简洁方便？

那语义化有什么用呢？

1. 在没有 CSS 的情况下，页面也能呈现出很好的内容结构、代码结构，祼奔时好看
2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以有意义的方式来渲染网页
5. 便于团队开发和维护。语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

总结成一句话：语义化的目的就是尽量减少使用无语义的 <div> 和 <span> ，用其他语义化的标签来代替，以方便机器和人的阅读、理解。