正确使用文章、旁白和标题标签答案

【问题标题】：Correct use of article, aside, and header tags正确使用文章、旁白和标题标签
【发布时间】：2013-11-07 18:39:22
【问题描述】：

我有一个简单的页面模板，左侧有一个侧边栏，右侧有一个主要内容区域。这是文章、旁白和标题标签的正确用法吗？另外，您是想将类/ID 附加到 html5 元素（即文章 class="example" ）还是专门用于 div？

谢谢

<article class="page">

  <div class="container">

    <div class="row">

      <aside>

        <div class="col-md-3">

          <div class="sidebar">

            <h3>Sidebar Widget</h3>

              <ul>

                <li>Related Content</li>

                <li>Related Content</li>

                <li>Related Content</li>

              </ul>

          </div> <!-- /.sidebar-->

        </div> <!-- /.col-med-3 -->

      <aside>

      <div class="col-md-9">

        <header>

          <h1 class="page-title">Page Title</h1>

        </header>

          <p>Some Content</p>

      </div> <!-- /.col-med-9 -->

    </div><!-- /.row  -->

  </div><!-- /.container-->

</article><!-- /.page -->

【问题讨论】：

除了主要基于意见之外，即使作为意见问题也无法有意义地回答问题，因为没有提供有关实际内容性质的信息。

标签： css html

【解决方案1】：

您当然可以将class 和/或id 应用于HTML5 标记。将每个标签想象成<div>。事实上，在你的 CSS 中你应该有这个块，这样所有的 HTML5 标签都会表现得像 <div>。这将有助于非 HTML5 兼容的浏览器：

header, section, footer, aside, nav, article, figure {
    display: block;
}

我无法评论您是否以“正确”的方式使用所有 HTML5 标签，因为我不知道您项目的更大范围。但是，您似乎正确地使用了<aside>。我会在你使用它的地方使用<section> 而不是<article>。这里有一些简单的英语解释可以帮助你：

<article> - 独立、自包含的内容。如果与 HTML 文档的其余部分分开，它应该能够独立存在并且有意义。最显着的潜在用途是论坛/博客文章、用户 cmets 等。

<aside> - 支持有关 HTML 大图的信息。这些主要用于侧边栏，位于主要内容的左侧或右侧，作为“配角”的一部分。

<header> - 顾名思义，这是你的标题信息应该去的地方。多个 <header> 标签可以在整个 HTML 页面中使用（即用于博客文章标题），但它们不能添加到 <footer>、<address> 或另一个 <header> 标签中。

<section> - 更多的是“通用”标签，但它用于包含大块的分组内容。多个 HTML5 标记可以驻留在 <section> 标记内。

【讨论】：

【解决方案2】：

将 id 和 classes 放在任何/所有 html 元素上是完全正常的。

您对<article> 和 '' 的使用范围可能过于广泛。

<article> 元素表示页面的一个组件，该组件由文档、页面、应用程序或站点中的自包含组合组成，旨在独立分发或重复使用，例如在辛迪加。 Source

<aside> 元素表示页面的一部分，该部分由与 side 元素周围的内容相切相关的内容组成，并且可以被视为与该内容分开。 Source

【讨论】：