码迷,mamicode.com
首页 > Web开发 > 详细

html5笔记——<section> 标签

时间:2017-11-11 15:58:44      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:阅读   功能   包含   组成   code   bsp   知乎   特殊   但我   

定义和用法

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

注意:

  • section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理,专用的是 div
  • section 里应该有 标题(h1~6),但文章中推荐用 article 来代替
  • 一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。
  • section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。

你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?

一个section通常由内容和标题组成,通常不推荐那些没有标题的内容用section,在HTML 5 Outliner这个网站可以检测没有标题的section,section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。

使用<section>

以下内容来自:慎用section标签

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

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

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

举例说明

以以下内容来自 你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?  问题中知乎用户的回答

拿报纸举个例子:
一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。
然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。

虽然这些标签有这个有那个的限制,官方规范建议也是模模糊糊的,但是不要忘记了html5语义化标签的意义,其中一个就是更方便开发人员阅读代码文档,理清代码结构。个人觉得,如果能方便自己和他人阅读理解的标签,那就大胆用吧。

最后,觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关,如果添加更多,更加细分、网页常用、功能专用的标签,像评论部分增加comment标签,友情链接增加link标签,分页增加paging标签,作者信息增加author标签等等,就不会纠结遇到相似功能的标签到底用那个好了,div就不用思考这个,一棍子打下去全中

为什么要用

为了语义化,有section、article、dl看这多舒服,人也好理解,计算机也好理解,比满眼的div好多了。
例如:
    <section>
        <h1>WWF</h1>
        <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>

div\section\article各自适用场景:

div充当容器的角色,用来设置某一块的总体属性(一个div里面可能包含多个section);
section用于强调某一个模块,强调模块本身是作为一个整体的;
article用于强调某一段独立的内容,强调内容的独立性。

推荐文章:慎用section标签

html5笔记——<section> 标签

标签:阅读   功能   包含   组成   code   bsp   知乎   特殊   但我   

原文地址:http://www.cnblogs.com/yingzi1028/p/7819099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!