语义类标签是什么,使用它有什么好处?

语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的section、nav、p,这些都是语义类的标签。
语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。

很多工作场景里,语义类标签有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。

  • 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有CSS的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
  • 除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。

语义化标签学习的总结:

1)ul,ol的区别

ul是无序列表,ol是有序列表,ul可以用来做菜单栏包裹,ol可以用作有顺序的列表,如:1.内容一

2.内容二

3.内容三

2)语义化标签的作用

1.自然语言表达能力补充,如:<em>用来表达词语的肯定,<strong>用来加粗字体

2.文章标题摘要,如:合理运用h1,h2标签来表述标题的上下关系

3.适合机器阅读的整体结构,如:<time datetime="2015-07-09">9 July 2015</time>这句就更容易让机器阅读。

3)常见的以及一些有用的标签

  • <section>:从HTML 5开始,我们有了section标签,这个标签可不仅仅是一个“有语义的div”,它会改变h1-h6的语义。section的嵌套会使得其中的h1-h6下降一级,因此,在HTML5以后,我们只需要section和h1就足以形成文档的树形结构:

<section>
<h1>HTML语义</h1>
<p>balah balah balah balah</p>
<section>
<h1>弱语义</h1>
<p>balah balah</p>
</section>
<section>
<h1>结构性元素</h1>
<p>balah balah</p>
</section>
......
</section>

  • <code>:code可以包裹html语句而不会被浏览器再去解析。
  • <pre>,<samp>:这是一段HTTP协议的内容描述,因为这段内容的换行是非常严格的,所以我们不需要浏览器帮我们做自动换行,因此我们使用了pre标签,表示这部分内容是预先排版过的,不需要浏览器进行排版。

又因为这是一段计算机程序的示例输出,所以我们可以使用samp标签:

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

  • <aside>:一般用作侧边栏的包裹标签
  • <hgroup>:h标签的标签组,

<hgroup> <h1>World Wide Web </h1> <h2>From Wikipedia, the free encyclopedia</h2> </hgroup>。

  • <nav>:一般用作导航栏。

个人学习笔记,如有错误欢迎指正~

html 树形结构_HTML学习之语义化标签相关推荐

  1. HTML5学习之语义化标签

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

  2. html5语义化标签大全

    常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...

  3. 对HTML 标签语义化的理解,常见的语义化标签有哪些?

    语义化就是我们通过标签本身就知道标签所在代码的内容具有什么意义,即用使用特定的功能属性的标签做特定的事.比如使用 h1 标签我们就知道这是一个标题,使用 header 就知道这是页眉,使用 foote ...

  4. web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡

    https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

  5. HTML网页结构化框架、meta标签和语义化标签

    1.HTML网页结构化框架代码示例 myhtml.html <!--文档声明,声明当前网页的版本--> <!DOCTYPE html> <!--html的根标签(元素), ...

  6. 前端技术学习:语义化

    前端技术学习 一.语义化 1. 为什么要使用语义化 2. 语义化标签 (1)容器标签 artical section div (2)关于页面的标签 nav aside header main foot ...

  7. HTML学习笔记(实体+meta标签+块、行内元素+语义化标签+布局标签)

    由于学校并没有开设前端的相关课程,所以对于前端这一部分都是这里看一点,哪里看一点,这里算是做一个小小的汇总吧(因为本身想走的是后端开发,所以目前汇总一些基础的,后面遇到了再慢慢补充吧). 文章目录 1 ...

  8. “约见”面试官系列之常见面试题之第五十四篇之语义化标签(建议收藏)

    目录 什么是语义元素? 为什么要语义化? HTML5常用的语义元素 很多面试官会问:谈谈你对 HTML5语义化标签的理解.那么本篇博客专门解答一下这个问题. 什么是语义元素? 语义是指对一个词或者句子 ...

  9. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

最新文章

  1. 对话腾讯AI Lab:即将开源自动化模型压缩框架PocketFlow,加速效果可达50%
  2. INRIX自动驾驶汽车平台扩大使用范围 帮助城市管理交通
  3. BigData之Storm:Apache Storm的简介、深入理解、下载、案例应用之详细攻略
  4. SAP供应商编码范围
  5. redo日志写入为什么“俩阶段提交”
  6. REST:使用Controller端点?
  7. 源码分析RocketMQ ACL实现机制
  8. 信息学奥赛一本通(1245:不重复地输出数)
  9. 开发了一套python的七牛sdk
  10. 安卓kali安装mysql_安卓手机安装kali教程(root篇)
  11. 道路-水系河流-铁路-人口等栅格数据获取途径
  12. 2018年11月中旬香港, 吉隆坡8天游记
  13. 设计模式学习专栏六--------适配器模式
  14. OnePlus一加手机:测试
  15. jupyter notebook出现DLL load failed while importing _multiarray_umath: 找不到指定的模块
  16. mysql如何获取今天的日期?
  17. linux 查看gz文件,【shell 脚本】查看*.gz 文件的内容
  18. 基于SSM的音乐视频网站的设计与实现
  19. SAP-ABAP-SQL语句中CAST字段类型转换示例,CONCAT连接示例,SUBSTRING截断示例
  20. docker命令大全英文版在线手册

热门文章

  1. oracle允许空行,oracle用户权限的一些基本操作
  2. python的盈利模式_八大盈利模式是什么?一篇文教会你盈利模式分析!
  3. 【leetcode记录01】 数组
  4. 一个最简单的 Github workflow 例子
  5. SAP UI5 应用开发教程之一:Hello World
  6. SAP Commerce Cloud 的本地开发
  7. 单页面 Web 应用(Single Page Application,SPA)的工作原理介绍
  8. 在Google Cloud platform上创建Kubernetes cluster并使用
  9. SAP CRM Long text unit test preparation
  10. github image标签转markdown工具源代码