4

<main>HTML5ドラフト仕様に要素が追加されたので、より正しいページレイアウトはどれですか？

<body>
    <header> ... </header>
    <main>
        <aside> ... </aside>
    </main>
    <footer> ... </footer>
</body>

また;

<body>
    <header> ... </header>
    <section>
        <main> ... </main>
        <aside> ... </aside>
    </section>
    <footer> ... </footer>
</body>
4

3 に答える 3

7

マークアップパターンの例のそれぞれの正しさに関する答えは、主要な要素の規範的な定義にあります。

この要素を使用できるコンテキスト：フローコンテンツが期待されるが、記事、脇、フッター、ヘッダー、またはnav要素の祖先がない場合。作成者は、ドキュメントに複数の主要な要素を含めることはできません。

この場合、どちらのマークアップ例も適合しています。理論的な例だけから、どちらが最も適切または実用的であるかを知ることは困難です。

そして、ブラウザはどのスペックをフォローしていますか？

ブラウザは、 W3CHTML仕様で定義されている主要な要素を実装しています。W3C HTMLバリデーターなどの適合性チェッカーは、W3CHTML仕様の適合性要件を実装します。

注：メイン要素は、近い将来HTML5.0に追加される予定です。

注： HTML 5.1のメイン要素の仕様は、拡張機能の仕様に優先します。

于 2013-02-12T03:39:17.687 に答える
2

いつものように、それは内容に依存します。

私にとって、とのコンテンツがheaderすべてfooterのページに共通である場合は、mainそのコンテンツがそのページに固有である必要がある要素の外にそれらを残します。ただし、headerおよび/またはfooterがそのページのメインコンテンツにのみ関連する場合は、それらを。内に配置しますmain。

同じロジックがaside要素に適用されます。

さらに、このページでSteveFaulknerが言っていることを読んでください。彼はすべてを知っています！

アップデート！ この特定の質問のために、要素がどのように使用されるかについてのさらなる例を含む記事を投稿しました。main

于 2013-02-12T11:51:01.727 に答える
0

2番目の例では、<main>を<section>内に配置しました。

<body>は暗黙的に「セクション」であり、<section>はそれに属しているため、<section>は-実際には-サブセクションです。

これは問題を引き起こします。

なんで？

スティーブが指摘しているように、<main>はページごとに1回しか使用できません。この例では、そのページのサブセクション内でページの主要部分を定義する1つの要素を使用することを選択しました。

何かの「主要な」部分は、確かにそのサブセットに属することはできません。現在の仕様に従って「許可」されていることに関係なく、これは単に意味がありません。この例では、<main>の展開は、セクショニングコンテンツの使用によって記述された構造上の意図と矛盾しています。

構造的には、最初の例は-したがって-わずかに優れていますが、<aside>のセマンティックな選択は最適ではありません。あなたは本質的に、「これが私のページのコンテンツの最も重要な部分であり、その中には接線方向の、ゆるやかに関連するものがあります」と言っています。何に接しているの？

そうでもなければ...

フローコンテンツの一部を、<aside>に隣接する<main>領域内に直接配置する予定です。このコンテンツは、<body>に直接属するmainに直接属します。<aside>は<body>のサブセクションのままであり、実際にはいくつかのメインコンテンツの「脇」です。

これは完全に健全でしょう。

于 2013-02-12T13:32:20.943 に答える