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"
一个页面只能用一次main
main不能在article、aside、footer、header、nav中。

4.4 section

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

5 注意

html关注的是内容，而不是样式。
em、strong、small、cite等，不要为了他们的样式而去使用，应当把浏览器的样式当做一种附带，而不是目的，html要关注语义，样式是css的事。
html5强调元素的语义，而b和i是html5之前时代的产物，那时候没有css，b和i本质上是用于表现的，请慎用。

6 参考

什么是语义化标签，常见的语义化标签介绍
《HTML5与CSS3基础教程（第8版）》

7 其他

【前端】HTML5与CSS3学习笔记

【前端】语义化标签详解相关推荐

html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
前端--实体，meta，语义化标签1
实体 <body><!-- 在网页中编写的多个空格会自动被浏览器解析为一个空格在HTML中,有些时候不能直接书写一些特殊符号,比如连续的空格,比如字母两侧的大于小于号如果需要需要书写 ...
前端html小技巧—input标签详解
今天分享下前端html小技巧-input标签详解 ,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. 定义和用法 inp ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
web开发—— 前端基础（6） ——语义化标签
在网页中HTML专门用来负责网页的结构,在使用html标签时,应该关注标签的语法,而不是它的样式! 首先:标题标签有6级,h1~h6,h1时一级标题,h6是6级标题,h1最重要,h6最不重要. 一般情 ...
html标签语义化的好处,(2019)[前端]面试题[9]：HTML5语义化标签和新特性
问题知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化? 说说你了解的HTML5语义化标签,HTML5新增了那些新特性? Hello,欢迎来到我的博客,每天一道面试题,我们共同进步 ...

【前端】语义化标签详解

1 语义，语义化，HTML

2 意义

3 常用标签语义

4 补充

4.1 header

4.2 nav

4.3 main

4.4 section

5 注意

6 参考

7 其他

【前端】语义化标签详解相关推荐

最新文章

热门文章