web前端:使用"h1"-"h6"标签让页面内容层次鲜明

本文强调了在web前端中正确使用h1到h6标题标签的重要性,以实现内容的语义化和层次结构。每个页面应仅有一个h1标签,用于概述主要内容,而其他标题标签则用于构建清晰的内容大纲,方便屏幕阅读器用户和搜索引擎理解。文章通过活动策划方案的示例,展示了如何正确使用标题标签来组织不同级别的信息。
摘要由CSDN通过智能技术生成

标题标签(包括h1到h6)有很高的使用率,它们用于描述内容的主题。在屏幕阅读器中,用户为更快地了解页面内容,可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化,不应仅仅为了获得不同字号而使用不同级别的标题标签。

语义化:标签名能准确地表达它所含内容的信息类型。

对于一篇含有引言、正文、结论的论文,把结论作为引言的一部分没有任何意义,因为结论应该是独立的章节。类似地,页面中的标题标签也应该是有序的,并且能表明内容的层次关系。

在使用中,相同级别(或者更高级别)的标题标签用于开启新的章节,低一级别的标题标签用于开启上一级标题标签的子小节。

举个例子:一个h2标签后紧跟若干h4标签的页面,会让使用屏幕阅读器的用户感到困惑。尽管在页面中,使用这 6
个标题标签可以控制内容的的视觉样式,但我们应该使用 CSS 来调整。

最后一点,每个页面应该只有一个h1标签,用来说明页面主要内容。h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。

<h1>-<h5>标签层级示例:

<h1>2019年5月活动策划方案</h1> //每个页面应该只有一个h1标签;

<h2>1 活动流程</h2> //作为“h1”标签下的独立段落标题

<h3>1.1 签到</h3> // 作为“h2”标签下的独立段落标题

<h4>1.1.1 签名</h4> //作为“h3”标签下的独立段落标题

<h5>1.1.1.1 发放签名笔 </h5> //作为“h4”标签下的独立段落标题

&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值