Question

我现在已经使用了html5文档类型一段时间但是我们还没有使用比header，nav和footer更多的标签。我想了解何时实施article和aside代码，如果在我的示例中我正在正确实施它们。

我提出这个问题的全部原因是因为关于它们应该如何使用以及aside标签之类的某些标签是否可以嵌套在article中似乎存在很多争议标签。我只想在这里寻求清晰。

这是我的例子。我有两个问题：

这个布局有什么不正确的吗？
我可以设置aside这些新标签的样式，还是必须将样式应用于新html5标签中的元素？

<header>

</header>
<main>
  <article id="article">
    <div id="full">
      <aside id="page-left">
        <div>
          <h1>title</h1>
          <p>content</p>
        </div>
      </aside>
      <aside id="page-right">
        <div>
          <h2>title</h2>
          <p>content</p>
        </div>
      </aside>
    </div>
  </article>
</main>
<footer>

</footer>

修改

我所追求的仅仅是一个包装div，它被更改为article标签，其中包含2个内联元素。左侧元素将包含实际文章，右侧将包含推荐。

在这种情况下，正确的标签是什么？

Answer 1

来自W3C：

-

article元素表示文档，页面，应用程序或站点中的完整或自包含的组合，并且原则上可独立分发或可重用，例如，在联合。这可以是论坛帖子，杂志或报纸文章，博客条目，用户提交的评论，交互式小部件或小工具，或任何其他独立的内容项。应通过将标题（h1-h6元素）包含在文章元素的子元素中来识别每篇文章一般规则是只有元素的内容在文档大纲中明确列出时，article元素才适用。

-

旁边元素表示页面的一部分，该部分由与旁边元素周围的内容相切的内容组成，并且可以认为与该内容分开。这些部分通常在印刷字体中表示为侧边栏该元素可用于印刷效果，如拉引号或侧边栏，广告，导航元素组以及被视为与页面主要内容分开的其他内容。

-

所以我不会将文章内容放在aside标记内。

more here

Answer 2

人们通常会在aside标签中放置与文章无关或更少的广告和其他内容。我不能告诉你，如果你正确使用它们，因为只有你能决定什么是必要的，什么不是。但我想你使用它们很好。只是确保你没有把重要的东西放在其中，因为谷歌和其他搜索引擎不会在你的网站描述中的aside标签中显示任何内容

编辑：这是 - 我认为 - 你的例子应该是这样的：

</header>
<main>
  <div id="full">
    <article id="page-left">
      <div>
        <h1>title</h1>
        <p>content</p>
      </div>
    </article>
    <aside id="page-right">
      <div>
        <h2>title</h2>
        <p>content</p>
      </div>
    </aside>
  </div>
</main>
<footer>

</footer>

这个html5结构是否正确？

2 个答案: