个人HTML会说话——从实用出发，谈谈HTML的语义化

语义化HTML是什么？有什么意义？

所谓语义化HTML，就是从代码层次表达程序员的想法、思路，同时描绘出网站页面的结构：

1. 与同为人类的程序员沟通，帮助程序员快速掌握当前代码。这一点实际上是能够经过注释来实现的，不过用上语义化HTML多多少少能够省点注释，哈哈。
2. 与同为代码构筑的系统（例如残疾人士阅读器以及搜索引擎爬虫等）沟通，帮助其快速、准确达到目的。因为这类系统与人类的智能相比起来实在有限，所以须要协定好经过什么样的方式来进行沟通，而W3C的决议就是语义化HTML的标准了。

最近在恶补前端基础时，碰到这一个知识点，发现市面上的资料大多杂乱，并且每每只能意会而不能言传，很难找到其中有什么实用的价值，所以特写此文，不妄求全面剖析，只求实用至上。

文档章节类HTML标签

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

<article> / <section>

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

1. <article>中能够包含<section>，举个例子：一篇博客文章的下方或侧方通常会有“相关文章”的列表，那么，这一整块HTML就能够用<article>给包起来，而“相关文章”的那一小块HTML则能够用section来表示；再举个例子，好比说文章的“版权信息”，也能够用section来表示。
2. <article>中可包含<article>，好比说：一篇文章以及这篇文章的用户评论，整块HTML能够用<article>来包起来，而用户评论从逻辑分析起来也是从属于这篇文章的，所以也能够用<article>包起来并归到文章的<article>之下。
3. <section>之下不能再放<section>了，这从侧面表示这是最小一级的独立单元标签。
4. <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标签

文本级别语义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>。 我却是想到了<figure>的一个典型运用，那就是瀑布流文块：

结构化数据

这一块在SEO领域至关重要，根据目前已经拟定好的一些规则，你能够明确地标明某页面主体的各个属性。 举个例子：一个商品的详细信息页，用普通的语义化来表示，大概只有商品的名称能够进搜索引擎的法眼；但自从有告终构化数据，能够经过某些标签及属性，指明商品的价格、供应商、实物图等内容；搜索引擎获取到该商品页的各个属性后，会在搜索结果页面直接呈现出来，另外在排名上也会有所偏重。 这方面的内容不少，建议仍是参考各大搜索引擎的优化指南，毕竟各搜索引擎对这结构化数据的支持程度不同。这里放出Google支持的结构化数据的官网：http://schema.org/