Question

我一直试图理解HTML5中的article和section元素。每当我尝试理解它时，我都会感到更加困惑。 This post表示博客文章是article，而根据this post，博客文章是section。现在，您如何解释它？经过大量阅读后，我仍然感到困惑。

Answer 1

section 元素定义通用部分，通常用于分隔主题内容或生成用于组织主要内容的列或块。

article 元素表示独立的内容项，例如论坛帖子，博客条目，杂志文章，评论等。

<main>
 <section>
  <article>
  Some random post
  </article>
  <article>
  Some random post 2
  </article>
</section>
<aside>
Something about the first post.
And something about the second post.
</aside>
</main>

Answer 2

最后...这将取决于我们-人们-人们的使用方式。尽可能多的意见...-这就是它的工作方式。

个人...我将section用于网站的大部分区域。各种内容-有时位于header main或footer中。它们是网站的“部分” ...对吧？

这就是说...我将article用于博客文章或“文章”或类似的内容-在该文章的内部-可能有个部分，如文章……但是-出于实际原因...这种方式通常无法解决。

大多数人都为此类事情实施CMS。以WordPress为例，它可以从其内容编辑器中为您提供大量内容，并将其放置在页面上。您可以添加h1标签和h2标签等...-然后在此处撰写您的文章/，但实际上并没有涉及到部分的想法。您只是得到一个HTML转储。 如果您有一个自定义情况-您正在使用自定义字段中继器集-并遍历了这些内容以吐出文章中的“部分”，那么情况就大不一样了。这可能对您的目标有意义-并且这些部分可用于快速链接以及搜索和引用。一个“文档”网站就是一个例子。 Google会喜欢“文章”的那些部分。

一天结束时/关于让Google满意的问题，还有很多关于确保您的文档/模板等易于理解的信息。 >

<body>
  <div class="x-dropdown-header jk-10-row">
    <div class="menu main-menu flex-12-6-sm"><
      <div class="my-blog-post post wtf-lg">
        <!-- bla bla bla... -->
      </div>
    </div>
  </div>

  <div class="dark-blue-article jk-10-row-lg jk-column-2">
    <div class="section flex-12-6-sm"><
      <div class="confusing-crap post wtf-lg">
        <!-- bla bla bla... -->
      </div>
    </div>
  </div>
</body>

您将能够在其中哪些标记中更快地阅读/做出贡献？（同样-CSS要么很难阅读-要么很容易阅读，具体取决于标记的清晰度）

<body>
  <header class='site-header'>
    <figure class='company-logo'>
      <img src='?' />
    </figure>

    <nav class='site-menu'>
      <ul class='item-list'>
        <li class-'item'>
          <a class='link'>
            <span>Link text</span>
          </a>
        </li>
      </ul>
    </nav>
  </header>

  <main class='page-content'>
    <section class='section-name-one'>
      <aside class='component article-intro'>
        {{get article-intro field content}}
      </aside>
    </section>

    <section class='section-name-two'>
      <article class='article-type>
        {{get wysiwyg field content}}
      </article>
    </section>

    <section class='section-name-three'>
      <!-- OR -->
      <article class='article-type>
        {{loop 'section' from this 'article'}}
          <section class={{section.name}}>
            {{section.content}}
          </section>
        {{/loop}}
      </article>
    </section>
  </main>
</body> <!-- (psuedo templating) -->

规范概述了一些特定的情况以及为什么希望每个标签以某种特定方式使用的原因...但是最终-这些功能如何帮助我们/以及我们最终如何使用它们这将创建标准。不要在讨论线程中迷路太久，而要弄清楚使文档愉快地工作的最佳方法是什么。事情将会改变。十年来我们一直在争论诸如<address>之类的事情……

节和文章元素上的帖子相互矛盾

2 个答案: