【前端】语义化标签详解

RogerQianpeng 2022-05-14 14:24:18 阅读数:485

前端详解标签语义

1 语义,语义化,HTML

HTML描述的是网页内容的含义,即,语义。
语义化HTML,就是用最恰当的HTML元素,标记内容。
语义化标签,也即,有含义的标签。

2 意义

  1. 提升可访问性和互操作性(内容对于借助辅助技术的残障访问者是可访问的,同时对于台式机、手机、平板电脑及其他设备上的浏览器都是可访问的)。
  2. 提升搜索引擎优化(SEO)的效果。
  3. 使维护代码和添加样式变得容易。
  4. (通常)使代码更少,页面加载更快。

3 常用语义化标签

  • h1~h6:heading,标题
  • p:paragraph,段落
  • em:empasis,强调
  • a:anchor,锚,链接
  • header:页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框
  • nav:页面的导航链接部分区域
  • main:页面的主要内容,一个页面只能使用一次。
  • article:页面独立的内容,它可以有自己的header、footer、sections等
  • section:标记文档的各个部分,例如长表单文章的章节或主要部分
  • aside:侧边栏
  • footer:文档的底部信息
  • small:小号字体
  • strong:强调文本

4 补充

4.1 header

  • 用在页面中,是页眉/页头。同时,也可以使用在article中。
  • 当header作为页眉时,在内部可以包含nav元素,作为导航性链接。
  • 不能在header内嵌套header或footer。
  • 如果只用h1-h6就能满足需求,就没必要用header包裹h1-h6。
  • header与h1-h6的语义目的是不同的,不能互换。

4.2 nav

  • 一般,在用ul和ol元素对全局导航、链接进行结构化时,在外面,包上一个nav。这种nav通常在header元素里面。
  • nav能帮助识别页面的主导航。
  • 对辅助性页脚(使用条款、隐私政策),不要用nav;对导航页脚(商店位置、招聘信息),推荐用nav。
  • nav不能嵌套在address中。

4.3 main

  • mian元素包围着代表页面主题的内容。
  • 一般会加上在main开始标签中加上role="main"
  • 一个页面只能用一次main
  • main不能在article、aside、footer、header、nav中。

4.4 section

  • 与div区别:div无语义
  • 与article区别:section本质上组织性和结构性更强,article则是自包含的容器
  • 何时使用:记住定义中的“具有相似主题的一组内容”

5 参考

6 其他

【前端】HTML5与CSS3学习笔记

版权声明:本文为[RogerQianpeng]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/RogerQianpeng/article/details/124766995