专栏首页开发经验记录关于Web语义化的意义

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

相关文章

  • 一步步编写自己的PHP爬取代理IP项目(三)

    上一章节我们讲完了自动加载,现在我们正式进入爬虫核心代码的编写中,首先我们需要先看看整个目录

    NateHuang
  • 常用但容易忘记的sql语句(sql server为主)

    1.说明:随机取出10条数据 a.Sql Server: select top 10 * from tablename order by newid() b....

    NateHuang
  • 机器学习:数据预处理之独热编码(One-Hot)

    在机器学习算法中,我们经常会遇到分类特征,例如:人的性别有男女,祖国有中国,美国,法国等。 这些特征值并不是连续的,而是离散的,无序的。通常我们需要对其进行特...

    NateHuang
  • forEach循环实现卡片列表

    祈澈菇凉
  • 这种div高度自适应确定你知道吗?

    _simple
  • 下拉菜单;手风琴;九宫格的Jquery的使用实例

    Dream城堡
  • Bootstrap学习文档(三)

    Bootstrap 中还带有免费的图标供我们使用,这些图标使用起来很简单,就像使用字体一样,改变图标的大小就是改变字体的 font-size,改变图标的颜色就是...

    Wizey
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • web完全响应式布局 原

    在页面布局中响应式布局优势很明显,能适应不同的屏幕,现在很多的网站系统也都是响应式布局

    tianyawhl
  • Web-第五天 BootStrap学习

    将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

    Java帮帮

扫码关注云+社区

领取腾讯云代金券