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

Question

我知道這是當今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>

思考？ 建議？

Answer 1

article應該靠自己理解，即標題和內容不需要支持性內容即可理解。 文章可以嵌套在其他文章或部分中。

一個section可以在article內部使用，也可以嵌套在另一個section ，不應將其用作樣式的鈎子。 因此，根據經驗，如果其中沒有標題元素，請改用div。 即使您不需要在設計中看到標題，也可以出於語義目的提供標題，但將其隱藏。

關於這個主題，我最喜歡的兩個書簽是：

HTML5醫生

Bruce Lawson（個人博客）為上述內容撰寫文章。

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

問題描述

1 個解決方案

解決方案1
1 2013-03-20 08:53:47

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

問題描述

1 個解決方案

解決方案1 1 2013-03-20 08:53:47

解決方案1
1 2013-03-20 08:53:47