Question

我知道这是当今网络开发者和设计师的一个常见问题，“我什么时候使用部分或文章元素？”我已经完成了关于每个语义含义的研究机器人，但我想从堆栈用户那里得到一些反馈。

目前我正在开发HTML5 Web应用程序，各种仪表板。仪表板中的每个通道都包含与该类别相关的小部件。每个小部件彼此独立。该应用程序还包含与主要内容相切的用户设置区域（侧边栏）。为了创建最具语义的标记，我想到了以下结构：

<body>
  <section class="channel">
    <header>
      <h1>Travel</h1>
      <nav>
        <button>Add widget</button>
        <button>Edit</button>
        <button>Share</button>
      </nav>
    </header>
    <article class="widget">
      <header>
        <h1>Expedia</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>

    <article class="widget">
      <header>
        <h1>Kayak</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>
  </section>

  <section class="channel">
    <header>
      <h1>Shopping</h1>
      <nav>
        <button>Add widget</button>
        <button>Edit</button>
        <button>Share</button>
      </nav>
    </header>
    <article class="widget">
      <header>
        <h1>Craigslist</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>

    <article class="widget">
      <header>
        <h1>eBay</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>
  </section>

  <aside id="sidebar">
    <h1>App Name</h1>
    <div>
      <!-- Clock element -->
    </div>
    <!-- Username and profile pic -->
    <ul>
      <!-- List of settings actions/buttons -->
    <ul>
    <footer>
      <p>Copyright...</p>
    </footer>
  </aside>

</body>

思考？建议？

Answer 1

article本身应该有意义，即它的标题和内容不需要支持要理解的内容。文章可以嵌套在其他文章或章节中。

section可以在article中使用，或者实际上嵌套在另一个section中，您不应该使用一个部分作为样式的钩子。因此，根据经验，如果您内部没有标题元素，请改用div。即使您不需要在设计中看到标题，您仍然可以提供一个用于语义目的但隐藏它。

我对这个主题最喜欢的两个书签是：

HTML5 doctor

Bruce Lawson (personal blog) 为上述内容写道。

HTML5部分和Web应用程序的文章布局

1 个答案: