htmlarticle
刘耀文的大沙雕
钟意阿满
html5中article与section有什么区别？
1、定义内容不同
<article>：定义外部的内容，代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复，article它所表示的所展现的内容，是外表独立出来的内容，所以它有自己独立的标题、页脚。
<p>：段落标签
2、使用不同
<article>是可以嵌套使用的，内外层内容相关联，用户看到的内容并不是对应本网站的一个具体的页面。
<p>标签主要用作定义一段文本。p 元素会自动在其前后创建一些空白，浏览器会自动添加这些空间。
扩展资料：
article元素的用法
<!DOCTYPE html>。
<html>
<head lang=”en”>。
<meta charset=”UTF-8”>。
<titile></title>。
</head>
<body>
<article>。
</header>。
<h1>我是Article</h1>。
<p>创建时间：<time pubdate=”pabdate”>2014/09/27</time></p>。
</header>。
<p>
<b>Article</b>是一个独一的区域。
</p>
<footer>
<p><small>麦子学院版权所有</small></p>。
</footer>。
</article>。
</body>
</html>
抱起亚轩找小葵
HTML5的article和section的区别
html5的新增的标签都是带有语义的，不光要从字面来说，还要从举例中来说。
article 是独立的一块内容，比如一篇新闻，一篇文章，包含文章主旨，还可以包含辅助内容。
section 类似div，不过比div更有意义，他是对内容进行分块。
aside 字面就是侧边栏，跟内容相关的一些引用、内容。
这些元素表现形式都是行内，使用的时候要显示声明为block。
大圣杰锅是
section元素和article元素的区别？
article是一篇完整的文章，section是一个章节。
所以通常意义上讲是article包含section，不过section并不一定非要被article所包含。article是特殊的section，更强调独立完整性。
小韩在追星
html5常用标记及用法？
区别：在HTML5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。
在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素，这两个元素是什么意思？通常用于哪些内容区块？何时用article元素？何时用section元素？两者之间的区别是什么？
一、article元素。
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
现在，以博客为例来看一段关于article元素的代码示例，代码如下：
<article>。
<header>。
<h1>article元素使用方法</h1>。
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>。
</header>。
<p>article元素是什么？怎样使用article元素？……</p>。
<footer>。
<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>。
</footer>。
</article>。
这个示例是一篇讲述article元素使用方法，在header元素中嵌入了文章的标题部分，在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接着，来看一个关于article元素嵌套的代码示例，代码如下：
<article>。
<header>。
<h1>article元素使用方法</h1>。
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>。
</header>。
<p>article元素是什么？怎样使用article元素？……</p>。
<section>。
<h2>评论</h2>。
<article>。
<header>。
<h3>发表者：shenmiweiyi</h3>。
<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>。
</header>。
<p>这篇文章很不错啊，顶一下！</p>。
</article>。
<article>。
<header>。
<h3>发表者：神秘唯一</h3>。
<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>。
</header>。
<p>这篇文章很不错啊，对article解释的很详细</p>。
</article>。
</section>。
</article>。
这个示例中的内容比上述代码更加完整了，它添加了文章读者的评论内容，示例内容分为几个部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论进行了区分（是一个分块元素，用来把页面中的内容进行区分），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立的、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码如下：
<article>。
<h1>一个插件</h1>。
<object>。
<param name="allowFullScreen" vlaue="true">。
<embed src="#" width="600" height="395"></embed>。
</object>。
</article>。
二、section元素。
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。
<section>。
<h1>section元素使用方法</h1>。
<p>什么时候用section元素？怎样合理使用section元素?</p>。
</section>。
通常不推荐为那些没有标题的内容使用section元素，可以使用HTML5轮廓工具来检查页面中是否有标题 的section，如果使用该工具进行检查后，发现某个section的说明中有"untitiled section"（没有标题的section）文章，这个section就有可能使用不当。
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与有着自己的完整的、独立的内容”的article元素混淆。
下面，来看article元素与section元素结合使用的示例，希望能够帮助你更好地理解article元素与section元素的区别。
<article>。
<h1>article元素与section元素的使用方法</h1>。
<p>何时使用article元素？何时使用section元素…..</p>。
<section>。
<h2>article元素使用方法</h2>。
<p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>。
</section>。
<section>。
<h2>section元素使用方法</h2>。
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>。
</section>。
</article>。
上述代码中的内容首先是一段独立的、完整的内容，因此使用article元素。该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素。请记住，对文章分段的工作也是使用section元素完成的。可能有人会问，为什么没有对第一段使用section元素，这里其实是可以使用section元素的，但是由于其结构比较清晰，分析器可以识别第一段内容在一个section元素里，所有也可以将第一个section元素省略，但是第一个section元素里还要包含于section元素或子article元素，那么就必须写明第一个section元素。
在HTML5中，可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含一个统一的页面中，以便统一使用CSS样式来进行装饰。最后，关于section元素的使用禁忌总结如下：
1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
3）不要为没有标题的内容区块使用section元素。
三、两者的区别：
以上讲述了那么多，两者的区别到底是什么呢？事实上，在HTML5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。
小韩在追星
HTML5中哪些标签可以用来做SEO优化
HTML5 新增结构元素分为主体结构元素和非主体结构元素。
1.主体结构元素包括 article、section、nav、aside、time。
2.非主体结构元素包括 header、hgroup、footer、address。
一、主体结构元素
article
article 标签，从语义化上看为文档、页面，其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块。
一般会带个标题，并放在 header 标签中。
article 元素可以互相嵌套。
使用频率极高，强调独立性，多注意下与 header 标签的使用。
代码如下:
<article>。
<header>
<h1>是我标签</h1>。
</header>。
<p>我是段落</p>。
<article>。
<div>我的内容</div>。
</article>。
</article>。
section
section 标签，从语义化上看为部分，其用法如下：
用于页面内容的独立分块，往往是文章的一段。
通常由内容和标题组成，没有标题的内容不推荐使用 section。
使用频率低，强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。
代码如下:
<section>。
<h1>水果</h1> 。
<article> 。
<h2>苹果</h2>。
<div>苹果是撒？</div> 。
</article> 。
<article> 。
<h2>桔子</h2>。
<div>桔子是撒？</div> 。
</article> 。
</section>。
<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->。
<article>。
<h1>中国人物</h1>。
<p>三国、两晋、南北朝</p>。
<section>。
<h2>三国</h3>。
<p>猛将猛将猛将猛将</p>。
</section>。
<section>。
<h2>两晋</h3>。
<p>猛将猛将猛将猛将</p>。
</section>。
</article>。
nav
nav 标签，从语义化上看为导航，其用法如下：
通常作为页面导航的链接组
侧边栏导航
使用频率高。
代码如下:
<nav>
<ul>
<li><a href="">菜单1</a></li>。
<li><a href="">菜单2</a></li>。
<li><a href="">菜单3</a></li>。
</ul>
</nav>
aside
aside 标签，从语义化上看为在旁边、侧边，其用法如下：
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
代码如下:
<!-- 在article标签外使用时 -->。
<article>。
<h1>马云是谁</h1>。
<p>马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........</p>。
<aside>
<h1>参考资料</h1>。
<p>百度网、维基百科...</p>。
</aside>
</article></p> <p><!-- 在article标签内使用时 -->。
<aside>
<nav>
<ul>
<li><a href="">老赵的博客</a></li>。
<li><a href="">鬼哥的博客</a></li>。
<li><a href="">彪叔的博客</a></li>。
</ul>
</nav>
</aside>
time
time 标签，从语义化上看为时间，其用法如下：
代表 24 小时中的某个时刻或某个日期。
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
代码如下:
<time datetime="2013-3-6">2014年3月6日</time>。
<!-- datetime属性中日期与时间之间要用“T” 文字分隔，“T”表示时间 -->。
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>。
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->。
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>。
二、非主体结构元素
header
header 标签，从语义化上看为文档的页眉，其用法如下：
一种具有引导和导航作用的结构元素。
通常放置在整个页面或者页面内的一个内容区块的标题。
一个网页内并没有限制 header 标签的个数。
使用频率极高，比较容易理解。
代码如下:
<header>
<h1>我是大头</h1>。
</header>。
<article>。
<header>
<h1>我是脖子</h1>。
</header>。
<p>我是身体</p>。
</article>。
hgroup
hgroup 标签，从语义化上看为标题组，其用法如下：
作为 header 标签的子元素。
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup。
通常会将 h1~h6 元素进行分组。
使用频率高。
代码如下:
<article>。
<header>
<hgrounp>。
<h1>我是刘备</h1>。
<h2>我是关羽</h2>。
<h3>我是张飞</h3>。
</hgrounp>。
</header>。
<p>吕布惊呆了</p>。
</article>。
footer
footer 标签，从语义化上看为文档的脚注，其用法如下：
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等。
使用频率高，比较容易理解。
代码如下:
<article>。
<p>吕布惊呆了</p>。
<footer>
<ul>
<li>关于三国</li>。
<li>地图信息</li>。
<li>游戏攻略</li>。
</ul>
</footer>。
</article>。
address
address 标签，从语义化上看为地址，其用法如下：
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等。
使用频率低。
代码如下:
<address>。
<a href="">作者：张三丰</a>。
<a href="">地址：武当山</a>。
<a href="">联系方式：1247</a>。
</address>。