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

はそれarticle自体で意味をなす必要があります。つまり、タイトルとコンテンツを理解するためにサポートコンテンツを必要としないようにする必要があります。記事は、他の記事またはセクションにネストできます。

Asectionは、内部で使用することもarticle、実際に別の場所にネストすることもできsectionます。スタイリングのフックとしてセクションを使用しないでください。したがって、経験則として、内部にヘッダー要素がない場合は、代わりにdivを使用してください。デザインにヘッダーを表示する必要がない場合でも、セマンティック目的でヘッダーを提供することはできますが、非表示にすることができます。

このトピックに関する私の2つのお気に入りのブックマークは次のとおりです。

HTML5ドクター

Bruce Lawson（個人ブログ）は上記について書いています。

于 2013-03-20T08:53:47.320 に答える