web-dev-qa-db-ja.com

サイドエレメントを外に出すか、メインエレメントの内側に置く必要がありますか？

aside要素に、「あら、ちなみに…」の提案、広告、クロスセルなどのコンテンツが含まれているとしましょう。

  1. asideの外にmainを置いても構いませんか？
  2. 「はい」の場合、「[メインコンテンツにスキップ]コマンド」など、asideをmainの外に置いておくと、アクセシビリティよりも優れていますか？
  3. 最後になりましたが、asideの外側または内側にmainタグを含めると、SEOに影響があるかどうかを知りたいと思います。
htmlseoaccessibilitysemantic-markup
16
Pratik Mehta

HTML5の場合asideが「aside要素の周囲のコンテンツに関連する」と定義されているだけです。

HTML 5.1の場合 （CR）定義 より具体的になりました 、asideは「子育ての内容に関連している」セクションコンテンツ」。

新しい定義に従って、aside要素は、関連するセクション要素の中にある必要があります。 main要素はではありませんセクション化要素（article、section、body、figureなどの要素）。もちろん、asideをmainに配置することもできますが、これはmainの最も近いセクション化要素の親に関連付けられます。

つまり、次の2つの例では（asideの場合）セマンティックの違いはありません。

<body>
  <main></main>
  <aside><!-- related to the body --></aside>
</body>

<body>
  <main><aside><!-- related to the body --></aside></main>
</body>

いくつかの異なるケースを示す例：

<body>

  <main>

    <article>

      <aside><!-- related to the article --></aside>

      <section>

        <aside><!-- related to the section --></aside>

        <blockquote>
          <aside><!-- related to the blockquote (not to the section!) --></aside>
        </blockquote>

        <div>
          <aside><!-- related to the section (not to the div!) --></aside>
        </div>

      </section>

    </article>

    <aside><!-- related to the body (not to the main!) --></aside>

  </main>

  <aside>
    <!-- related to the body -->
    <aside><!-- related to the (parent) aside --></aside>
  </aside>

  <nav>
    <aside><!-- related to the nav --></aside>
  </nav>

  <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
  </footer>

</body>
21
unor

もしあなたの <aside>はあなたのコンテンツに直接関係しています<main>それから<main>。今、言われていること...

  1. はい、意味的には<aside>外<main>（同様に、有効ですが、コンテンツはそれ以外の場合に正当化される可能性があります）。
  2. ここでスキップリンクがどのように機能しているのか理解できませんが、それ以外の場合は<aside>外<main>はアクセシビリティに害も利益もありません。適切な構造と有効なマークアップに従っている限り、問題はありません。
  3. 私は何も知りません。私が持っています <aside>s外<main>私のサイト、そして<aside>s内部<main>も同様で、ランキングに違いはありません。このような特定のビットについて検索エンジンは一般的に不透明であることを考えると、懸念がある場合は、A/Bテストを検討することをお勧めします。

HTML5仕様エディターの1つによって作成されたHTML5 Doctorからの関連資料：

11
aardrian