html语义化标签

2021-10-28

 

什么是语义元素?

 

语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

语义化元素的定义

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。

为什么要语义化?

 

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

 

b. 有利于 SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确

 

定上下文和各个关键字的权重

 

c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

 

d. 便于团队开发和维护,语义化更具可读性,遵循 W3C 标准的团队都遵循这个标准,可以减少差

 

异化
HTML5常用语义元素
大约有100多个HTML语义元素可供选择,以下是常用的语义元素:
结构体 文本 一致
  • header
  • h1
  • h2
  • h3
  • nav
  • footer
  • article
  • section
  • p
  • ul
  • ol
  • li
  • blockquote
  • a
  • strong
  • em
  • q
  • abbr
  • small