什么是 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) } 为使页面呈现较好的内容结构,所以对网页进行布局时,将页面相关元素集中在一起,形成页眉.文章.页脚.侧边栏等元素块,刚开 ...
随机推荐
- electron中定义ipc的完美方案
前语 发现在主进程和渲染进程通信的设计中,很多代码都是重复的,导致最后非常臃肿,且不利于后期扩展 electron项目中 核心文件结构如下 | -- index.js | -- index.html ...
- Java 中的 ==
简介 如果没有重写 equals 方法, 相当于 == 比较, 即比较两个对象的地址是否相等. 如果是基本数据类型, 直接对值进行比较. code /** * Created by lee on 20 ...
- vs 开发 qt 遇到 无法找到 Visual Studio 2010 的生成工具(平台工具集 =“v100”) 解决方案
参考链接 相关解决方案
- SciTech-Mathmatics - Matrix Analysis(矩阵分析)-重要结论 + 特征值分解 + Matrix视为 Linear Space的 变换 与 运算 + 任两个Vectors可通过Matrix变换互相转化 + 方阵(满秩)不改变向量维数
SciTech-Mathmatics - Matrix Analysis:矩阵分析 Matrix Analysis 重要结论 \(\large \text{ Matrix Transformation ...
- SciTech-BigDataAIML-Algorithm: 主观经验:先验概率&似然概率 和 客观事实:后验概率&条件概率 + Floyd(弗落伊得)最短路线算法
主观经验 和 客观事实:后验概率 Subjective主观经验: 先验概率 & 似然概率 Objective客观事实: 后验概率 & 条件概率 Floyd(弗落伊得)最短路线算法
- ylmf Win11电脑图标盾牌如何取消的问题
近期有部分细心的雨林木风官网用户发现win11系统桌面上的图标变得不一样了,上面会带有盾牌,那么有没有什么方法可以将这些盾牌去除呢?还不知道应该如何操作的朋友们,可以参考以下操作哦,希望对你有所帮助. ...
- android:visibility数据绑定中的属性值
数据绑定的采坑之旅 作者:咕魂 时间:2021年3月17日14:58:20 目录 数据绑定的采坑之旅 数据绑定中的属性值 我们不能直接使用 字符串写法,字符串类型不匹配,没有效果或者直接报错 网上很多 ...
- CNVD-2024-15077 AJ-Report 认证绕过与远程代码执行漏洞 (复现)
CNVD-2024-15077目录终端下执行docker compose up -d启动容器, 访问ip:9095进入漏洞页面 向目标服务器发送以下 POST 请求,利用漏洞执行任意命令 curl - ...
- vue3中的watch详细讲解保证看的明明白白
Vue3 中的 watch 只能监视以下四种数据 1,ref 定义的数据. 2,一个响应式对象(如:reactive 定义的数据). 3,函数的返回一个值(getter函数).getter函数其实就是 ...
- AXUI 发布万能网页模版,包含 100+ 设计精美的模块,复制可用,适合展示型网站
基于AXUI开发的前端万能网页模版,包含了list列表.banner通栏.form表单.accordion折叠菜单.tab切换菜单.aside侧边板块.card卡片图文.map地图板块.marquee ...