HTML 语义化

语义化的含义就是用正确的标签做正确的事情，HTML 语义化就是让页面的内容结构化，它有如下优点：

• 便于对浏览器、搜索引擎解析；
• 便于盲人浏览网页；
• 便于阅读源代码的人对网站进行分开，维护和理解；

简单来说，能用 <header>、<footer> 等 H5 新标签的就不用 <div class="header">
不要使用 <div> 来存放段落等……

文档章节类HTML标签

文档章节类HTML标签能体现网页的结构，因此也拥有最多的语义化HTML标签。

<article> / <section>
这俩标签的语义比较相像，都是表示文档中的一个独立区域（独立单元）
其中还可以从结构上拆分成<header> / <footer>等部分。
这俩标签比较起来的话，<article>比<section>要大一级

<article>中可以包含<section>，举个例子：一篇博客文章的下方或侧方一般会有“相关文章”的列表
那么，这一整块HTML就可以用<article>给包起来，而“相关文章”的那一小块HTML则可以用section来表示
再举个例子，比如说文章的“版权信息”，也可以用section来表示

<article>中可包含<article>，比如说：一篇文章以及这篇文章的用户评论
整块HTML可以用<article>来包起来，而用户评论从逻辑分析起来也是从属于这篇文章的
因此也可以用<article>包起来并归到文章的<article>之下

<section>之下不能再放<section>了，这从侧面表示这是最小一级的独立单元标签
<article>一般用于“详细内容”，因此一般一个页面只含有一个顶级的<article>
而相反，<section>的用途更广泛一些，除却“详细内容”外都可以用<section>来进行包裹
比如说：网站首页上，可以利用<section>来展示不同分类/栏目的文章列表


<header> / <footer>
这俩标签性质比较类似，所以放到一起来比较：一个放头部，一个放底部
乍一看，觉得这俩标签就是网页的页头（一般包含网站LOGO、BANNER、顶级导航等）
页尾（网站本身的信息，包括版权信息、联系方式等），但实际上这俩标签的应用范围远不止于此
完全可以作为其它独立单元（<article>/<section>/<aside>/<nav>等）中的一部分
比如说下面的这个文章栏目，红色框住的部分可以用<header>（可以考虑里面包含个<nav>）
而蓝色框住的部分就可以用<footer>了

又比如说一篇文章，文章的标题/作者/发布时间等信息可以使用<header>
而文章的版权信息、参考文章列表等则可以使用<footer>


<main>
既然提到<header> / <footer>，就不得不提<main>了。<main>望文生义，就是整个页面的主体部分
跟<header> / <footer>不一样，一个页面只能有一个<main>，不能放进其它独立单元里
<main>仅包括一个页面最核心的内容，比如说一篇文章，其它旁枝末节，比如搜索栏、菜单等内容不应被包含其中

<aside>
<aside>一般表示页面主体内容以外的侧边栏，比如上文提到的“相关文章”，又或者是“作者个人资料”
如果是这些情况的话，一般会被包含在<article>中
另外，<aside>也可以表示一些工具功能，比如说“分享文章”、“回到顶部”等功能

<nav>
<nav>表示网站的导航，但不一定所有的导航都需要用<nav>来实现，建议仅用来实现比较重要的导航
例如网页页脚的链接列表，直接用<footer>即可。另外，每个页面可以有多个<nav>

<h1> - <h6>
<h1> - <h6>表示标题，共有6级，其中<h1>的权重最高，<h6>的权重最低，其它的则依次递减
一般来说，<h1>需要分配给网站名/LOGO，如果有设置二级域名，也可以分配给分站的网站名/LOGO。
对于搜索引擎来说，<h1> - <h3>是了解网页的重要途径，因此一定要恰当地分配
比如：给文章的标题用上<h2>，给文章中的各个小标题用上<h3>

文本级别语义HTML标签

<a>
<a>表示一个通向其它页面或当前页面其它位置的入口，这是一个历史悠久的语义化标签，同时也是搜索引擎的基础，想必大家都很熟悉了，因此这里不作详述。

<p>
<p>表示一个段落，这也是一个悠久的标签了。从语义上来说，我更倾向于使用<p>来表示一段纯文本，而不是利用<p>来呈现某个样式。

<em> / <strong>
这俩标签都是用来强调某个词/句，从语气上来说，<strong>比<em>的语气更重，也就起到更强的强调作用。
据说，这俩标签是用来在语义上取代<i>和<b>。那么，<em>跟<i>，有什么不一样呢？
答案是，<i>现在已经不用来表示“强调”，而仅仅只是把一些专有名词（比如人名、书名等）跟普通的字词区分开来。
<b>的情况与<i>类似，也不再表示强调了，从某种程度上来说已经失去语义了，仅仅作为完成css样式的辅助标签。

<time>
<time>用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。
对于<time>，尽量用机器能识别的时间格式，而不要用一些模糊的表达，比如说“一小时前”、“两天前”等。

组合型HTML标签

<figure>
<figure>表示一段富文本，可以是一个文章插图、一段代码、一个表格
通常搭配<figcaption>来表述这段富文本的描述/标题，当然，一个<figure>下只能有一个<figcaption>。

结构化数据

这一块在SEO领域相当重要，根据目前已经拟定好的一些规则，你可以明确地标明某页面主体的各个属性。
举个例子：一个商品的详细信息页，用普通的语义化来表示，大概只有商品的名称可以进搜索引擎的法眼；但自从有了结构化数据，可以通过某些标签及属性，指明商品的价格、供应商、实物图等内容；搜索引擎获取到该商品页的各个属性后，会在搜索结果页面直接呈现出来，另外在排名上也会有所偏重。