HTML5之section与article与div

W3C:<section>标签定义文档中的节(section、区段)。

适用场景:(与article互相当干爹,怎么用分情况!)

用article呢还是用section呢?还是用div呢?


当一个区域没有语义时果断用div标签!

有语义就要分情况了

  • 一个博文用article,然后用section将不同的段落分隔开。
  • 博文下面的评论用section,然后用article将每个评论分开。
  • 这个区域是提供阅读的文章果断用article。
  • 如果这个区域不是单独的,而是跟上下文有联系,那么果断用section。


HTML5<article>标签


定义和用法:
<article>标签定义独立的内容。

可能的article实例:

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论
eg:
<!DOCTYPE html>
<html>
<head><title>xxxx</title>
</head>

<body>
	<article>
    	<a href="http://www.apple.com">Safari 5 released</a><br />
        7 Jun 2010.Just after the announcement of the new iPhone 4 at WWDC,
        Apple announced the release of Safari 5 for Windows and Mac......
    </article>
</body>	
</html>

article标签的内容独立于文档的其余部分。
========================================================================

HTML5<section>标签


定义和用法:
<section>标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
eg:
<!DOCTYPE html>
<html>
<head><title>xxxx</title>
</head>

<body>
	<section>
    	<h1>PRC</h1>
        <p>The people's Republic of Chinia was bron in 1949...</p>
    </section>
</body>	
</html>
属性:cite 
值:URL
描述:section的URL。假如section摘自Web的话。

========================================================================

HTML5<div>标签

定义和用法:
<div>标签定义HTML文档中的分隔(divsion)或部分(section)。
<div>标签常用于组合块状元素,以便于通过样式表来对这些元素进行格式化。

eg:
<!DOCTYPE html>
<html>
<head><title>xxxx</title>
</head>

<body>
	<div style="color:#09F">
    	<h3>This is a header</h3>
        <p>This is a paragraph.</p>
    </div>
</body>
</html>


注释:浏览器通常会在 div 元素之前和之后插入换行符。

提示:<div> 标签常用于对块级元素进行组合,这样就可以使用样式对它们进行格式化。


============================================================================================

HTML5 <div>、<article>、<section>之间的区别

来自HC
在Html5中,加入了很多用于“布局”的标签,他们有<header>、<nav>、<section>、<article>、<aside>、<footer>、<hgroup>等等。


<section>与<article>最为相似,而且和div标签貌似也有很大的相似之处。
但这些标签 是为了布局而生的,自然有它们更精确的语义定位,或者说它们更将强调HTML的语义。
div
这个标签一直是我们间的最多、用的最多的标签。它本身无任何语义,用作布局以及样式化标签。
section
与div相似,但有更进一步的语义。section用作一段有专题性的内容,一般在它里面会带有标题。
section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
article
是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。
-------------------------------------
div、section、article,语义是从无到有,逐渐增强的。
div无任何语义,仅仅用于样式化或者脚本化的标签,对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用article。
原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。




  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值