HTML语义化专题(一)—如何理解HTML语义化?

一. 语义化背景

讲到语义化,我们首先来聊聊html语义化的背景,HTML结构语义化,是最近几年才提出来的,以前的html结构,都是一堆的没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面,你一打来就是一堆的div+css, 为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方w3c,也在HTML5给出了几个新的语义化的标签。

二. 什么是语义化?语义化之后会给文档带来什么效果呢?

1, 首先、语义化,故名思意,就是你写的HTml结构,是用相对应的有一定语义的英文字母(标签)表示的,标记的,因为HTML本身就是标记语言。不仅对自己来说,容易阅读,书写。别人看你的代码和结构也容易理解,甚至对一些不是做网页开发的人来说,也容易阅读。那么,我们以后再开发的过程中,一定要注意了,尽量使用官方的有语义的标签,不要再使用一堆无意义的标签去堆你的结构。怎么知道,自己的页面结构是否语义化,那就要看你的HTML结构,在去掉CSS样式表之后,是否,依然能很好的呈现内容的结构,代码结构。也就是说,脱掉css的外衣,依然头是头,脚是脚。赤裸裸的完整的一篇文档。这也就是,语义化之后文档的效果。
2,其次、其实语义化,也无非就是自己在使用标签的时候多使用有英文语义的标签,比如标签,以为head(头),在HTML中就是就是用来定义标题,还有p标签,英文是pagrapph段落,table表格标签,等等。

三.为什么要语义化?烦不烦啊,,,

据说啊,是因为一下几点?

(1)、为了在没有css代码时,也能呈现很好的内容结构,代码结构,以至于达到没有编程基础的非技术人员,也能看懂一二。(其实,就是为了不穿CSS外衣,裸奔依然好看)。
(2)、提高用户体验,比如:title,alt用于解释名词和图片信息。
(3)、利于SEO,语义化能和搜索引擎建立良好的联系,有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
(4)、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
(5)、便于团队开发和维护,语义化更具可读性,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化,利于规范化。

四.基于此,在写页面结构时,我们应该注意什么呢?

(1)、尽可能少的使用没有语义的div和span元素。
(2)、在对语义要求不明显时,技能使用div也能使用p,那就使用p,以为p默认有上下边距,可以兼容特殊终端。
(2)、不要使用纯样式标签,如:b、font、u等,改用css设置。
(4)、需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b,因为没语义),em是斜体(不用i同b);
(5)、使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头标题用th,内容单元格用td;

(本篇完)了解更多内容,请点击博客

一点一滴海让路,持之以恒山可移。没马,骑驴找马,连驴也没有,迈开双脚也要上路,绝不等待! 蓦然回首时,人生没有虚度,无怨无悔,追求高质量的人生。
原文地址:https://www.cnblogs.com/huoshanjun/p/6603580.html