[html5]HTML5中<section>和<article>的区别

一、section元素

从字面理解就是区块、部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单、文章正文、文章的评论等。

1、section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;

2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,

3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;

4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

二、article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。

注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。

<html>
 <head></head>
 <body>
  <article>
      
   <header>
    <h1>article元素使用方法</h1>    
    <p>发表日期:<time pubdate="pubdate">2017/2/9</time></p>   
   </header>   
   <p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>   
   <section>
    <h2>评论</h2>    
    <article>
     <header>
               
      <h3>发表者:Galin</h3>         
      <p>1小时前</p>      
     </header>      
     <p>这篇文章很不错啊,顶一下!</p>
    </article>     
    <article>
     <header>
             
      <h3>发表者:木木</h3>
      <p>1小时前</p>      
     </header>     
     <p>这篇文章很不错啊,对article解释的很详细</p>     
    </article>
   </section>
  </article>
 </body>
</html>

转自:http://www.divcss5.com/html5/h18219.shtml

原文地址:https://www.cnblogs.com/vickylinj/p/9871972.html

时间: 2024-11-09 03:46:19

[html5]HTML5中<section>和<article>的区别的相关文章

HTML5新元素section和article的区别详解

HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>. 在问答网站经常可以看到别人问:在什么情况下我们应该使用这些元素?我们应该如何正确的使用这些元素?<article>和<section>有什么区别? 鉴于以上的这些问题,E良师益友网为大家讲解一下<article>和<section>的区别: 一.Article元素 从名字上,它已经很好的

H5中section和article标签之间的区别

大家都知道,H5最大的特点就是标签语义化,可以使我们和浏览器更好的理解结构与阅读,section和article就是两只新的语义化标签.这两个标签的使用结构就是都有标题和内容主体,那么如何在使用过程中区分它们呢?下面就说一下我自己的小见解. 我们在阅读一本书籍的时候,通常在目录检索中看到以下结构,如下: 第一章 第一节 第二节 第三节 第二章 第二节 第三节 第三章 第四章 从上面的目录结构中可以看出,第一章和第二章中有小节,第三章和第四章为单独的一片文章.大章节中的小节为该章节的小分支,虽然有

HTML5中section、article、figure的区别及使用介绍

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>河南焦作景点介绍</title> <link type="text/css" rel="stylesheet" href="css.css"> </head>

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: The div element has no special meaning at all. 这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化或脚本的钩子(hook). section HTML Spec: “The section element represents

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?   

HTML5 中 div 和section以及 article 的不同之处

HTML5 中 div section article 的区别 刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下.div标签这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化. section标签与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单.section 表示一段专题性的内容,一般会带有标

关于 html5 代码中 &quot;xxx&quot;(双引号) 和 (单引号)&#39;xxx&#39; 的区别,谈谈我的经验!

最近在学习的时候看到有人问 "find" 与 'find' 的区别,发现了很多人都说没有区别,纯属个人爱好! 于是我好奇地试验了一下,发现了不一样的结果,通过对比分析发现 '' 和 "" (单引号,双引号),还是有很大的区别地! 建议:<!--************为了防止 引号匹配错误: 单引号与双引号交叉使用*******************--> 在使用html onclick 事件属性时候乱用 单引号 /双引号 会出错的,比如: <!

HTML5与HTML4的10个关键区别

HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站.如果你同时使用HTML4和HTML5的话,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多.虽然HTML5没有完全颠覆HTML4,它们还是有很多相似之处,但是它们也有一些关键的不同.本文就列出了它们之间10个关键的不同之处. 1.HTML5标准还在制定中 首先要注意的是,HTML5虽然现在很火,但是HTML5标准还在制定中,标准仍在改变.HTML4已经10多年了,不会有任何改变了. 2.简化的语

HTML5规范中的MessageEvent以及SSE

1.MessageEvent接口 在HTML5规范中定义的新的通信方式,无论是WebSocket还是SSE,包括实现视频.音频通信的WebRTC,都是基于HTML5规范中定义的一个接口:MessageEvent.这是一个基于消息的事件.首先我们可以看一下在JavaScript中,传统的事件类型有哪些. 传统的DOM事件的基类主要包括: (1)UIEvents:一般化的UI事件,其中鼠标事件和键盘事件都继承自UI事件: (2)MouseEvents:一般化的鼠标事件,比如click事件.mouse