【前端】语义化标签详解
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,欢迎来到我的博客,每天一道面试题,我们共同进步 ...
最新文章
- python的优缺点有哪些-那么多人选择Python,它的优缺点有哪些?
- 提高ASP性能的最佳选择
- 西北农林科技大学与陕西师范大学计算机,这所大学有点“惨”,本身是“双一流”高校,却被说成野鸡大学...
- 让linux系统做网关,代理上网!!!
- Socket之TCP服务器【Python】
- linux下查看隐藏的文件
- 【转】.NET Remoting
- java timer线程结束_Java线程Timer定时器用法详细总结
- boot定时任务开启和关闭 spring_Spring之定时任务实践
- 怒肝三个月啃完这110道面试题,跳槽薪资翻倍
- 微软私有云分享(R2)21 BMC提升B格
- python线性回归做预测_python-线性回归预测
- composer 安装yii2框架
- ubuntu更改主机名
- 离散数学3_第1章__一些重要的重言蕴涵式__推理定律
- YouTube embed gives “restricted from playback on certain sites” error despite API metadata indicatin
- 硬件实现声音信号压缩
- 209. 长度最小的子数组(中等 数组 滑动窗口)
- Mdeditor编辑器
- 速卖通按关键字搜索商品
热门文章
- AngularJS 实践:应用开发 :: ENA13 价格条码-(一)
- oracle 切割 rowid,Oracle中rowid的用法(全面)
- 基于java的图书租赁系统_基于java web的图书管理系统
- 2022浙大CS考研
- 华为交换机端口模式trunk⇌access互改
- 电商双十一活动拉动国内消费,直播带货成为消费新业态
- 西北工业大学电子邮件系统使用指南
- 扫描智能捕获 富士通ScanSnap iX1500新品试用
- 技巧:Linux 动态库与静态库制作及使用详解
- 代码之谜(零) - 其实,你不懂代码