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.
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 HTML Spec: The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
HTML Spec 中接著又列舉了一些 article 適用的場景。 This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
復制代碼代碼如下: !DOCTYPE html html lang="en" head meta charset="utf-8" title 初學html5 /title !--meta tags-- meta name="keywords" content="" meta name="description" content="" !--stylesheets-- link rel="stylesheet" href="css/common.css" type="text/css" link rel="stylesheet" href="css/layout.css" type="text/css" link rel="stylesheet" href="css/reset.css" type="text/css" !--javascript-- script src="js/jquery-1.3.2.min.js" /script !--conditional comments-- !--[if IE] script src="js/html5.js" /script ![endif]-- /head body div id="container" header id="page-header" div id="logo" a href="/" img src="images/graphic-logo.gif" alt="mylogo" /a /div nav id="main-navigation" ul li a href="#" 首頁 /a /li li a href="#" 關于 /a /li li a href="#" 服務 /a /li li a href="#" 信息 /a /li li a href="#" 聯系 /a /li