慎用section标签

泛滥的<section>

在xhtml构建网页阶段,有一个名词叫“Divtis”(“Div症”),意为重构人员过多地使用了<div>包裹元素:嵌套繁琐或是错误使用(如该用<span>时也用<div>)。随着HTML5的流行,大量“语义化”标签的出现似乎拯救了他们,因为页面总算看起来没有那么多<div>了。

然而实际情况却不是这样,除去一些伪html5页面[1],我看到大部分页面里<div>仿佛在一夜之间就蒸发掉了。他们中的一部分变成了<header>、<footer>、<article>、<nav>、<aside>,剩下的却一股脑全变成了<section>,恐怖!

使用语义化的标签不是更好吗?为什么是恐怖?其实这并不好用一句话表达出来:HTML5的新标签只是帮助页面里的不同板块角色更明确,使重要内容更容易被机器准确地识别出来。在这方面或许跟标签的“role”属性比较像,我认为HTML5标签如果使用得当,“role”才是应该消失的东西。如果页面布局从div+css变成section+css,满屏都是同样的“语义化”标签就等于满屏都是没有语义的标签,因为机器看不出哪些<section>是容器哪些不是了,所谓的语义化也就大打折扣。所以,我起了一个比较吓人的标题:慎用<section>。

<section>是什么?

其实在W3C官方文档中不难找到答案:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

<section>看起来像是有语义版的<div>,但实际的使用是用在一个专题性的版块,且通常带有一个标题。适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方,也可以用于网站主页中划分简介、新闻、联系信息等板块[2]

官方还给了一个提示:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

说的十分明确,<section>不是一个普通的容器元素,当为了样式布局时,建议使用<div>。当元素内容明确的列举在大纲时建议使用<section>。

我想W3C的介绍说的已经足够明确,只要谨记一点就不容易用错:<section>不是一个通用的纯容器标签。对这个问题我困惑了很久,因为有些HTML5教程让我迷惑,而很多大网站也是在疯狂的使用<section>作为容器标签。

使用<section>

<section>可以相互嵌套,在页面中定义了一个特殊的顶级区块,于是可以从<h1>开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明,但我个人认为在每一层<section>里还是仅使用一个<h1>为佳。

以Wordpress主题为例,我认为与#sidebar相对的#content部分,使用<section>包裹一堆<article>作为页面的主要内容并不太合适。而使用<section>用在整体布局是明显错误的了。

而适合使用<section>标签的地方有:

  • 文章的评论列表,有着整齐的结构;
  • 文章内容的目录,有着文章内部结构纲要;
  • 侧栏widget,在WebDesignWall中我看到了这样的设计,因为widget内容大都是评论列表、文章列表,有着清晰的结构且是独立完整的一部分;
  • 包裹文章中各个章节的段落,但要在编辑器完成,目前来看并不易用。

随着标签越来越多样化,把标签用对本来就不是一件容易事,用得完全合理就更难了。好在目前这些东西用户是看不到的,产品经理也不会留意。如果没有强迫症,大可不必纠结与此。

最后我再啰嗦一次:
1、不要把<section>当<div>那样用;
2、没有section+css这个东西,严格的说div+css都是错误的说法。

好了,如果你有什么见解,欢迎发表评论与我交流。


伪html5页面[1]:即仅使用HTML5的<!DOCTYPE html>声明而再无HTML5特性、完全采用<div>标签布局的页面。

[2]:多为一些公司主页的版块化区域,“新闻”版块可能只有简单文章列表而没有正文,此类版块多在主要区域展示。

此条目发表在 前端开发 分类目录,贴了 标签。将固定链接加入收藏夹。

慎用section标签》有 17 条评论

  1. 芒果 说:

    你的理解完全正确,淘宝首页完全错误!

  2. Crazy Loong 说:

    html5的路还很长啊。到目前为止,我都还没好好看过html5,囧

  3. 高空车出租 说:

    呵呵,好久都不来了,过来坐坐。

  4. cai 说:

    正在看html5,,,,看过此文获益良多!

  5. wenjian 说:

    老兄说得是,看来得好好学了。

  6. IT圈中人 说:

    来学习下,现在还是新手,以后有时间学学。

  7. 笔头 说:

    完全凌乱了~

  8. dcxy 说:

    HTML5对JS依赖貌似有点严重啊。。。

  9. cein 说:

    其实感觉section就是一个DIV包装外壳,让你来把页面做的更加容易区分

    我宁愿用section分章 + div做里边版块的容器

  10. Pingback 引用通告: HTML5新标签作用与使用? - web前端 - 开发者问答

  11. 黑传说 说:

    个人觉得section应该用在article之内,另外,建议关掉你背景的鼠标轨迹,太占资源了。

  12. 黑传说 说:

    其实大部分 html5 标签都走火入魔了
    http://my.oschina.net/jobinson99/blog/133446

  13. flora 说:

    看完了文章还是不太理解section,还是没有方向

  14. 马志远 说:

    搜索“section”看到了你的文章,不然我正准备“section+css”博客了。多谢博主,打算好好学一下HTML5。

  15. fzmsss 说:

    给个实例也好啊

  16. Jack 说:

    我是一直当block来用,不过是在主体的block,每个block的内容都不同都有明确标题,比如最新主题、热门推荐,这样用section划分不是很好嘛

  17. Billy Herrington 说:

    Ass♂we♂can