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:表示对特殊术语的定义