这两个标签都是 HTML 5 中的语义标签。在本文中，将讨论 <article> 和 <section> 标签的行为。<article> 和 <section> 标签都以类似的方式表示，但用于某些含义，该含义适用于浏览器和开发人员。两个标签可以相互替换，因为输出不会发生变化，但是开发人员和浏览器很难理解对这些内容采取行动。
<article> 标签： 此标签包含不需要任何其他上下文的独立内容。所以 <article> 标签可以放在主要内容里面。但每篇文章都将包含独立的内容。就像 YouTube 用来在一个页面上包含不同类型的视频一样，每个视频都是独立的，或者您可以看到 YiibaiForGeeks 的课程页面，每个课程都是独立的，每个课程可以有自己的页面。
特征：
- 一篇文章可以有嵌套文章，并且应该引用父文章。
- 文章标签非常适合微数据信息。
<section>标签： 此标签用于将页面拆分为简介、联系信息、详细信息等部分，每个部分都可以位于不同的 <section> 标签中。引入 <section> 标记是为了将特定部分中的内容包装起来。<section>标签将内容分为部分和小节。当需要两个页眉或页脚或需要文档的任何其他部分时，使用 section 标签。部分标签对相关内容的通用块进行分组。
特征：
- 一个部分可以有嵌套的部分
注意：将
<article>标签放在<section>标签内是一种很好的做法，就像section基本上定义了类型，文章将包含该类型section中的特定内容。
示例： 在此示例中，将根据其行为使用这两个标签，例如：包含独立内容列表的文章，以及部分标签将包含网页上的特定部分。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>
article tag over section tag
</title>
<style>
.container {
width: 650px;
height: auto;
}
.section {
float: right;
}
.article {
float: left;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>YiibaiDemo</h1>
<p>A Computer Science Portal</p>
<div class="container">
<div class="article">
<article>
<h2>This is article tag</h2>
<p>
Above header(h2) placed
in article tag
</p>
</article>
<h2>This is non-article tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
<div class="section">
<section>
<h2>This is section tag</h2>
<p>
Above header(h2) placed
in section tag
</p>
</section>
<h2>This is non-section tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
</div>
</center>
</body>
</html>
<section>标签： 当只想装饰页面中的任何内容时，即想添加一些功能，那么可以使用 <section> 标签，也可以用 <div> 标签代替。当任何网页的内容适合内容大纲并且浏览器不关注大纲时，<section>标签会很好。<article>标签： <article> 标签是一个自我完成的标签，这可以用于任何这些原因，其中需要 <section> 标签加上 <article> 标签独立放置内容。文章标签可用于放置任何社交帖子、杂志文章、博客、相关内容列表、任何独立内容。
标签：
- 如果内容材料包含日期、价格、作者、描述等，选择文章标签。基本上使用文章标签来包含可以共享的内容，并且显然是用于实际文章。将博客文章包裹在其中。
- 如果内容包含任何类型的过程来制作或创建将依赖于某些东西的东西，那么当它描述文档大纲将包含的内容时，请选择
div之类的部分标签。
以表格形式查看差异 ：
<section> |
<article> |
|---|---|
<section> 标签定义文档中的一个部分。 |
<article>标签指定独立的、自包含的内容。 |
<section> 标签支持全局属性 |
<article>标签支持事件属性 |
<section> 标签支持事件属性。 |
<article>标签支持全局属性 |
<section>标签支持的浏览器：
Chrome(5.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.5)
<article>标签支持的浏览器：
Chrome(6.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.1)
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/266964.html