【前端】语义化标签详解

1 语义，语义化，HTML

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

2 意义 提升可访问性和互 *** 作性（内容对于借助辅助技术的残障访问者是可访问的，同时对于台式机、手机、平板电脑及其他设备上的浏览器都是可访问的）。提升搜索引擎优化（SEO）的效果。使维护代码和添加样式变得容易。（通常）使代码更少，页面加载更快。 3 常用标签语义 h1~h6：heading，标题p：paragraph，段落em：empasis，强调a：anchor，锚，链接div：division，块级元素，通用容器，无任何语义span：短语内容，通用容器，无任何语义header：页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框nav：页面的导航链接部分区域main：页面的主要内容，一个页面只能使用一次。article：页面独立的内容，它可以有自己的header、footer、sections等section：标记文档的各个部分，例如长表单文章的章节或主要部分aside：侧边栏footer：文档的底部信息small：小号字体strong：强调文本figure：图figcaption：figure的唯一标题 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"一个页面只能用一次mainmain不能在article、aside、footer、header、nav中。 4.4 section 与div区别：div无任何语义与article区别：section本质上组织性和结构性更强，article则是自包含的容器何时使用：记住定义中的“具有相似主题的一组内容” 4.5 注意 html关注的是内容，而不是样式。em、strong、small、cite等，不要为了他们的样式而去使用，应当把浏览器的样式当做一种附带，而不是目的，html要关注语义，样式是css的事。html5强调元素的语义，而b和i是html5之前时代的产物，那时候没有css，b和i本质上是用于表现的，请慎用。 5 参考 什么是语义化标签，常见的语义化标签介绍《HTML5与CSS3基础教程（第8版）》 6 其他

【前端】HTML5与CSS3学习笔记