一,用于站点中的logo提高网页排名
<header>
<img src="log.png" alt="xioami">
<h1 style="display:none">xiaomi</h1>
</header>
注意上方的h1是隐藏了,其中图片描述和h1标签描述文本内容相同,那么我想说为什么要添加一个看不见的h1标签呢?
原因有很多,
- 1.其实header元素中应包含某个级别的标题,这样屏幕阅读器能无障碍的阅读
- 2.因为他们会从一个标题跳到另一个标题,为页面建立标题结构。
- 3.如果在页眉中使用h1元素做标题,那么像其他区块如articles,about us就得用h2作标题
上面的做法就是把图片作为了标题,也是提高了网页的检索
二,为什么一个页面只能有一个一级标题
根据HTML的说法,页面中可以有多个一级标题,但很多开发人员会倾向使用只用一个一级标题,因为这样可以明确告诉搜索引擎网站中的内容。当然你也可以采用只将站点顶部的标题设置为h1元素,其他区块设置为h2标题
三,文档纲要
也就是你网页的结构
要知道自己网页的纲要是什么样子,可以想象把所有内容都剥离,只剩下标号为<h1><h2><h3>的文本
HTML5中role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,如我们的一个轮播图可以使用role="banner"