什么是 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. Rust 修仙之道

    静修Rust三年多,有所感悟.今借道家修仙之法展一斑之管窥,只为博大家一乐.进入正文

  2. Flink初体验-批处理与流处理

    一.环境准备 本机环境:jdk11.scala2.12.maven3.6 新建一个maven项目,pom如下 <?xml version="1.0" encoding=&qu ...

  3. vs 编译成库 有的时候会出现奇怪的问题 解决方案

    解决方案: 把相关库的代码全部加入到建立的vs项目中.

  4. Semantic Kernel Agent Orchestration编排

    一.多代理编排核心价值 Semantic Kernel的Agent Orchestration框架解决了传统单代理系统的局限性: // 统一调用接口示例(适用于所有模式) InProcessRunti ...

  5. SciTech-EECS-PCB电路板设计-深思熟虑方可行动 :使用KiCad进行PCB设计的基本流程

    聚焦人生的社交网.时间.精力.资源:人生方有成. 明确需求与产品设计: 大体的ideal开始,到深思熟虑,联系各方都通过,制定完好的计划方可行动. 是否已有成熟商品:直接采购即可? 目标用户群: 市场 ...

  6. Kafka为什么吞吐量大,速度快?

    前言 根据个人的经历,无论在工作中,还是即将要经历的面试,MQ这部分是肯定要了解的,虽然之前工作中一直使用Kafka但是一些详细的细节知识还是了解的不深,所以这次总结一波. Kafka为什么吞吐量这么 ...

  7. 全能文件格式转换AllToAll

    文件格式转换 https://www.alltoall.net/

  8. Behavior designer 行为树插件 笔记

    插件下载:https://files-cdn.cnblogs.com/files/sanyejun/BehaviorDesigner1.6.4.7z 参考资料:https://blog.csdn.ne ...

  9. 主流PLC串口自由协议通信标准化

    一.PLC串口自由协议通信概述:串口自由协议通信是一种灵活的串行通信方式.在该模式下,开发者无需遵循特定标准协议,可根据实际需求自由定义数据格式与交互规则.通常需明确数据帧结构,例如设置起始字节.数据 ...

  10. ABC 293 G 题题解 —— 莫队

    有关数据 \(\texttt{Time Limit}\) \(\texttt{Memory Limit}\) \(\texttt{Difficulty}\) \(\color{green}{\text ...