建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

HTML5中div§ion&article之间的区别

时间:2011-03-07 07:59来源: 作者: 点击:
很多朋友刚接触HTML5 时,对它的标签很不适应,尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下,本文就介绍一下html5中这几个标签的区别 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见

很多朋友刚接触HTML5 时,对它的标签很不适应,尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下,本文就介绍一下html5中这几个标签的区别
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> (责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片