什么是HTML语义化?html语义化的好处(总结)

本章给大家介绍什么是html语义化?html语义化的好处(总结),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是HTML语义化

基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的HTML结构到底有什么好处?

立即学习“前端免费学习笔记(深入)”;

我们知道HTML5新增的标签,比如

,html正在朝着更加健壮的语义化的HTML结构发展,xhtml2在这点上没html5先进,这也是xhtml2死亡的一个原因,这一点也说明了语义化的HTML结构是html的发展趋势。

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

写HTML代码时应注意什么?

尽可能少的使用无语义的标签div和span;

在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

不要使用纯样式标签,如:b、font、u等,改用css设置。

需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增了语义标签

HTML 5的革新之一:语义化标签一节元素标签。

在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。

看下图没有用div标签来布局

1.png

W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。

节点元素标签因使用的地方不同,他们可分为:节元素标签、文本元素标签、分组元素标签分开来讲解HTML5中新增加的语义化标签和使用总结。

网站标题

网站副标题

以上就是什么是HTML语义化?html语义化的好处(总结)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1547080.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:48:16
下一篇 2025年12月21日 18:48:54

相关推荐

  • html5中有哪些选择器

    html5的选择器有元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器等。详细介绍:1、元素选择器,使用元素名称作为选择器,表示选取所有具有该元素名称的元素;2、类选择器,使用点号开头的选择器,表示选取具有指定类名的元素;…

    2025年12月21日
    000
  • HTML5为什么要遵守W3c标准

    HTML5要遵守W3c标准的原因是提供一致的跨平台体验、提升页面的可访问性和搜索引擎优化、保证未来的兼容性和可持续性、降低开发和维护成本,并推动Web技术的发展等。详细介绍:1、提供一致的跨平台体验,遵守W3C标准可以确保Web页面在不同的浏览器和设备上具有一致的显示和行为;2、提升页面的可访问性,…

    2025年12月21日
    000
  • HTML5新增了哪些特性

    html5的新特性有语义化标签、视频和音频、画布、地理定位、存储、Web Workers、拖放、Web存储、Web Components、响应式设计等。详细介绍:1、语义化标签,用于更好地描述和组织网页内容;2、视频和音频,消除了对插件的依赖,并提供了更好的可访问性和可定制性;3、画布,提供了一种原…

    2025年12月21日
    000
  • html5怎么创建跳转页尾超链接

    html5创建跳转页尾超链接的方法:1、在页尾创建一个元素,将其设置为锚点,语法“…”;2、创建一个超链接,将其与锚点关联即可,语法“点我跳转页尾”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html5中,可以利用锚点链接实现跳转到页尾的效果。 什么是…

    2025年12月21日
    000
  • html5中块状元素怎么转换为其他元素

    转换方法:1、给块状元素添加“display:inline;”样式,可以将块状元素转换为行内元素;2、给块状元素添加“display:inline-block;”,可以将块状元素转换为行内块状元素。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。…

    2025年12月21日
    000
  • html5元素的分类有哪些

    html5元素可以分为两个类别:1、“块级元素”;该种元素会独占一行,总是在新行上开始,元素的宽度、高度以及外边距和内边距等都可以控制。2、“内联元素”;该种元素和其他元素会在同一行上显示,元素的宽度、高度以及外边距和内边距都不可以改变。 本教程操作环境:windows7系统、HTML5版、Dell…

    2025年12月21日 好文分享
    000
  • 一文详解HTML标签和属性(主体结构浅析)

    本篇文章带大家了解一下html标签和属性,聊聊html文档的主体结构与相关标签,希望对大家有所帮助! HTML的主体结构 HTML 页面的基本结构如下所示,其中包含了各种创建网页所需的标签(例如 doctype、html、head 和 body 等)。 Hello 这是我的第一个HTML页面 最顶部…

    2025年12月21日 好文分享
    000
  • html5中怎么设置单元格水平跨度

    在html5中,可以利用单元格元素(td或th)的colspan属性来设置单元格水平跨度,该属性可以定义单元格应该横跨的列数,语法“”或“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html5中,想要设置单元格水平跨度,可以利用colspan属性。(colspa…

    2025年12月21日
    000
  • html5中怎么设置文本斜体

    html5中设置文本斜体的方法:1、使用“”标签,语法“斜体文本内容”;2、使用“”标签,语法“斜体文本内容”;3、使用style属性给文本元素添加“font-style:italic;”样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 h…

    2025年12月21日 好文分享
    000
  • HTML5中header是什么意思

    HTML5中header的意思是“标头、首标”,是一个语义标签,用于定义文档或者文档的一部分区域的页眉,语法为“页眉代码”;在一个文档中,可以定义多个header元素,作为介绍内容或者导航链接栏的容器。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 HTML5中head…

    2025年12月21日
    000
  • html5段落标签是什么

    html5段落标签是“”。p标签是一个块级元素,可以用来定义段落,浏览器会自动地在段落文本前后添加空行,语法“段落文本”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html5段落标签是“ ”。 HTML 可以将文档分割为若干段落。而段落是通过 标签定义的。 浏览器会…

    2025年12月21日 好文分享
    000
  • html5怎么实现进度条

    在html5中,可以利用“”标签实现进度条,该标签用于定义运行中的任务进度,在浏览器中以进度条的形式显示,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html5中,可以利用“”标签实现进度条。 progress标签用于定义运行中的任务进度,在浏览器中以进度…

    2025年12月21日
    000
  • html5怎么隐藏标签

    在html5中,可以通过给指定标签添加hidden属性来隐藏该标签,hidden属性是一个布尔属性,浏览器不会显示已设置了hidden属性的标签元素;语法“”。”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html5中,想要隐藏一个标签,可以给这个标签添加hidd…

    2025年12月21日
    000
  • html5怎样隐藏下划线

    在html中,可以利用style属性给元素添加“text-decoration:none;”样式来设置元素隐藏下划线,语法为“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html5怎样隐藏下划线 在html中,可以设置元素的style属性,给元素添加“text-d…

    2025年12月21日
    000
  • html和html5有什么区别

    区别:1、HTML的文档类型声明长而复杂,而HTML5的文档声明相对来说更为简便,有利于程序员快速阅读和开发;2、HTML5支持SVG、画布和其他虚拟矢量图形,而HTML不支持;3、HTML本身不支持音频和视频,而HTML5支持等等。 本教程操作环境:windows7系统、HTML5版、Dell G…

    2025年12月21日
    000
  • html5如何播放视频

    html5播放视频的方法:1、使用video标签,语法“”;2、使用embed标签,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在 HTML 中播放视频的方法有很多种,其中html5有两种方法: 标签 描述 标签定义声音,比如音乐或其他音频流。@@@###@…

    2025年12月21日
    000
  • html5 input有新属性吗

    html5 input有新增属性,分别为:autocomplete、autofocus、form、height、list、max、min、multiple、pattern、placeholder、required、step、width等等。 本教程操作环境:windows7系统、HTML5版、Del…

    2025年12月21日
    000
  • 怎样禁止html页面滚动

    在html中,可以通过将body元素的style属性的值设置为“overflow:hidden”来禁止页面滚动,具体语法“..”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html禁止页面滚动的方法: 1、首先新建一个index.html页面,来模拟演示下 立即学习…

    2025年12月21日 好文分享
    000
  • html5游戏有哪些

    HTML5游戏有:1、HexGL;2、CrossCode;3、Sketchout;4、Treasure Arena;5、Bejeweled;6、Missile Game;7、Gods Will Be Watching;8、Swooo等等。 本教程操作环境:windows7系统、HTML5版、Dell…

    2025年12月21日 好文分享
    000
  • HTML5不再支持哪些元素

    不再支持:1、name;2、applet;3、acronym;4、basefont;5、big;6、center;7、font;8、strike;9、frame;10、frameset;11、listing;12、plaintext等。 本教程操作环境:windows7系统、HTML5版、Dell …

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信