css - 正确使用 article、aside 和 header 标签

Question

我有一个简单的页面模板，左侧有侧边栏，右侧有主要内容区域。这是对 article、aside 和 header 标签的正确使用吗？另外，您是想将类/id 附加到 html5 元素(即 article 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 -->

Answer 1

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

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

我无法真正评论您是否以“正确”的方式使用了所有 HTML5 标签，因为我不知道您元素的更大范围。但是，看起来您正在使用 <aside>正确。我会用 <section>而不是 <article>你在哪里使用它。以下是一些通俗易懂的解释，可以帮助您:

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

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

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

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