• 页面重构中的语义化(转自鬼哥)


    在想什么是“模块化”的时候,HTML部分的模块化也让我烦恼了一段时间,其中引出了另一个问题,就是“语义化”,本文想与大家探讨的内容。

    “语义化”的知名度应该不亚于“模块化”,WEB标准在国内推广后,其中一个亮点就是“有利于 SEO ”,而“语义化” 也就被提出来了。目前讲“语义化”的文章基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等,大多是洗脑文。

    做了几年的页面,听了不少人讲“语义化”,也讨论了几年的“语义化”,可是到现在,大部分人都还是不清楚到底“语义化”要怎么做,这几年间我也试着去理清相关的内容,只是有些点始终无法想透,特别是那些没有嵌套错误的标签,如列表(li),可以使用的标签十分广泛(可包含标签: %Flow; ),加上对“列表”理解上存在差异,导致在一定程度上的滥用。

    我一直使用的方法是,将页面样式去掉,看页面是否以一种文档格式显示,并且是容易阅读的。使用这个方式可以让你对“语义化”的理解在短时间内有所提升。当然有些标签在浏览器中并无具体的表现,或表现与其它标签一样,不过方便用户读取内容,不正是“语义化”的意义吗?好像很对,在 森林的聚会 上被allan问到 做语义化到底为了什么? 时,我一时无言了,只是为了“祼奔”1 时好看?有多少用户会看到“祼奔”的页面,并且看下去?当时我是用了“盲文阅读器对不同标签所发出的声音是不同的,以此来传达信息的重要性”来说服allan,只是,连我自己都说服不了。

    另外一个例子,关于标题的,“是否所有的块都需要添加一个标题?”小志的《 列表模块是否需要标题 》讨论了这个问题。我们经常使用隐藏的文字将内容放到页面上,这种做法我们一般也称之为“语义化”;选择要使用什么标签,我们也称之为“语义化”。选择标签是件很痛苦的事,比如一个电影列表页面,看上去是一个列表,是列表就使用 li ,很多同学都是这种思维,这个角度偏重于标签的语义。我们再从内容的角度来看,什么是列表?我记得之前看过的解释是“一些简短、有某种关联性的内容排列在一起,称之为列表”(准确的解释现在不好找了,百度和google也有找不到的东西),应该是区别于段落的,从这点上看,列表中放标题、段落、块等等都是不合适的。很多时候我们都只是关注到其中的一方面,比如我们在写代码的时候,更多的关注到当前部分应该使用什么标签,而不是关注到这个内容在整个页面中应该是什么语义的。

    前段时间重新思考了这个问题:“什么是语义化”。发现一直以来都很纠结,因为我们把两个思维混在一起了,因此我提出了“内容语义化”和“代码语义化”,在一定程度上能让思维清析些,之后发现,其实“内容语义化”和“代码语义化”并不是独立的东西,我们是根据内容的语义去选择标签的,这时标签的语义也就代表了内容的语义。

    所谓语义化,就是尽可能的理解要表达的内容,选择适合的标签,将内容转换成浏览器认识的语言,通过浏览器传达给用户。从这个角度来说,我们更像是“翻译”。我们要做的还不只是简单的翻译,毕竟我们的“听众”并不是单一的。

    目前来说,做语义化的确还不能体现出它的优点,可能的原因是:

    • 除了专业的人外,没人会去看我们的标签是否使用得有语义
    • HTML的标签还不足以表达所有可能的语义
    • 语义化会需要增加一些额外的代码

    简单说下我的想法:记得前段时间有同学向我反映一个设计稿的问题,主要是说产品经理让她改设计稿上一个写反了的广告语,“XXYY”改成“YYXX”,而且看上去意思差别并不大。我给的回答是,在我们这种外行看来可能没什么差别,但这正是专业的体现。 外行看热闹,内行看门道 ,我们写的页面并不是所有人都会去看源代码的,那我们为什么还要注意那么多东西呢? 我们也一样,用户只是看到了一小部分,更多的是做给懂得点右键选“查看源文件”的人看的 这点也是从我们自身发展来说的,如果你想在这个行业内有所建树,专业化是必须的。也就是说如果你不考虑自己的发展,也就不用讨论“语义化”的问题了。

    HTML5新增的几个标签,更多的补充了目前HTML标签语义上的不足,这点也可以看出语义化是以后发展的一个方向,当然更大的目标是统一的实现标准,语义化只是为了这个目标所使用的一个方法。这可能需要相当的一段时间,而我们正经历着这个过程。

    在“语义化”的过程中,的确是需要增加一些标签。这个需要做页面的同学先明白一个问题:我们是为了什么而做页面的?正如前面所说,我们是内容的传播者,我们尽可能的让更多的用户更容易的从互联网获取信息。那么,表现上不需要的标签就是多余的吗?虽然我们现在很多的表现还需要额外的标签来支持,但这也是因为浏览器对样式的支持不完全造成的。随着浏览器对样式支持的改进,这类为了表现而写的标签也会越来越少。

  • 相关阅读:
    MySQL之事务
    TP5之查询那些事
    TP5之上传多张图片
    PhpStorm之设置字体大小
    Git入门
    TP5之自定义分页样式
    TP之安全机制
    Navicat Premium连接服务器数据库
    IEnumerable 与 IEnumerable<T>
    关于递归
  • 原文地址:https://www.cnblogs.com/dillonmei/p/12551888.html
Copyright © 2020-2023  润新知