外观：HTML5 和 元素

但是，有些元素的实现可能会有些混乱，包括以下两个新元素：

<article>

和

<section>

。

HTML5附带了许多新元素 ，将来还会推荐更多。

同样，我们如何正确使用这些元素？

我在论坛上发现的一些最常见的问题是： 在什么情况下应使用这些元素？

<section>元素

因此，出现了一个问题，因为它与

<div>

元素有什么不同，以及何时应在

<div>

元素之外使用此元素。

这些年来，我们已经使用<div>元素在我们的网站结构切片 。

这可能是最含糊的元素之一。

根据WHATWG文档，

<section>

描述如下：

要揭开它的神秘面纱，我们需要参考官方文档。

〜WHATWG”

“

<section>

元素代表文档或应用程序的通用部分。

该文档添加了一些特定的额外说明，其中说：

但是有一个例外。

从该描述中，我们可以得出结论，

<section>

元素肯定是用于分段的，或多或少类似于

<div>

元素。

在这一点上，事情变得更轻松了，我们可以从两点总结该描述：

1. 尽管section元素在技术上是可样式化的，但是当我们更有可能对元素应用沉重的样式或脚本时，建议使用

   <div>

   代替。
2. 与

   <li>

   元素类似，section元素的一般思想是列出content 。

因此，在实际情况下，使用

<section>

元素的明智原因之一是构建博客文章内容列表，如以下代码段所示：

<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>

我们可以将此元素用于其他目的。

这只是一个例子。

<article>元素

这个名称本身是不言而喻的，但是让我们看看官方文档是如何描述它的：

“

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

“文件，页面，应用程序或网站中的独立组成，原则上是独立可分发或可重复使用的，例如在联合组织中。

根据以上解释，我们可以得出结论，特别建议将

<article>

元素用于构建文章 ，尤其是我们可能要联合的文章，例如博客文章，页面内容或论坛文章。

以下示例显示了如何使用

<article>

构建博客文章内容。

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>

<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>

</article>

此外，可以将

<article>

元素与section元素结合使用，因此，在情况合理的情况下，可以使用

<section>

元素将文章分为几个部分，例如以下示例。

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>

<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>

<section>
<h4>This is another Sub-Heading</h4>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>

</article>

结论

但是，在Web开发人员和设计人员中，仍然存在关于如何更正确地应用这些元素的争论，有人说这句话，而其他人则不同。

发明HTML5中的所有新元素是为了使万维网结构更具语义，这是万维网的创始人和W3C主管的预言所致。

毕竟，最后没关系。

正如我在上面提到的，只要是合理的情况下使用它们，并且您会在检查结构时发现该结构非常有意义，然后再继续使用它。

但是，不要与这个想法混淆。

翻译自: https://www.hongkiat.com/blog/html5-section-article-elements/