HTML语义化

html语义化的好处

• 有利于SEO，搜索引擎根据标签来确认上下文和各个关键字的权重。
• 有利于阅读，在样式丢失的情况下也能呈现清晰的结构。
• 有利于机器解析，盲人阅读器等根据语义解析
• 有利于开发和维护，语义化使html代码结构更清晰，更具可读性

---

常见的语义化标签:

• em：斜体，强调语气
• aside：侧边栏，具有导航性质的模块内容
• nav：一般为给当前页面内容提供导航链接、目录、索引等
• article：表示独立的结构，或者可复用的内容
• abbr：表示缩写，title属性为完整内容
• header：通常表示网页的头部内容，包括搜索框、logo、标题组等
• hgroup：对网页或者区段（section）的标题组合
• hr：表示故事走向的转换或者话题的转换时的水平分割线，如果是普通的水平线页面效果，用css呈现
• blockquote：段落级的引述，内部包含左右缩进和内边距
• q：表示行内应用，对内容自动加引号
• cite：表示作品名的引述
• main：表示页面的主要内容，一个页面只能出现一次
• footer：表示页面或文档的页脚，一般包含作者、版权、联系地址等
• figure：表示与主文章相关的图像、插图、图表、代码片段等
• figcaption：表示figure的说明
• strong：表示强调，和em的差别有：em表现为斜体，strong为加粗，em为强调内容，strong为语气更强的强调内容
• pre：表示内容我们已经经过特殊排版了，不希望浏览器帮我们自动排版
• samp：表示实例输出
• code：表示内容为代码
• time：表示日期或时间，有datetime属性表示内容的日期或者时间，如果没写datetime，在内容中一定要有日期时间
• dfn：表示对特殊术语的定义