关于Web语义化的意义

时间:2022-05-04
本文章向大家介绍关于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 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

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