html5 article标签与section,section标签和div标签的区别

  html5 article标签与section,section标签和div标签的区别

  刚接触HTML5的时候,对它的标签很不适应,甚至一度有点反感。特别是对于div、section和article,很难知道应该在哪里使用它们。div

  HTML规范:

  div元素没有任何特殊的含义。

  这个标签是我们看到最多,使用最多的一个。它本身没有语义,被用作布局和样式或脚本的钩子。section

  HTML规范:“section元素表示文档或应用程序的通用部分。在这种情况下,节是内容的主题分组,通常带有标题。

  相对于div的语义,简单来说section就是一个有语义的div,但是不要以为真的那么简单。章节是指一个特殊的内容,通常带有标题。看到这里,我们可能会想,难道一篇博文,或者一条评论,不正是用section的合适地方吗?然后看:

  当联合元素的内容有意义时,鼓励作者使用article元素而不是section元素。

  当元素的内容聚合在一起才有意义时,应该使用Article而不是section。

  那么,什么时候应该使用section呢?然后看:

  章节的例子可以是章节、选项卡式对话框中的各种选项卡式页面或者论文的编号章节。网站的主页可以分为介绍、新闻条目和联系信息几个部分。

  section的典型应用场景是文章的章节、选项卡对话框中的选项卡或者论文的编号部分。一个网站的首页可以分为几个部分,比如介绍、新闻、联系方式。其实我对这里传达信息很感兴趣,因为我感觉下面要介绍的section和artilce更适合模块化应用。这个话题后面会有专门的文章讨论,所以我这里暂时跳过。

  注意,W3C还警告说:

  section元素不是一般的容器元素。当出于样式目的或者为了方便脚本而需要一个元素时,鼓励作者使用div元素。一般规则是,只有当元素的内容在文档的大纲中明确列出时,section元素才是合适的。"

  部分不仅仅是一个普通的容器标签。当标签仅用于样式或方便使用脚本时,应该使用Div。一般来说,section适用于元素内容清楚地出现在文档大纲中的情况。

  XML/HTML代码将内容复制到剪贴板文章hgroup 1 apple/h1h 2 taste,好吃的水果!/H2/h group ptheappleisthomaceousfruitofappletree。/p节h1 red licious/h1 p thesebrightredapples sarethemostcommonfoundinmanysupermarkets。/p/section section h1 granny Smith/h1 pThesejuicy,greenapplesmakeagreatfillingforapplepies。p /section /articlearticle

  HTML规范:

  article元素表示文档、页面、应用程序或站点中的自包含组合,并且原则上是可独立分发或可重用的,例如在联合中。

  Article是一种特殊的section标签,它比section具有更清晰的语义,它表示一个独立完整的相关内容块。一般来说,一篇文章会有一个标题部分(通常包含在页眉中),有时会有一个页脚。虽然section也是一段有主题的内容,但文章本身在结构和内容上是独立完整的。

  HTML规范列出了article适用的一些场景。

  这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具,或者任何其他独立的内容项目。

  文章嵌入文章时,原则上内层文章的内容与外层文章的内容相关。比如在一篇博文中,包含用户提交评论的文章应该在博文文章中潜逃。

  问题怎么算“完整的独立内容”?最简单的判断方法是看这个内容在RSS提要中是否完整。看这一段是否断章取义,是否完整独立。

  示例:

  XML/HTML代码将内容复制到剪贴板文章标题h1 theveryfirstruleoflife/h1 ptimepubdatedatetime= 2009-10-09t 14:28-08:00 /time/p/header pif在您附近的任何地方都有一个微型电话,假设它 shot and sending whatever you are saying to the world .说真的,/p./p页脚ahref=?comments=1 显示注释./a/footer/article article header h1 the veryfirstruleoflife/h1 ptime updatedatetime= 2009-10-09t 14:28-08:00 /time/p/header p在您附近的任何地方都有一部微型手机,假设它正在发送您向世界发送的任何内容./p section h1Comments/h1文章页脚p posted by:George Washington/p ptimepubdatedatetime= 2009-10-10t 19:10-08:00 /time/p/footer pye ah!尤其是在谈论你的说客朋友的时候!/p/文章文章页脚posted by:George Hammond/p ptime pubdatetime= 2009-10-10t 19:15-08:00 /time/p/Footer Phey,YouHavethesamefirstnamename。/p/文章/章节/文章摘要

  Sectionarticle,语义是从无到有,逐渐增强的。Div没有任何语义,只是作为一个风格化的或者脚本化的钩子。对于一节的主题内容,它适用于节,而如果这个内容可以脱离上下文,是一个完整而独立的内容,它适用于文章。原则上可以用article的时候也可以用section,但实际上如果用article更合适,就不要用section。navaaside和navside的使用也是如此,也是特殊段。如果nav和side更合适,就不要用section。

  div和section、article以及其他标签之间的区别很简单。乍一看,很难区分小节和文章。其实重点是看这个内容如果脱离了整体是否还能作为完整独立的内容存在,这里的重点是完整性。其实section所包含的内容可以算作一个独立的块,但只能算是整体的一部分,而article是一个完整的整体。

  其实有时候每个人都有自己的看法,所以很难避免做决定。我该怎么办?

  在HTML5设计原则中,有一条是专门用来解决类似情况的:

  最终用户优先级(选区优先级)

  "在冲突的情况下,考虑用户优先于作者优先于实现者优先于规范优先于理论纯度."一旦发生冲突,最终用户优先,其次是作者、实现者、标准制定者,最后是理论完善者。

  推荐你多看几遍HTML5设计原理,这是复杂世界背后的终极意义。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: