关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。

其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地,机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。

我们应该在发布内容的时候,就用机器可读的、被广泛认可的语义信息来描述内容,来降低机器处理 Web 内容的难度(HTML 本身就已经是朝这个方向迈出的一小步了)。

而人们在WEB开发中使用的最多的标签<div></div>。div这个标签无疑很强大,一个div包着一个div,平级就用float,或者用position:absolute给某个div定位去达到开发者要的效果,但这明显是一个不好的习惯。不得不承认div有其好处,例如没有ul和li那些前间距,以及丑陋的点,也没有a标签那些丑陋的下划线和点击效果(虽然这些都可以用一个reset.css文件统一解决)。而一些初学者为了贪图方便,几乎全部使用div进行开发。代码看起来就是这样的:

<html>
	<body>
        //这里是个列表
        <div class="ul">  
            <div class="li">
            </div>
            <div class="li">
            </div>
            <div class="li">
            </div>
            <div class="li">
            </div>
        </div>
        //这里是个表格
        <div class="table">  
            <div class="tr">
                <div class="td">
                </div>
                <div class="td">
                </div>
                <div class="td">
                </div>
            </div>
        </div>
        //这里是换行文本
        <div class="p">
        </div>
    </body>
</html>

这样子看起来效果也许十分不错。。但是这样子其他标签的意义呢,不同的标签是为了让机器更方便的理解(其次也是为了让接手的人看起来更轻松)。所以代码应该是下面这个样子的才对:

<html>
	<body>
        //这里是个列表
        <ul class="ul">  
            <li class="li">
            </li>
            <li class="li">
            </li>
            <li class="li">
            </li>
            <li class="li">
            </li>
        </ul>
        //这里是个表格
        <table class="table">  
            <tr class="tr">
                <td class="td">
                </td>
                <td class="td">
                </td>
                <td class="td">
                </td>
            </tr>
        </table>
        //这里是换行文本
        <p class="p">
        </p>
    </body>
</html>

语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子,HTML 结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。CSS 是装饰材料,是油漆,是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了,没有了实际使用价值。CSS 完全依靠引用它的 HTML 文档。如果你想使 CSS 的能力发挥到极致,提供一个既干净又有结构的 HTML 是非常必要的。

在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

让所有的标签各施其职,让代码回到本该呆的位置,我觉得这才是我们作为程序员该做的事情。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

怎么把苹果“塞进”你的图表里?

✦✦✦✦✦✦ 明天就是圣诞节了,在这里小魔方预祝大家圣诞快乐,平安夜记得吃苹果哦! 今天的教程也跟圣诞节有关系哦,好吧就不卖关子了!相信大家都已经收到了好多好朋...

2337
来自专栏互联网杂技

UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能...

2736
来自专栏MixLab科技+设计实验室

人工智能Logo设计师Brandmark

封面由ARKie智能设计赞助 早在去年 mixlab 的一篇案例报告里,就介绍过 Brandmark 了,当时 Brandmark 还是 v1 的版本,现在已...

3033
来自专栏数据小魔方

图表案例|全球游戏行业用户渠道调查报告(尼尔森)

今天要跟大家分享的是一个尼尔森的典型图表案例——全球游戏行业用户渠道调查报告! 而且本图表是一个使用单选按钮的动态图表,非常适合作为案例来讲,同时可以巩固一下最...

3438
来自专栏walterlv - 吕毅的博客

将 UWP 的有效像素(Effective Pixels)引入 WPF

发布于 2017-11-14 03:26 更新于 2017-11...

401
来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

2847
来自专栏腾讯社交用户体验设计

H5动效的常见制作手法 - 腾讯ISUX

2372
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-今日头条适配方案

原文地址: https://www.jianshu.com/p/55e0fca23b4f

931
来自专栏企鹅号快讯

程序猿必备的10款web前端动画插件三

1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画,并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文...

1878
来自专栏互联网杂技

用微妙动效改善用户体验的简单方法

应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧...

2727

扫码关注云+社区