HTML 5 的推行已经有好长一段时间了，自己由于兴趣爱好的原因利用闲暇时间也学习了一些关于 HTML 5 的知识。由于自己非科班出身，知识结构可能略显零碎，行文语义可能不是那么规范，希望各位不要见怪。以下内容是我仅作为个人学习道路上的一个总结，如有错误万望指正。

在说明 HTML 5 语义化之前，我们需要先了解，一份网页文件的主体架构是通过 HTML 标记语言搭建起来的。表面上看 HTML 5 仅仅是比之前版本的 HTML 规范多了几个新的标签，同时又删除掉了几个标签，在编辑 HTML 文件时并无什么区别，我们似乎也可以按照原来的规范编辑出一份表面上看起来一模一样的文档。然而其内里真的是这样吗？

HTML 5 之前，我们在编辑网页文件的时候基本上说“DIV+CSS”。似乎一谈到 HTML ，最容易让人们想到的就是 DIV。诚然 DIV 标签在对 HTML 文档切割排版上堪称一大利器，但是对于一份完整的文章来讲，仅仅使用 DIV ，计算机并不能准确理解网页文件中那一部分是标题，那一部分是段落，那一部分是图片……，虽然之前的版本也有一些诸如 h 、p 、img 、table 等标签，但是这些标签使用比较混乱，而且多带有一定预制的样式，所以并未实现语义的明确划分。而 HTML 5 所产生的目的既是：将元素的语义与其内容的呈现样式相分离。使其仅仅作为一份阐释用户文档中各个部分含义的一门标记性语言，这样做有以下几点好处：

  • 利于 SEO，搜索引擎可根据文档各个标记的含义充分理解文档以确定关键字的权重；
  • 利于代码维护，一份高可读性的文档对于减轻维护人员工作量的效果是不言而喻的；
  • 利于其他语言、设备解析，例如语音识别、图像识别、盲人阅读器等；
  • 当然还有很多其他的用处……

下面是一些个人感觉最能体现 HTML 5 语义化的地方，大家可以体会一下：

<nav>：这是一个导航。

<article>：这是一篇文档。

<section>：这是文档中的一个小节。

<aside>：这是独立于文档以外的内容。

<blockquote>：这是文档中的大段引用。

<main>：这是文档的主体内容。

<header>：这是文档或小节的页眉。

<footer>：这是文档或小节的的页脚。

<title>：这是文档的标题。

<caption>：这是表格的标题

<figcaption>：这是 figure 元素的标题。

<img>：这是一个图像。

<canvas>：这是一个图形。

<audio>：这是一段声音。

<video>：这是一段视频。

更多标签请参阅： HTML标签整理（包含属性、描述，中英文对照）

参考文档：https://www.w3.org/TR/html5/dom.html#dom