HTML5中h1标签的优化用法

一,用于站点中的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"

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容