Question

我已经详细了解了<article>和<section>的使用情况。我想我得到了<article>部分。但是<section>仍然存在混淆。我已经在HTML5doctor上阅读了this post，但我仍有疑问。

考虑一个简单的例子：我有一个可以玩游戏的网页。您在顶部有一个导航菜单，其中包含＆＃34;仪表板＆＃34;，＆＃34;其他游戏＆＃34;，＆＃34;关于＆＃34;。每个页面都以标题开头，包含较低级别的标题。

例如，在仪表板上，你可以拥有＆＃34; Singleplay＆＃34;，＆＃34; Multiplayer＆＃34;，＆＃34; Statistics＆＃34;，＆＃34; Instructions＆＃34;每个下面都有一些文字，以及指向相应HTML页面的链接。

关于html5doctor：

section元素表示通用文档或应用程序部分

我猜猜每个＆＃34;页面＆＃34;可以这样考虑？ 但在这种情况下是否还有子标题？。感觉就像有新内容的内容一样，<section>可能被认为是合适的。但那可能会失控，不是..？

Answer 1

<section>元素用于表示一组相关内容。这类似于<article>元素的目的，主要区别在于<section>元素中的内容不一定需要从页面的上下文中理解。一节只是它听起来像一个网站的一部分。我认为最常见的用途是你可以为它分配一个id。所以它可以说是它自己的实体。您可以为其分配一个<section id="examples">，并将其从任何地方和您想要的页面转到网站的该部分。

建议使用标题元素（<h1> - <h6>）来定义该部分的主题。

以此博客文章为例，您可以拥有代表帖子中每个部分的<section>元素。

<article>
  <h1>How to use HTML5 Sectioning Elements</h1>
  <p>...</p>

  <section>
    <h2>The <main> Element</h2>
    <p>...</p>
  </section>
  <section>
    <h2>The <article> Element</h2>
    <p>...</p>
  </section>
  <section>
    <h2>The <section> Element</h2>
    <p>...</p>
  </section>
  ...
</article>

Answer 2

以下是一个可能有用的示例：

<html>
    <head>             
    </head>
    <body>
        <header>
        </header>
        <main>
           <section id='first'>
           </section>
           <section id='second>
           </section>
        <main>
        <footer>
        </footer>
    </body>

HTML5 <section>标签说明与示例

2 个答案: