web-dev-qa-db-ja.com

サイドバーに最適なHTML5マークアップ

HTML5テーマ用にWordPressサイドバーを設定していますが、本当にbefore_widgetとafter_widgetを使用したいです。

だから私の質問はこれです：2つのマークアップパターンのどちらがより適切ですか？次のコードは、すべて完全に<article>要素の外にあります。

オプション1：セクションは別として

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

オプション2：サイドのあるDiv

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

補助的な質問は、各ウィジェットのタイトルにどの見出しを使用するかです。各ウィジェットを<section>でラップすると、<h1>が最も適切なようです。 <aside>を使用する場合、わかりません。

すべての意見を歓迎します。悪魔の支持者は励まされました。

html5semantic-markup
61
mrwweb

すべてのASIDEの最初のは、一般的なサイドバーではなく、メインコンテンツに関連するコンテンツを示すためにのみ使用されます。 Second、サイドバーごとに1つだけ

サイドバーごとに1つしかありません。サイドバーの要素は、脇の内側のdivまたはセクションです。

私はオプション1：セクションを別にして

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

これが仕様です https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

再びセクションを使用するのは、headerまたはfooterが含まれている場合のみです。それ以外の場合は、単純なdivを使用します。

54
aWebDeveloper

17/07/27の更新：これが最も投票された答えなので、これを更新して、現在の情報をローカルに（参照へのリンク付きで）含める必要があります。

仕様から [1]：

Aside要素は、ペアレントセクショニングコンテンツのコンテンツに接線方向に関連するコンテンツで構成されるページのセクションを表し、そのコンテンツとは別のものと見なすことができます。このようなセクションは、多くの場合、印刷された活版印刷ではサイドバーとして表されます。

すばらしいです！まさに私たちが探しているもの。さらに、<section>も確認することをお勧めします。

Section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでのセクションは、コンテンツのテーマ別グループです。通常、セクション要素の子として見出し（h1-h6要素）を含めることにより、各セクションを識別する必要があります。

...

一般的な規則として、セクション要素は、要素のコンテンツがドキュメントのアウトラインに明示的にリストされている場合にのみ適切であるということです。

優れた。私たちが探しているもの。 <article>とは対照的に [2] これは「自己完結型」コンテンツ用です。<section>は、スタンドアロンではない、または<div>要素に十分な汎用性のない関連コンテンツを許可します。

そのため、仕様1では、オプション1 <aside>を<section>の子と一緒に使用することをお勧めしているようです。

参考文献

  1. https://www.w3.org/TR/html51/sections.html#the-aside-element
  2. https://www.w3.org/TR/html51/sections.html#elementdef-article
  3. http://html5doctor.com/aside-revisited/
24
David Bradbury

asideに関するHTML5仕様 からの次の例を見てください。

現在推奨されていること（2012年10月）は、ウィジェットをaside要素内にグループ化することであることを明確にしています。次に、各ウィジェットは、nav、一連のblockquotesなど、それを最もよく表すものです。

次の抜粋は、ブログロールやブログの他のサイドコンテンツに脇をどのように使用できるかを示しています。

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains Twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://Twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://Twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>
11
Waiting for Dev...

これに基づいて HTML5 Doctor diagram 、私はこれが最高のマークアップかもしれないと考えています：

<aside class="sidebar">
    <article id="widget_1" class="widget">...</article>
    <article id="widget_2" class="widget">...</article>
    <article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->

outside メイン<aside>要素である限り、<article>が適切な要素であることは明らかだと思います。

今、私は<article>も脇の各ウィジェットに適していると考えています。 W3Cの言葉 ：

Article要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として、独立して配布可能または再利用可能です。シンジケーションで。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはコンテンツの他の独立したアイテムです。

6
mrwweb

本 Web開発者向けHTML5ガイドライン：ドキュメントの構造とセマンティクス は、このように提案しました（オプション1）：

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

また、フッターのセクションを使用できることも指摘しています。したがって、セクションは実際のページコンテンツの外部で使用できます。

2
alds

ASIDEは、セカンダリコンテンツも含めるように変更されました。

HTML5 Doctorのすばらしい記事がここにあります： http://html5doctor.com/aside-revisited/

抜粋：

脇の新しい定義では、そのコンテキストを認識し続けることが重要です。 > article要素内で使用する場合、コンテンツはその記事（用語集など）に特に関連する必要があります。記事要素の外部で使用する場合、コンテンツはサイトに関連する必要があります（たとえば、ブログロール、追加のナビゲーションのグループ、およびコンテンツがページに関連している場合は広告さえも）。

0
Kray