首页 > 教程 > 关键词 > div最新资讯 > 正文

HTML5中div section article的区别

2011-02-25 16:14 · 稿源:前端观察,www.qianduan.net/

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。

div

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。

section

与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:

当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。

那么,section 应该什么时候用呢?再接着看:

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

要注意,W3C 还警告说:

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>

article

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

HTML Spec 中接着又列举了一些 article 适用的场景。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

问题是怎么才算“完整的独立内容”?有个最简单的判断方法是看这段内容在 RSS feed 中是不是完整的。看这段内容脱离了所在的语境,是否还是完整的、独立的。

例子:

<article>
<header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
  <a href="?comments=1">Show comments...</a>
</footer>
</article>

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

总结

div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法,所以难免有难于决断的时候,怎么办?

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

最终用户优先(Priority of Constituencies)

 一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理,这才是纷繁世界背后的最终奥义。

  • 相关推荐
  • 大家在看
  • 三星将发布更多Fan Edition旗舰设备

    三星于昨日发布了大家期待已久的 Galaxy S20 FE 机型,起步价仅为 699 美元(约 4770 RMB)。发布会期间,这家韩国电子巨头还宣布未来将推出更多的 Fan Edition 旗舰设备。此前,三星已经通过“Lite”尾缀,将同系列的产品价格拉得更低。但现在看来,该公司将放弃这一“廉价”的命名,转而采用更有人缘的“Fan Edition”。

  • iPhone12 Pro Apple 1 Edition曝光 梦回70年代只有9台

    日前,珠宝商Caviar又推出了一款iPhone 12 Pro(Max)定制方案,但与往不同的是,这次的定制设计以Apple 1 PC为主题,对于当时的纹理、logo、细节特征等都进行了很好地还原。

  • Imagination下代新品引入光线追踪:未来桌面级体验

    Imagination今天发布了新一代IMG B系列移动GPU,同时预告将在明年发布下一代IMG C系列,最大亮点就是加入对光线追踪的支持,这在移动设备上还是第一次!NVIDIA RTX 20系列显卡开创了消费级光追

    GPU
  • 阿里云 Teambition 网盘移动端迷你版国庆日上线

    阿里巴巴旗下办公套件Teambition 官方宣布,Teambition 网盘移动端迷你版即将在国庆日上线,马上可以开放更多内测了。根据海报介绍,Teambition网盘国庆上线后可以查看和下载文件,再过一个月支持上传、下载、分享功能更完善,可以自定义底部导航。

  • iPhone 13部分细节曝光:将采用120Hz ProMotion显示屏

    显示器行业分析师Ross Young在社交媒体爆料了一系列“iPhone 13”的信息。根据爆料,"iPhone 13"将继承即将到来的iPhone 12产品线,同时还会发布第三代iPhone SE。iPhone 13系列包括一款6.7英寸的 "Pro Max"机型、一款6.1英寸的 "Pro"机型、一款6.1英寸的非Pro机型和一款5.4英寸的 “mini"机型。Ross Young称,iPhone 13 Pro机型上 "最重要的发展"将是采用120Hz功能的ProMotion显示?

  • 全球首款64核工作站联想ThinkStation P620震撼发布

    联想首发亮相全球首款64核工作站联想ThinkStation P620。ThinkStation P620作为联想和AMD携手打造的史诗级工作站产品,在发布之前已备受各界关注。作为全球首款也是唯一一款采用AMD Threadripper PRO处理器的专业工作站,联想ThinkStation P620将前所未有的强悍性能和扩展性融于一体,为影视特效、建筑BIM、工业设计、精密影像处理等高运算量、高技术含量的专业创新工作提供前所未有的极致体验,树立全新行业标杆

  • 金秋离别必备BGM,QQ音乐开放平台Predictive Model助力《厚颜无耻》全网走红

    近日,QQ音乐开放平台再出“爆款”——Q音音乐人曲肖冰的原创单曲《厚颜无耻》一经上线,便接连跻身QQ音乐巅峰榜流行指数榜、热歌榜等多榜TOP3,并一路从音乐平台火“出圈”,席卷各大短视频平台,掀起全网翻唱热潮,堪称最佳“秋别”BGM。“那关于你的过去就该原地消失,厚颜无耻,我不愿穷追不舍”,在曲肖冰充满质感的嗓音加持下,该歌曲唱出了挥别回忆、斩断思恋的果断与洒脱,深受乐迷的追捧与喜爱。被打动的乐迷纷纷融入QQ音

  • 联想即将发布全球首款64核工作站ThinkStation P620 性能突破边界

    9月23日上午10点,联想将举办“智·造原力 联想ThinkStation工作站全家族发布会”。包括徐工集团,Foundry,超图软件,清华大学等重磅伙伴都将来到发布会现场,共同见证史诗级工作站联想ThinkStation P620的震撼亮相,并深入对话探讨中国企业如何通过高效的数字化手段在海量运算时代把握致胜先机。本次发布会还将在联想官网、B站、天极网、土木在线、e-works、聚变网等平台同步直播。本次发布会将重磅推出史诗级工作站新品ThinkSta

  • NVIDIA公布RTX 3090官方性能:比3080快15%、比TITAN RTX快50%

    为给今晚RTX 3090全球首销预热,NVIDIA官方索性直接放出了RTX 3090的性能成绩。官方称,RTX 3090平均比RTX 3080快了10~15%。如果对比上一代“泰坦”TITAN RTX,那么更是能快50%。

  • 巴基斯坦宣布禁用TikTok,称未过滤不道德内容

    Tiktok目前虽然在美国地区依然可以继续运营,但此前已经遭到了印度的禁令,如今对Tiktok下达禁用的国家增加了巴基斯坦。就在10月9日巴基斯坦电信管理局(PTA)发布公告称,将禁用TikTok应用,原因是收到社会各界“关于TikTok不道德及不雅内容的大量投诉”。

  • SpaceX、蓝色起源和Dynetics的月球着陆器通过美国宇航局审查

    9月27日消息,据国外媒体报道,美国太空探索技术公司SpaceX、蓝色起源和Dynetics的月球着陆器通过了美国宇航局(NASA)的审查。完成对蓝色起源、Dynetics和SpaceX拟议的月球着陆器的“认证基准审查”,对于人类着陆系统(HLS)和Artemis项目来说是重要的一步。据悉,美国宇航局的Artemis项目旨在2024年前将宇航员送回月球,而月球着陆器是该项目的关键部分,该着陆器将携带两名宇航员(其中一名是女性)前往月球。本周

  • 原神关于Anti-Cheat反外挂程序问题的修复声明公告

    原神最近被曝有后门程序,日本玩家反应过激,原神官方发布了关于Anti-Cheat反外挂程序的说明公告,表示这是反外挂程序的问题,下面就一起来看看吧。

  • 字节跳动发布TikTok不实传言说明,说明全文一览

    北京时间 9 月 21 日早间,字节跳动官方发布“关于TikTok若干不实传言的说明”,字节跳动表示创始人及中国管理团队拥有控股权,控制字节跳动。

  • 全民AI影集,Timebook用人类数字足迹为世界构建回忆

    2004 年,哈佛大学学生马克·扎克伯格发布了Facebook的雏形,让哈佛大学的学生能够使用仅限校园内用户的在线社交工具,开启了在线社交时代爆发性发展的时代。十数年过去,在线社交这件事有了众多形态:兴趣交友、熟人社交、社群、陌生人社交等等,然而支撑它们的“在线人格”的内容却没有太多变化:一个ID,一些图片,或是一段文字。同样,以LBS(Location Based Service)为特点的在线服务,如在线点评app Yelp,依靠的往往也是用

  • 新进展!美法院裁决暂缓实施将TikTok下架命令

    美法院暂时叫停特朗普政府对TikTok的禁令的一项命令,该命令将禁止用户从美国应用商店下载TikTok。

  • 美法官叫停特朗普对TikTok的禁令 原本将在数小时内生效

    【美法官叫停特朗普对TikTok的禁令】据美国消费者新闻与商业频道(CNBC) 9 月 28 日报道,美国联邦法官宣布叫停特朗普对TikTok的下载禁令,这一禁令原本将在数小时内生效。

  • 字节跳动发布关于TikTok若干不实传言的说明:不涉及任何算法和技术的转让

    9月21日消息,字节跳动发布《关于TikTok若干不实传言的说明》。字节跳动表示,为确保1亿美国用户能够继续使用TikTok,满足美国政府监管要求,加强TikTok美国业务,字节跳动、甲骨文、沃尔玛对

  • 英国将调查Apple Music和Spotify对艺术家的公平报酬问题

    据外媒MacRumors报道,英国文化、媒体和体育部正在对包括AppleMusic、Spotify和YouTube在内的音乐流媒体服务展开调查,以确定音乐人是否得到公平的报酬。此次调查是在艺人投诉他们的作品所获得的报酬“可以忽略不计”之后进行的。

  • AWS宣布Amazon Timestream时序数据库正式可用

    10月12日消息,亚马逊云服务(AWS)宣布Amazon Timestream正式可用。作为一款面向物联网和运营应用的全新时序数据库,Amazon Timestream每天可处理数万亿规模的时序事件,速度比关系型数据库快多达1000倍,而成本却低至其1/10。目前,Amazon Timestream已经在美国东部(弗吉尼亚北部)区域、美国东部(俄亥俄)区域、美国西部(俄勒冈)区域和欧洲(爱尔兰)区域推出,AWS方面表示未来数月也将在更多区域推出。尚不清?

  • 诺基亚通过云加速服务增强了Altiplano平台

    芬兰ESPOO–诺基亚宣布已通过推出Cloud Acceleration Services来增强其Altiplano云平台,以加速软件定义网络(SDN)在全球范围内的宽带建设者和应用开发商的成功。开放的、模块化的和完全可编程的Altiplano平台使网络建设者能够利用宽带网络作为平台,使快速连接和部署新设备、应用程序和服务变得容易。作为一个功能齐全的软件包和开放平台,它满足了每个运营商的需求。云加速服务帮助构建和维护个性化的SDN解决方案,确保所有网?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签