3

我知道这是当今 Web 开发人员和设计师之间的一个常见问题，“我什么时候使用部分或文章元素？” 我已经对每个语义含义进行了相当多的研究，但我想从堆栈用户那里得到一些反馈。

目前我正在开发一个 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>

想法？建议？

4

1 回答 1

1

Anarticle本身应该是有意义的，即它的标题和内容不应该需要支持内容才能被理解。文章可以嵌套在更多文章或部分中。

Asection可以在 an 中使用，也可以article嵌套在 another 中section，您不应该将 section 用作样式的钩子。因此，根据经验，如果您没有其中的标题元素，请使用 div 代替。即使您不需要在设计中看到标题，您仍然可以出于语义目的提供一个标题但将其隐藏。

关于这个主题，我最喜欢的两个书签是：

HTML5 医生

布鲁斯劳森（个人博客）为上述内容写作。

于 2013-03-20T08:53:47.320 回答