<sections>应该有<articles>还是<articles>应该有<sections>？

问题描述 投票：0回答：3

我正在阅读 Mark Pilgrim 的“深入了解 HTML5”，在语义部分，它讨论了 HTML5 如何引入 

<article>
和 
<section>
元素。它表示 
<section>
代表通用文档或部分，而 
<article>
代表独立的组合。无论哪种方式，我都看不到逻辑语义上的父子关系。

我尝试通过 HTML5 Outliner 运行以下代码，它似乎表明文档大纲的结果是相同的，无论它们如何嵌套。

所以我的问题是：

<section>
是否应该嵌套在
<article>
内，
<article>
是否应该嵌套在
<secion>
内，还是从语义角度来看这并不重要？

<section><h1>section article?</h1>
  <article><h1>art 1</h1></article>
  <article><h1>art 2</h1></article>
  <article><h1>art 3</h1></article>
</section>

<article><h1>article section?</h1>
  <section><h1>sec 1</h1></section>
  <section><h1>sec 2</h1></section>
  <section><h1>sec 3</h1></section>
</article>
html semantic-markup
3个回答
29
投票

无论哪种方式嵌套它们都是完全可以接受的。虽然文档大纲没有区分 

<section>
和 
<article>
，但从语义的角度来看它们是两个不同的东西。这就是将它们作为两个不同的语义元素引入的全部意义。

如果您的页面包含多篇文章，请使用第一个片段。

当您的文章足够全面以包含多个部分时，请使用第二个片段。

如果两者都适合您的内容，您甚至可以将它们组合起来，这样您的标记如下所示：

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>
7
投票

HTML 文档往往仅在文章中使用部分。这似乎表明您应该始终使用 

<article>
并将每个 
<section>
用于该文章的一部分。他们给出的例子涉及苹果：

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>

我没有看到很多例子，其中

<section>
不包含在
<article>
中，但是
<article>
可以在其中包含另一个
<article>
，这样博客将由一篇文章表示，然后是一个对该博客的评论将由父文章中的另一篇文章表示。所以，这看起来是你应该前进的方向。

因此，继续苹果的示例：如果您希望允许用户对每种类型的苹果发表评论，那么在这种情况下，您将在一个部分中包含一篇文章，该部分仍然位于一篇文章中。

经过更多研究和思考后，这是我得出的概括：

使用文章应保留用于“帖子”，例如博客、主题（及其后续帖子）、评论等。任何可以有 author 的内容都应使用 

<article>
元素。

使用部分应保留用于分隔网站的各个部分，例如介绍（您的网站可能涉及的内容）、一些新闻文章或文章中用于评论的区域。任何属于某物“部分”的东西（实际上没有作者）。

1
投票

两者在语义上都是有效的

这完全取决于您希望如何解释页面。

如果您正在撰写博客文章，则每篇文章都将是一个 

<article>
，并且在一篇特别长的博客文章中，您可以将其分成逻辑 
<section>
以及自己的 
<h1>
以及它需要的任何其他内容。

如果您正在编写研究页面，您可以使用 

<sections>
来分隔目录、摘要、主体和附录。在主体（和附录）中，您可能有一个真正是 
<article>
的特定部分。

如果您要布局页面，我强烈推荐以下格式：

<body>
    <div id="page">
        <div id="page-inner">
            <header id="header">
                <div id="header-inner">
                    <!-- logo, site name, search, etc -->
                </div>
            </header>
            <nav id="nav">
                <div id="nav-inner">
                    <ul>
                        <li><a href="">Primary Nav</a></li>
                        ...
                    </ul>
                </div>
            </nav>
            <div id="wrapper">
                <div id="wrapper-inner">
                    <div id="content">
                        <div id="content-inner">
                            <article>
                                <header>
                                    <h1>Title</h1>
                                    <span class="author"></span>
                                    <time class="timestamp"></time>
                                    ...
                                </header>
                                <div class="content">

                                </div>
                                <footer>
                                    ...
                                </footer>
                            </article>
                            ...
                        </div>
                    </div><!-- end #content -->
                    <div id="sidebar">
                        <div id="sidebar-inner">
                            <div class="module"></div>
                            <!-- more sidebar widgets, modules, blocks, what-have-you -->
                        </div>
                    </div><!-- end #sidebar -->
                    <!-- more columns if necessary -->
                </div>
            </div>
            <footer id="footer">
                <div id="footer-inner">
                    <!-- copyright notice, footer menu, contact form, etc -->
                </div>
            </footer>
        </div>
    </div>
</body>

尽管如果您不需要那么多

<div>
，请保持简单：

<body>
    <header></header>
    <nav></nav>
    <div id="wrapper">
        <div id="content">
            <article></article>
            ...
        </div>
        <div id="sidebar">
            <div class="module"></div>
            ...
        </div>
    </div>
    <footer></footer>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.