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

相关文章

来自专栏无原型不设计

成为优秀UI设计师,必须了解的UI设计规范

今天带来的这些规范,可是成为优秀UI设计师必须知道的“纯干货”,还能让大家深刻了解UI设计规范(https://ds.mockplus.cn)的本质是什么。

764
来自专栏SEO

「SEO」页面搜索引擎优化详细解说

2646
来自专栏点滴积累

《类型编程晋级——shapeless类库使用指南》前言及第一章翻译

从年初开始进行此项工作,我和合作伙伴包亮付出了大量而艰辛的劳动。翻译中我们本着能够让所有人看明白、看懂的目的,反复修改高达五次。现基本翻译完毕,有出版意向,如果...

4128
来自专栏非著名程序员

编程内功心法:如何写代码?

写代码就是学一门语言然后开始撸代码吗?看完了我的《GoF 设计模式》系列文章的同学或者本身已经就是老鸟的同学显然不会这么认为。编程是一项非常严谨的工作!

58912
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

712
来自专栏较真的前端

[译]图解React

React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

582
来自专栏烙馅饼喽的技术分享

记一个脚本解释器的开发

最近可以有1个月左右的空闲,可以稍微整理一下这个脚本解释器的开发过程。 一、缘由   2014年左右,我们使用AIR技术,开发了一个3D战争类型的手游。那时候手...

3217
来自专栏大数据风控

懒癌必备-dplyr和data.table让你的数据分析事半功倍

duang,duang!Erin又上线为大家分享干货来了。 最近Erin在做信用风险评级模型的开发,几千行的代码敲的我头晕眼花。作为一个懒癌晚期,并且追求高...

1877
来自专栏liulun

riot.js教程【一】简介

题记 这是一个系列文章的第一篇 如果关注riot.js的人,可以关注我的博客; 我接下来会持续不断的发这一块的文章; 系列文章内容大多来自官网翻译; Riot...

2026
来自专栏落影的专栏

GPUImage详细解析(八)视频合并混音

回顾 GPUImage源码解析、图片模糊、视频滤镜、视频水印、文字水印和动态图片水印GPUImage的大多数功能已经介绍完毕,这次的demo是源于简书的一位简友...

2825

扫描关注云+社区