什么是 HTML 语义化,有什么好处
什么是 HTML 语义化?
HTML语义化就是使用HTML语义化标签。语义化标签就是拥有语义的标签。语义元素清楚地向浏览器和开发者描述其意义。
例如:div、span都是没有语义的标签,无法通过标签确定信息。像a、img等这种有语义的标签可以确定是这一个链接还是一个图片。
HTML5新出的语义化标签部分:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
使用图例:

语义化的好处和意义?
- 给用户们看:保证css失效时用户仍然可读
- 给开发者看:代码结构更清晰,有助于构架良好的HTML结构
- 给浏览器看:利于搜索引擎检索
- 有利于不同设备的解析
- 有利于团队的开发维护
具体怎么语义化?
- 纯样式的标签不用:b、i、u(结构、样式、行为三者分离是大趋势)
- 无语义的标签少用:div、span
- 有语义的标签用对:header页眉footer页脚nav目录导航aside侧栏
什么是 HTML 语义化,有什么好处的更多相关文章
- HTML5学习之语义化标签(一)
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- 语义化的html结构的好处
HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- 【02】你是如何理解 HTML 语义化的,有什么好处
[02]你是如何理解 HTML 语义化的 01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是: ...
- 什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化.HTML语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 CSS命名的语义化是指 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
- 为什么要web语义化
为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护
- HTML 语义化
语义化,让你的网页更好的被搜索引擎理解 要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化.那么什么 ...
- HTML语义化基础
body { background-color: rgb(60,60,60) } 为使页面呈现较好的内容结构,所以对网页进行布局时,将页面相关元素集中在一起,形成页眉.文章.页脚.侧边栏等元素块,刚开 ...
随机推荐
- .net 6 (.net Core) 在这个应用程序中禁用了BinaryFormatter序列化和反序列化
https://blog.wixy.cn/archives/10.html <PropertyGroup> <TargetFramework>net6.0</T ...
- C# 子类给父类构造函数传值
BIG阳 通过BAse 来用,在子类中,你调用的类型要和父类的调用类型相同才行,不然会出错class A {public A(int a, int b) {}}class B : A {public ...
- Excel双向柱状图的绘制
Excel双向柱状图在绘制增减比较的时候经常用到,叫法繁多,双向柱状图.上下柱状图.增减柱状图都有. 这里主要介绍一下Excel的基础绘制方法和复杂一点的双向柱状图的绘制 基础双向柱状图的绘制 首先升 ...
- FFmpeg开发笔记(七十三)Windows给FFmpeg集成MPEG-5视频编解码器
MPEG-5是新一代的国际音视频编解码标准,像我们熟悉的MP3.MP4等音视频格式就来自于MPEG系列.MP3格式的说明介绍参见<FFmpeg开发实战:从零基础到短视频上线>一书的&qu ...
- ESB平台,RestCloud轻量级编排平台
RestCloud ESB平台是一个以API为中心的轻量级ESB总线平台.企业级私有化部署,是一个集成的容器,一个集中式的服务总线.ESB是传统中间件技术与XML.Web服务等技术结合的产物.ESB提 ...
- RestCloud ETL 跨库数据聚合运算
1. 在首页,进入数据源管理 2. 新增数据源,如MySQL 3. 配置数据源信息 4.测试链接.保存退出 5.回到首页,进入数据集成开发平台 6.创建新应用,编辑配置 7.进入刚刚创建的应用,左侧菜 ...
- 题解:Addition Chains
洛谷同步链接 题目传送门(洛谷) 题目传送门(UVA) 前置知识:迭代加深搜索 定义 迭代加深是一种 每次限制搜索深度的 深度优先搜索.--OI Wiki 简单而言,就是一种限制搜索深度的DFS.有什 ...
- unity输入屏蔽emoji
安卓的emoji显示乱码,IOS没事,在input监听屏蔽即可 onValidateInput /// <summary> /// 输入框屏蔽emoji /// </summary& ...
- 解决.net6 Docker容器 DateTime.Now 获取时间相差8小时问题(转载)
.net6项目中使用DateTime.Now获取到的时间比本地时间要差8小时,但是docker容器中,使用date获取的时间是正确的,网上提供了很多种方法,主要有以下三种方法,其中前面两种方法我尝试过 ...
- JavaBean就是一个Java类且满足以下2点:(1)public 修饰的类 ,public 无参构造;(2)所有属性都是private,并且提供set/get
JavaBean就是一个Java类且满足以下2点 : public 修饰的类 ,public 无参构造 所有属性(如果有) 都是private,并且提供set/get (如果boolean 则get ...