一、HTML5语义化标签 标签 描述
<article>   页面独立的内容区域。  
<aside>   页面的侧边栏内容。  
<bdi>   允许您设置一段文本，使其脱离其父元素的文本方向设置。  
<command>   命令按钮，比如单选按钮、复选框或按钮  
<details>   用于描述文档或文档某个部分的细节  
<dialog>   对话框，比如提示框  
<summary>   标签包含 details 元素的标题  
<figure>   规定独立的流内容（图像、图表、照片、代码等等）。  
<figcaption>   <figure> 元素的标题  
<footer>   section 或 document 的页脚。  
<header>   文档的头部区域  
<mark>   带有记号的文本。  
<meter>   度量衡。仅用于已知最大和最小值的度量。  
<nav>   导航链接的部分。  
<progress>   任何类型的任务的进度。  
<ruby>   ruby 注释（中文注音或字符）。  
<rt>   字符（中文注音或字符）的解释或发音。  
<rp>   在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。  
<section>   文档中的节（section、区段）。  
<time>   日期或时间。  
<wbr>   规定在文本中的何处适合添加换行符。  
二、语义化标签的使用 2.1 <title></title> 页面主要内容

（1）<title> 标签的特点是简短、描述性、唯一，用于提升搜索引擎排名。

（2）搜索引擎会把 title 作为判断页面主要内容的指标，有效的 title 应该包含几个与页面内容密切相关的关键字，建议将 title 的核心内容写在前 60 个字符。

2.2 <header></header> 页眉

（1）HTML5 规范描述为“一组解释性或导航型性的条目”，通常有网站标志、主导航、全站链接以及搜索框。

2.3 <nav></nav> 导航

（1）页面的导航链接区域，用于定义页面的主要导航部分。

（2）导航通常使用 <ul> 无序列表。若是面包屑链接，则使用 <ol> 有序列表。

（3）HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。

2.4 <main></main> 主要内容

（1）网站页面的主要内容，并且一个页面只能使用一次 <main> 标签。

（2）若是 web 应用，则包含其主要功能。

2.5 <article></article> 文章标记

（1）表示的是一个文档、页面、应用或是网站中的一个独立的容器。

（2）HTML5 规范声明 <article> 标签适用于自包含的窗口小部件:股票行情，计算器，钟表，天气窗口小部件等。

（3）<article>这个标签可以嵌套使用，但是他们必须是部分与整体的关系。

2.6 <section></section> 区块

（1）一组相似主题的内容，一般会有一个标题。

（2）实现比如文章的章节，标签式对话框中的各种标签页等功能。

2.7 <aside></aside> 侧边栏

（1）表示一部分内容与页面的主体并没有较大的关系，并且可以独立存在。

（2）实现比如升式引用、侧边栏、相关文章的链接、广告、友情链接等功能。

2.8 <footer></footer> 页脚

（1）和 <header> 标签对应，可以实现比如附录、索引、版权页、许可协议等功能。

2.9 <cite></cite> 引用

（1）表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

（2）按照惯例，引用的文本将以斜体显示。

（3）用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。

2.10 <blockquote></blockquote> 块引用