【译】停止滥用div!HTML语义化介绍

banner

DIVS该停止(滥用)了

我们喜欢(使用)

标签。它们已经存在了几十年,这几十年来,当需要将一些内容包裹起来达到(添加)样式或者布局目的的时候,它们成为首选元素。查看线上站点时,看到像下面这些内容的情况依旧很常见:


Why you should buy more cheeses than you currently do
Part 1: Variety is spicy
Part 2: Cows are great

Hoo,那有很多的div标签。但是,它有效。我的意思主要是,它具有你需要的结构。并且,我确定在你完成样式添加之后,它看起来会像你想要的那个样子。然而,它有些严重的问题:

  • 可访问性 - 许多a11y tools非常智能,会尽力解析页面结构,以帮助用户按照页面制作者的意图来引导用户,并为用户提供简单的跳转链接来指引他们到自己关心的页面部分。然而,

    标签并没有真正传递有关文档结构的任何有用信息。世界上最聪明的a11y tool仍然不是人类,不能指望其解析classid属性,或能够识别全世界开发人员命名块元素的奇怪和狂野的方式。我可以识别到class="article-header-level-2"是一个副标题,但是机器不能。(如果可以的话,把它从我电脑中拿出来,可我也还没准备好进行AGI革命呢。)

  • 可读性 - 要阅读此代码,你需要仔细扫描类名,从

    样板之间挑选出来。一旦你(的代码)深入几个层次,跟踪哪个
结束标记与哪个
开始标记对应,那就变得很棘手了。你开始非常依赖IDE功能,例如着色不同的缩紧级别或突出显示匹配的标记以跟踪您的位置,而在较长的文档中,它可能需要在这些功能之上进行大量的滚动。

  • 一致性和标准 - 开始新的工作或转移到新项目,并且必须从头学习代码库中使用的让人抓狂的标记,那可能会令人很沮丧。如果每个人都有标准化的方法来标记web文档中常见结构,那么在不熟悉代码库的情况下,都可以很容易的浏览HTML文件并快速处理它应该展示的内容。如果只有一个这样的标准...

  • HTML5: 这个标准

    HTML5并不新奇。这是轻描淡写;最初的工作草稿于2008年1月(11年前)发布,以征求公众意见,并于4年半前,2014年10月份成为一个全面W3C的推荐。所以,就像它已经存在了一段时间。

    HTML5的主要进步之一是引入了一组标准化的语义元素。术语“语义”指的是单词或事物的含义,因此”语义元素“是用于以更有意义的方式标记文档结构的元素,这种方式可以清楚地表明它们的用途和它们在文件中服务的目的是什么。而且重要的是,由于它们是标准化的,定义文档的这些元素可以被每个人使用并理解,包括机器人。

    我认为HTML5规范本身在

    元素定义下的一个注释中很好地总结了这个问题:

    注释:
    强烈建议作者将div元素视为最后采取的元素,在没有其它元素适合的(情况下)。使用更合适的元素而不是div元素可以使读者更容易访问,并且更容易为作者提供可维护性。-- https://www.w3.org/TR/html5/grouping-content.html#the-div-element

    我将语义块元素分为两类:主要结构内容指标。这些不是标准的条款或者其它条款;我在这篇文章中做了一些(区分)。但我认为这种区分足够有用。‍♂️

    主要结构

    有一个超级常见的模式,可在互联网上的网站,教程甚至CSS库中找到,并且有充分的理由。我们经常将最顶层的页面划分为三个区域:页眉主页页脚,然后根据需要将这些区域划分为多个区域。我在上面的例子中包含了这个来证明这点:

    
    
    ...
    ...
    ...

    我已经看过(并且使用过)这种模式很久了,以这种方式构造文档非常有意义,既可以读取HTML,又可以更加简单地在CSS中设置页面样式。页眉和页脚元素页可以使用PHP或Rails/ERB等语言中的部分模版来更易于使用,因为你可以在整个站点中包含常见的页眉和页脚部分:

    
    
    
    ...

    所以这就是事情:每个人都认为这是一个很好的模式。这包括WHATWGW3C的人员,他们将模式标准化为HTML5中的四个新元素,名称非常清晰:

    ,
    ,

    Bookends:

    元素基本上是双胞胎:它们在规范中的定义非常相似,并遵循相同的规则,关于它们被允许使用的位置,唯一区别在于它们的语义目的:页眉在事物的前面,页脚在事物的末尾。对于事物,我的意思不仅仅是页面的: 这对元素的设计用于文档的任何部分,代表一大块内容,具有明确的开头和结尾。这可以包括表格,文章,文章部分,社交媒体网站上的帖子,卡片等。

    页眉和页脚在语义上接近sectioning root或sectioning content元素。像,

    ,
    , ,

    你可能感兴趣的:(【译】停止滥用div!HTML语义化介绍)