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:表示对特殊术语的定义
    原文作者:nosTT
    原文地址: https://segmentfault.com/a/1190000019732149
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞