关于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 条评论
登录 后参与评论

相关文章

来自专栏搞前端的李蚊子

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/inde...

4728
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

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

从线条艺术到DIY实现一个网状体Net的js库

今天无意中看到一个可视化作品: WHAT MADE ME? INTERACTIVE PUBLIC INSTALLATION Most Original Exh...

2866
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

732
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

1273
来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

1594
来自专栏HTML5学堂

利用本地存储,记录滚动条的位置

在一定时间范围内,用手机微信打开之前浏览过的订阅号的文章,文章显示出来的是你上次阅读到的位置,而不是从头开始显示。手机微信是怎么知道你文章阅读的位置?前端工程师...

3337
来自专栏互联网杂技

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

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

3487
来自专栏程序人生 阅读快乐

超实用的jQuery代码段

本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本...

941
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

1985

扫码关注云+社区