HTML中div、article、section标签区别与用法.pdfVIP

div

◼HTMLSpec:“Thedivelementhasnospecialmeaningat

all.”

◼这个是我们见得最多、用得最多的一个。本身没有任何

语义，用作布局以及样式化或的钩子(hook)。

◼W3C——流式元素

section

◼HTMLSpec:“Thesectionelementrepresentsageneric

sectionofadocumentorapplication.Asection,inthis

context,isathematicgroupingofcontent,typicallywitha

heading.”

◼与div的无语义相对，简单地说section就是带有语义的div了，

但是千万不要觉得真得这么简单。section表示一段专题性的内

容，一般会带有标题。看到这里，我们也许会想到，那么一篇博

客文章，或者一条单独的评论岂不是正好可以用section吗？接

着看

section

◼section应用的典型场景有文章的章节、框中的页、

或者中有编号的部分。一个的主页可以分成简介、和

联系信息等几部分。

◼section不仅仅是一个普通的容器。当一个只是为了样

式化或者方便使用时，应该使用div。一般来说，当元素内

容明确地出现在文档大纲中时，section就是适用的。

◼注意：section内一定有heading

article

◼HTMLSpec:“Thearticleelementrepresentsaself-

containedcompositioninadocument,page,application,

orsiteandthatis,inprinciple,tlydistributable

orreusable,e.g.insyndication.

◼article是一个特殊的section，它比section具有更明确

的语义,它代表一个独立的、完整的相关内容块。一般来说，

article会有标题部分(通常包含在header内)，有时也会包含

footer。虽然section也是带有性的一块内容，但是无论

从结构上还是内容上来说，article本身就是独立的、完整的。

article

◼当article内嵌article时，原则上来说，的article的内容

是和外层的article内容是相关的。例如，一篇博客文章中，包

含用户提交的评论的article就应该嵌套在包含博客文章article

之中。

总结

◼divsectionarticle，语义是从无到有，逐渐增强的。div无任何语义，仅仅

用作样式化，对于一段性的内容，则就适用section，而假如这段内容

可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。原则

上来说，能使用article的时候，也是可以使用section的，但是实际上，

假如使用article更合适，那么就不要使用section。nav和aside的使用

也是如此，这两个也是特殊的section，在使用nav和aside更合适的

情况下，也不要使用section了。

◼对于div和section、article以及其他的区分比较简单。对于section

和article的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不

是还能完整的、独立的内容而存在，这里面的重点又在完整身上。

因为其实说起来section包含的内容也能算作独立的一块，但是它只能算是

组成整体的一部分，article才是一个完整的整体。