HTML语义化标签相关属性介绍

Published on
Reading time
4 min read
Authors
语义化HTML标签

什么是语义化标签

语义化标签是指在HTML中使用具有语义的标签来描述页面的结构。这些标签不仅提供了更好的可读性和可维护性，还有助于搜索引擎更好地理解页面的内容。

我认为的好处

优先级从上到下，我认为语义化标签的好处有以下几点：

  • 更好的SEO：搜索引擎更容易理解页面的内容，从而提高页面的排名。
  • 更好的可访问性：屏幕阅读器和其他辅助技术更容易理解页面的结构。(国内的大环境很不注重无障碍以及可访问性)
  • 更好的可读性：开发人员和维护人员更容易理解页面的结构。
  • 更好的可维护性：更具语义的标签使代码更易于维护和扩展。(这个仁者见仁智者见智吧)

常用的语义化标签

结构标签

标签名描述使用
header定义文档的页眉网站的页眉部分
nav定义导航链接的容器网站的导航链接
main定义文档的主要内容网站的主要内容
article定义独立的内容块网站的文章内容
section定义文档中的节网站的章节内容
aside定义页面内容之外的内容网站的侧边栏内容
footer定义文档的页脚网站的页脚部分

内容相关

标签&属性描述使用
h1-h6定义标题网站的标题,h1一个页面最多一个
mark定义带有记号的文本网站的高亮文本
time定义日期/时间网站的日期和时间
abbr定义缩写网站的缩写
code定义计算机代码网站的代码块
pre定义预格式化的文本网站的预格式化文本
q定义短的引用网站的短引用,长的引用还是要用blockquote
cite定义引用网站的引用
blockquote定义长的引用网站的长引用
kbd定义键盘文本键盘按钮
address定义地址地址相关
bdi定义文本的方向当你不知道对方语言到底是从左到右还是从右到左,这个标签非常有用
time定义日期/时间网站的日期和时间