什么是 HTML 语义化?

HTML语义化就是使用HTML语义化标签。语义化标签就是拥有语义的标签。语义元素清楚地向浏览器和开发者描述其意义。

例如:div、span都是没有语义的标签,无法通过标签确定信息。像a、img等这种有语义的标签可以确定是这一个链接还是一个图片。

HTML5新出的语义化标签部分:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

使用图例:

语义化的好处和意义?

  1. 给用户们看:保证css失效时用户仍然可读
  2. 给开发者看:代码结构更清晰,有助于构架良好的HTML结构
  3. 给浏览器看:利于搜索引擎检索
  4. 有利于不同设备的解析
  5. 有利于团队的开发维护

具体怎么语义化?

  1. 纯样式的标签不用:b、i、u(结构、样式、行为三者分离是大趋势)
  2. 无语义的标签少用:div、span
  3. 有语义的标签用对:header页眉footer页脚nav目录导航aside侧栏

什么是 HTML 语义化,有什么好处的更多相关文章

  1. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  2. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. 语义化的html结构的好处

    HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...

  4. 【02】你是如何理解 HTML 语义化的,有什么好处

    [02]你是如何理解 HTML 语义化的   01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是:   ...

  5. 什么是web语义化,有什么好处

    web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化.HTML语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 CSS命名的语义化是指 ...

  6. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  7. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  8. 为什么要web语义化

    为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护

  9. HTML 语义化

    语义化,让你的网页更好的被搜索引擎理解 要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化.那么什么 ...

  10. HTML语义化基础

    body { background-color: rgb(60,60,60) } 为使页面呈现较好的内容结构,所以对网页进行布局时,将页面相关元素集中在一起,形成页眉.文章.页脚.侧边栏等元素块,刚开 ...

随机推荐

  1. .net 6 (.net Core) 在这个应用程序中禁用了BinaryFormatter序列化和反序列化

    https://blog.wixy.cn/archives/10.html <PropertyGroup>      <TargetFramework>net6.0</T ...

  2. C# 子类给父类构造函数传值

    BIG阳 通过BAse 来用,在子类中,你调用的类型要和父类的调用类型相同才行,不然会出错class A {public A(int a, int b) {}}class B : A {public ...

  3. Excel双向柱状图的绘制

    Excel双向柱状图在绘制增减比较的时候经常用到,叫法繁多,双向柱状图.上下柱状图.增减柱状图都有. 这里主要介绍一下Excel的基础绘制方法和复杂一点的双向柱状图的绘制 基础双向柱状图的绘制 首先升 ...

  4. FFmpeg开发笔记(七十三)Windows给FFmpeg集成MPEG-5视频编解码器

    ​MPEG-5是新一代的国际音视频编解码标准,像我们熟悉的MP3.MP4等音视频格式就来自于MPEG系列.MP3格式的说明介绍参见<FFmpeg开发实战:从零基础到短视频上线>一书的&qu ...

  5. ESB平台,RestCloud轻量级编排平台

    RestCloud ESB平台是一个以API为中心的轻量级ESB总线平台.企业级私有化部署,是一个集成的容器,一个集中式的服务总线.ESB是传统中间件技术与XML.Web服务等技术结合的产物.ESB提 ...

  6. RestCloud ETL 跨库数据聚合运算

    1. 在首页,进入数据源管理 2. 新增数据源,如MySQL 3. 配置数据源信息 4.测试链接.保存退出 5.回到首页,进入数据集成开发平台 6.创建新应用,编辑配置 7.进入刚刚创建的应用,左侧菜 ...

  7. 题解:Addition Chains

    洛谷同步链接 题目传送门(洛谷) 题目传送门(UVA) 前置知识:迭代加深搜索 定义 迭代加深是一种 每次限制搜索深度的 深度优先搜索.--OI Wiki 简单而言,就是一种限制搜索深度的DFS.有什 ...

  8. unity输入屏蔽emoji

    安卓的emoji显示乱码,IOS没事,在input监听屏蔽即可 onValidateInput /// <summary> /// 输入框屏蔽emoji /// </summary& ...

  9. 解决.net6 Docker容器 DateTime.Now 获取时间相差8小时问题(转载)

    .net6项目中使用DateTime.Now获取到的时间比本地时间要差8小时,但是docker容器中,使用date获取的时间是正确的,网上提供了很多种方法,主要有以下三种方法,其中前面两种方法我尝试过 ...

  10. JavaBean就是一个Java类且满足以下2点:(1)public 修饰的类 ,public 无参构造;(2)所有属性都是private,并且提供set/get

    JavaBean就是一个Java类且满足以下2点 : public 修饰的类 ,public 无参构造 所有属性(如果有) 都是private,并且提供set/get (如果boolean 则get ...