用最恰当的标签来标记内容 语义化的 HTML 文档，不关心内容的显示效果。
HTML语义化的作用
对于人员
- 语义化 HTML 会使 HTML 结构变的清晰，有利于维护代码和添加样式。
- 便于团队开发和维护，语义化更具可读性，减少差异化。
对于设备
- 在没有 CSS 样式的条件下，能很好地呈现出内容结构、代码结构。
- 方便其他设备解析（屏幕阅读器和盲人阅读器等）以语义的方式来渲染网页。
- 提升搜索引擎优化的效果，和搜索引擎建立良好沟通。
- 通常语义化HTML会使代码变的更少，使页面加载速度更快。
HTML语义化tips
- 尽可能少的使用无语义的标签 div 和 span；
- 在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签：b、font、u等，尽可能选用css设置。
- 强调文本需包含在 strong 或者 em 标签中（用CSS优选级最高），strong加粗（拒绝b），em斜体（拒绝i）；
- 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td；
- 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
- 每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。
- 语义化当然并不仅仅在 HTML 中有用处，写 CSS 的时候，写 JavaScript 代码的时候，都应该采用有语义的类名和变量，并且永远不要在这些地方使用拼音
语义化标签一览
- <main> 规定文章的主要内容，一个文档中只能有一个<main>，并且其不能是<article>,<aside>,<footer>,<header>,<nav>的后代
- <header> 文档的头部区域，用于定义介绍展示区域
- <nav> 文档的导航链接部分
- <section> 文档中的章节，可以存放文档的章节、页眉、页脚等部分
- <article> 文档中独立完整的，可以被外部引用的内容，可以是一篇文章，一个帖子或者是用户的评论等。可以嵌套使用
- <aside> 所处内容之外的内容。一般定义文章的侧边栏
- <footer> 文档底部区域。一般包括文档作者，著作权信息，联系方式等
- <time> 时间和日期，以机器可读的方式对日期或时间进行编码这样一些软件可以把用户生日或者时间自动添加到日程表中，标签不会在浏览器中呈现任何效果。
- <mark> 被标记的文本【5】
- <figure> 独立的内容，包括图片、图表和代码等。此标签的内容应该与主内容相关。
- <figcaption> 表示<figure>标签内元素的标题。图片的题注。
- <details> 用于描述文档某个部分的细节。用户点击标题时，弹出details的主体
- <summary>定义 <details> 元素的可见标题。
*以上均为HTML5新的语义化元素【5】
- <small> 被包含的内容呈现小号字体
- <cite> 表示所包含的文本是对某个参考文献的引用。一般为书籍、杂志、期刊或者作品的名字，斜体显示。
- <q> 短引用
- <blockquote> 长引用，定义引用块。被引用的部分前后会添加换行，并且增加外边距
- <abbr> 标记一个缩写，在此标签的title属性中注明该缩写的全称，当鼠标指针移动到abbr元素上时，会显示该缩写的全称。
- <dfn> 定义一个术语，斜体显示
- <address> 文档或文章作者的联系信息。如果此标签位于<body>标签内部，则表示文章作者的信息；如果位于<body>标签的外部，则表示文档作者的信息。此标签内的内容将会斜体显示。
- <del> 文档中已经被删除的文本。此标签内的文本中间会有横线
- <ins> 已经被插入文档中的文本。一般与<del>配合使用
- <code> 定义一段代码
- <meter> 定义已知范围内或分数值内的数据，以类似进度条的形式展现
- <progress> 用来显示任务的进度
- <audio> 定义一个音频
- <video> 定义一个视频
- <canvas> 定义图形，图表或者其它图像。此标签只是一个容器，需要用脚本语言来绘制具体图形。
