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>
猜你喜欢
- 阅读上一章:Chapter 10 应用CSSChapter 11 打印样式先前在第10章中,讨论了几种为文档应用CSS的方法,这一章是要研究
- 【原文地址】Tip/Trick: Url Rewriting with ASP.NET 【原文发表日期】 Monday, February
- 配置环境: 1、数 据 库:Oracle 8i R2 (8.1.7) for NT 企业版 2、安装路径:C:ORACLE 实现方法: 1.
- 是在客户端确认还是在服务器端确认? <SCRIPT LANGUAGE="VBSc
- 不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是
- 测试环境:1:xp系统2:双显,1680×1050 + 1050×16803:chrome 版本4.14:ff版本3.6chrome是我的默
- 在本机运行含有JavaScript代码的网页时(比如Google AD代码),IE浏览器会产生一个警告。这个“警告”确实很烦人,开始时还会误
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
- asp上传的时候出现这种 错误:Server 对象 错误 'ASP 0177 800401f3'Server.CreateO
- 代码如下:create table T_NEWS ( ID NUMBER, N_TYPE VARCHAR2(20), N_TIT
- Internet Explorer 9 Platform 1.9.7916.6000 Preview 4微软今天公布了IE9 Platfor
- 一、垃圾还是经典网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创
- Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
- 解决方法:1。 改表法。可能是你的帐号不允许从远程登陆,只能在localhost。这个时候只要在localhost的那台电脑,登入mysql
- 使用 IE8 时发现其原生的 JSON 解析器存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。http://lab.grace
- 一、出错情况 有些时候当你重启了数据库服务,会发现有些数据库变成了正在恢复、置疑、可疑等情况,这个时候DBA就会很紧张了,下面是一些在实践中
- 核心提示:本文针对mysql-noinstall版本,也就是解压缩版的安装配置应用做了个总结,这些操作都是平时很常用的操作。文章中不对mys
- 你可以通过自定义函数接口 (UDF)来添加函数。自定义函数被编译为目标文件,然后用CREATE FUNCTION 和DROP FUNCTIO
- 内容摘要:严格地说,ASP 并不是一门编程语言,所以不存在类这一概念,我们这里说 ASP 类是指 A
- 在SQL Server Management Studio 用WINDOWS连接的情况下改实列的“属性&rdqu