关于HTML语义化的一些理解

时间:2021-05-09 02:53:36
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上。
其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重。
所以我一直也没把这东西当回事过。
然而最近当我再次看到这个词时,我想我应该好好思考下这问题了。就写篇博客记录下。
 
 
一、什么是语义化?
在解释这个概念之前,应该先解释下“结构-表现-行为”。
如果说解耦合是代码的高境界,那么“结构-表现-行为”的原则就是前台的标杆。
随着前台代码的越来越庞大,各部分代码各司其职的作用就越来越重要了。
众所周知,前台代码是有HTML + CSS + JS来实现的。他们对应的就是负责“结构-表现-行为”。
 
HTML负责结构。
结构是什么?简单理解,结构就是HTML节点的层次、嵌套关系等。举个例子来说
<header>
<h1></h1>
</header>
<section></section>
<footer></footer>
上面的代码展示了该文档结构为 header、section、footer是同级的。然后h1是header的直接子节点,换句话说就是他们之间也就一层的嵌套。
 
但是,有个问题,看下面的代码
<div>
<span style="font-size:16px;font-weight:bold;"></span>
</div>
<div></div>
<div></div>
这段代码不也展现出了结构吗?而且显示效果而上面的没有区别(这里我假设H1默认是16px,bold的样式),那上面的代码和这段比起来的优势是什么呢?
 
优势,其实就在语义化。
第一段代码不仅展示了结构,而且告诉了我们,是头部、区域块、尾部同级,头部中有个大标题。而第二段代码,能体现出这些吗?
 
所以,给个结论就是 — 语义化就是让标签和其所包裹的内容的意思想吻合
 
 
 
二、为什么要语义化?
我归纳了3点,分开来说把
 
1.方便机器理解代码,利于SEO
还拿上面两段代码举例子,第二段代码,别说机器了,就是人也看不出它表达的意思啊。而第一段代码无论是人还是机器,都是可以去理解的。
搜索引擎爬虫理解了你的代码,你的网站排名自然有加分了。
 
2.代码更简洁,复用性更高。使用合适的标签,可以少些很多css或者js。
代码更简洁:这个显而易见了。第二段代码多了样式的定义,而第一段没有。
复用性更高:假如这段HTML结构有很多地方用,那么第一段的适用场景更多。比如第二段代码固定了16像素加粗,而第一段代码只是指明这是个h1,你不重写那么就用h1样式,你若重写了h1,那就用你的。
少写css:在代码简洁那里说了,就不重复了。
少写js:这个可以说说,比如看如下代码
<!-- 语义化的form -->
<form>
<input type="submit" />
</form> <!-- 非语义化的form -->
<form>
<a href="javascript:document.forms[0].submit()" >submit</a>
</form>
非语义化form代码里面,用a标签和js实现提交功能。但是呢,一来多写了js代码。二来,在语义化的form里面可以回车提交,用a标签实现的无法回车提交。当然,你可以再多写很多js来实现完美模拟,但是这又有什么意思呢。
 
3.访问性更好
这个主要就是针对读屏器或者其他一些对CSS理解不好的浏览器。语义化的HTML可以做到脱离CSS还能看,而非语义化的就难了。
 
 
三、如何让自己代码语义化?
w3c的验证并不能验证你代码是否语义化,而且也没有任何工具可以测试你代码是否语义化。
这说明什么?这说明你无法通过像学习一门语言一样解决代码语义化的问题。
关于如何让自己代码语义化,我觉得有个方法可行
首先,你需要掌握常用的标签,包括标签代表的含义。可以参考这里
其次,在你写html的时候,常常去想想,这么写是否满足了语义化的要求。
最后,经常看一些大公司的网站(特别是新站)、开源项目代码,我知道大家都会这么做,但每当你看他们css如何写的,js如何写的时候,请抽出一点点时间,看看他们html是如何写的,思考下为什么这么写。
这样,我相信慢慢的你的HTML代码语义化会越来越好。
总之,语义化HTML代码不是一个可以从不会到会的问题,而是一个不断改进的问题,不值得一次花大量精力去学习,但是需要每天积累一点来提高的技能。
 
 
最后,我相信很多人看完这篇文章的第一反应就是——“哦,原来我一直使用的HTML写法叫做语义化啊!”
 
 
 
转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ,请勿用于任何商业用途
 

关于HTML语义化的一些理解的更多相关文章

  1. 对HTML语义化的一些理解和记录

    什么是HTML语义化 说HTML语义化就要先说说HTML到底负责的什么?下面摘自*: 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页 ...

  2. 谈谈对HTML语义化的理解

    什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...

  3. 你如何理解HTML结构的语义化?

    去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...

  4. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  5. 前端经典面试题:如何理解 HTML 语义化?

    本文最初于 2018-09-21 发布于 知乎 ,后在 <重学前端> 专栏的学习中,重新复习整理,发布于 Github 上,并计划写一系列前端学习相关的文章.欢迎 star . HTML ...

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

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

  7. web语义化理解

    含义: Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发 ...

  8. 谈谈你对HTML语义化的理解。

    1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...

  9. 对 HTML 语义化的理解

    简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情. html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 即使在没有样式 CSS 情况下也以一种文档格式显示,并 ...

随机推荐

  1. response content-type json

    2015年11月3日 15:47:43 百度知道:ajax开发中在请求服务器端的响应时, 对于每一种返回类型 规范的做法是要在服务端指定response的contentType 常遇到下面的几种情况: ...

  2. Raspberry Pi3 ~ 搭建开发环境

    关于树莓派的开发环境 纠结了一些时间 ,我的是raspberry Pi 3 mode b 在官网下载 noobs (raspbain 版本)的. 安装完成之后接上显示器 启动系统 然后最初我是想在这个 ...

  3. HD1085 Holding Bin-Laden Captive&excl;

    Problem Description We all know that Bin-Laden is a notorious terrorist, and he has disappeared for ...

  4. hadoop群集安装中碰到的问题

    在hadoop群集安装结束后,进行格式测试出现问题如下 格式化 cd /data/hadoop/bin ./hdfs namenode -format 15/01/21 05:21:17 WARN f ...

  5. fragment中listview触发事件setOnItemClickListener不好使

    <listView/>中// listview点击 ,高度wrap_content改成fill_prarent

  6. NYOJ--517--最小公倍数&lpar;大数打表&rpar;

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字 ...

  7. Redis in Docker on Linux Container

    记录:在Docker中运行一个Redis实例当我们在Windows系统中安装好Docker以后,在Hyper-V中会自动创建一个Linux虚拟机,如果这个虚拟机没有运行,说明当前运行的是Windows ...

  8. 【Discuz】关于出现&OpenCurlyDoubleQuote;对不起,您安装的不是正版应用&period;&period;”的解决方法

    使用Discuz!建站的站长都会遇到这样的问题:有些插件和风格在安装时出现不能安装的现象,出现以下提示: 不起,您安装的不是正版应用,安装程序无法继续执行 点击这里安装正版应用 针对这一情况,本人从网 ...

  9. 分布式mongodb分片集群

    本博客先简单介绍mongodb入门以及单实例以及mongodb的主从(主从官网是不提倡用的,原因后续介绍),副本集,分片. 第一:nosql介绍: 数据库分为关系型数据库与非关系型数据库,及具代表性的 ...

  10. HDFS 好的文章链接

    http://www.cnblogs.com/linuxprobe/p/5594431.html http://www.daniubiji.cn/archives/596 http://blog.cs ...