定义和用法

<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> 标签的更多相关文章

  1. HTML5笔记1——HTML5的发展史及标签的改变

    记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9, ...

  2. JavaScript学习笔记-Js操控HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  3. HTML语义化:HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  4. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  7. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  8. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  9. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  10. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

随机推荐

  1. 利用java的net包来实在数据采集的功能

    最近有好多朋友问我,数据抓取用java怎么做,就是每天把新浪的内地新闻频道的新闻前20条,抓到自己的网站或系统里,今天我统一在这里提供一个简单的例子,由于在这个过程中还需要解析html字符串,所以,我 ...

  2. 网站出现service unavailable的解决方法

    特别提示:本文的教程仅适合采用windows服务器的IIS组件上操作,service unavailable是许多网站会经常遇到的问题,希望对大家有用. 昨天一小段时间网站出现了service una ...

  3. pt-tcp-model

    http://blog.9minutesnooze.com/analyzing-http-traffic-tcpdump-perconas-pttcpmodel/ #获取200k个packets tc ...

  4. Web攻击技术

    Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...

  5. RabbitMQ和SpringBoot的简单整合列子

    一 思路总结 1 主要用spring-boot-starter-amqp来整合RabbitMQ和SpringBoot 2 使用spring-boot-starter-test来进行单元测试 3编写配置 ...

  6. Spring集成Quartz完成定时任务

    在JavaEE系统中,我们经常会用到定时任务,比如每天晚上凌晨之后跑批处理或者是每天某个时刻群发消息等等. 我们可以使用java.util.Timer结合java.util.TimerTask来去完成 ...

  7. ZZCMS8.1|代码审计

    这周的审计任务 ZZCMS8.1是站长招商网内容管理系统.审计这个CMS的原因很多,这里就不详说了(其实是漏洞类型多点)                                         ...

  8. Chapter 6: The Memory Hierarchy

    Disk Geometry: 磁盘的结构如图,每个面为surface,surface上的同心圆为track,track包含sector,不同的surface的同半径track构成cylinder.越外 ...

  9. Azure 基础 : 使用 Automation 定时开机

    不知何时 Azure 为虚机提供了自动关机的功能.这是一个很棒的功能,可以帮助我们定时关闭虚机并释放掉资源以节省开支.如果某台虚机在夜间不需要提供服务,我们就可以把它配置为晚上的某个时间点自动关机: ...

  10. IT连创业系列:App产品上线后,运营怎么搞?(上)

    又是一阵一阵的时光过去了,今夜,码的不是代码,是文字,继续和大伙分享创业的这一路历程. 话说,在突破技术的领域,IT连和IT恋上线后,慢慢走上运营这条路时,发现自己经常容易迷失. 毕竟,做为一名技术型 ...