HTML语义化

什么是HTML语义化呢？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读，写出优雅的代码的同时让浏览器的爬虫更好的解析

语义化标签的优势：

1）代码结构清晰，方便阅读

2）有利于搜索引擎优化

3）方便其他设备解析，以语义的方式来渲染网页

选择标签写代码时候需要遵循的：

1、尽可能少的使用无语义的标签div和span

2、在语义不明显时，既可以使用div或者p时，尽量用p（因为p在默认情况下有上下间距，对兼容特殊终端有利）

3、不要使用纯样式标签，如：b、font、u等，改用css设置

4、需要强调的文本，可以包含在strong或者em标签中。strong默认样式是加粗（不要用b），em是斜体（不用i）

5、使用表格时，标题要用caption，表头用thead（表头和一般单元格要区分开，表头用th，单元格用td）

6、表单域要用fieldset标签包起来，并用legend标签说明表单的用途

7、每个input标签对应的说明文本都需要使用label标签

常见的语义化标签：

<title>    页面主体内容
<h1-h6>    分级标题
<header>    通常包括网站标志、主导航、全站链接以及搜索框
<nav>    标记导航
<main>    页面主要内容，一个页面只能使用一次
<article>    定义外部的内容，其中的内容独立于文档的其余部分
<section>   定义文档中的节（section、区段）
<aside>    定义其所处内容之外的内容
<footer>    定义页脚
<small>    呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权
<strong>    用于强调文本，但它强调的程度更强一些
<em>    将其中的文本表示为强调的内容，表现为斜体
<figure>    规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>    定义 figure 元素的标题
<cite>    表示所包含的文本对某个参考文献的引用
<time>    datetime属性遵循特定格式
<address>    作者、相关人士或组织的联系信息
<progress>    定义运行中的进度