div、section、article 的区别
作者:糖伴西红柿 来源:前端观察 发布时间:2011-02-26 15:39:00
HTML5 中 div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。
div
HTML Spec: “The div element has no special meaning at all.”
这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。
section
HTML Spec: “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.”
与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:
“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”
当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。
那么,section 应该什么时候用呢?再接着看:
“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。
要注意,W3C 还警告说:
“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 就是适用的。
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
猜你喜欢
- osql简单用法:用来将本地脚本执行,适合sql脚本比较大点的情况,执行起来比较方便osql -S serverIP -U sa -P 12
- 简介因为javascript默认情况下是单线程的,这意味着代码不能创建新的线程来并行执行。但是对于最开始在浏览器中运行的javascript
- 表还是total_sales添加一项表:SQL语句:SELECT * from( SELECT a1.N
- 系列教程MySQL系列之开篇 MySQL关系型数据库基础概念 MySQL系列之一 MariaDB-server安装 MySQL系列之二 多实
- if exists (select * from dbo.sysobjects where id = object_id(N'[db
- 本文实例讲述了python中list循环语句用法。分享给大家供大家参考。具体用法分析如下:Python 的强大特性之一就是其对 list 的
- 开始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期
- for splitValue in set(dataset[:, featureIndex].tolist()):首先set是一个无序,无重
- linux安装mysql服务分两种安装方法:①源码安装,优点是安装包比较小,只有十多M,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容
- 在数据处理过程中,经常会出现对某列批量做某些操作,比如dataframe df要对列名为“values”做大于等于30设置为1,小于30设置
- 前言matplotlib.pyplot是一些命令行风格函数的集合,使matplotlib以类似于MATLAB的方式工作。每个pyplot函数
- 前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可。//例如要请求的
- 这两天做了一个判断浏览器类型和版本号的业务,记录下相关的js代码: function allinfo(){ var ua = navigat
- 这里我不讨论 python 的一些有用的库或者框架,只从语言本身,最小支持的情况下谈论这门语言本身。语言的发展都是越来越接近Lisp,这也是
- scrapy框架概述:Scrapy,Python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数
- # vi mysqlusers.txtcreate database dataname;grant all privileges on da
- 你是否曾经想在数据库中存储一个日期而没有时间部分,或者想存储一个时间值希望有更高的精度?在SQL Server 2008的介绍中,微软介绍了
- SQL SERVER数据库用datetime类型的时候 如果插入NULL,没有问题 如果插入空串"",就会默认1900-
- fso对象CreateTextFile方法调用时可能会报“无效的过程调用或参数”错误,在使用ASP生成静态页面时,如果传入的字符串参数编码为
- 先来看一个栗子EXPLAIN select * from employees where name > 'a';如果用