HTML
セクショニング要素

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
サーチ…


備考

HTML5標準では、主要素がセクション要素としてリストされていません。

記事要素

<article>要素には、記事、ブログ投稿、ユーザーコメント、またはRSSのようなページのコンテキスト外で配布できるインタラクティブなウィジェットなどの自己完結型コンテンツが含まれています。

  • 記事要素が入れ子になっている場合、内側記事ノードの内容は外側記事要素に関連する必要があります。

複数の投稿（ article ）とコメント（ article ）を含むブログ（ section ）は、このように見えるかもしれません。 

<section>
    <!-- Each individual blog post is an <article> -->
    <article>
        <header>
            <h1>Blog Post</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>

        <p>The article element represents a self contained article or document.</p>
        <p>The section element represents a grouping of content.</p>

        <section>
            <h2>Comments <small>relating to "Blog Post"</small></h2>

            <!-- Related comment is also a self-contained article -->
            <article id="user-comment-1">
                <p>Excellent!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>

    <!-- ./repeat: <article> -->

</section>

<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
    <p>This content should be unrelated to the blog.</p>
</footer>

不要な使用を避ける

ページの主な内容（ヘッダー、フッター、ナビゲーションバーなどを除く）が単なる要素グループです。 <article> <main>要素を<main>要素に置き換えることはできません。 

<article>
    <p>This doesn't make sense, this article has no real `context`.</p>
</article>

代わりに、記事を<main>要素で置き換えて、これがこのページのmainコンテンツであることを示します。 

<main>
    <p>I'm the main content, I don't need to belong to an article.</p>
</main>

別の要素を使用する場合は、複数のデバイスとHTML5以外のブラウザ間で正しい解釈とレンダリングのために<main> ARIAロールを指定してください。 

<section role="main">
    <p>This section is the main content of this page.</p>
</section>

ノート：

<article>要素の公式HTML5仕様を読むには、ここをクリックしてください

メインエレメント

<main>要素には、Webページのメインコンテンツが含まれています。このコンテンツは個々のページに固有のもので、サイトの他の場所には表示しないでください。ヘッダー、フッター、ナビゲーション、ロゴなどの繰り返しコンテンツは要素の外側に配置されます。

  • <main>要素は、たった1ページで1 回だけ使用する必要があります。
  • <main>要素は、 article 、 aside 、 footer 、 headerまたはnav要素の子孫として含めることはできません。

次の例では、 単一のブログ投稿 （および参照やコメントなどの関連情報）を表示しています。 

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

  • ブログの投稿は<main>要素に含まれており、これがこのページのメインコンテンツであることを示しています（したがって、ウェブサイト全体で一意です）。

  • <header>タグと<footer>タグは、 <main>要素の兄弟です。

ノート：

HTML5仕様では、 <main>要素はセクション要素ではなく、 グループ要素として認識されます。

メインコンテンツとして使用されることを意図した他の要素への role="main" ARIAロール属性の追加は、HTML5をサポートしていないユーザエージェントを支援し、そうでない場合にはより多くのコンテキストを提供することをお勧めします。

<main>要素はデフォルトでメインの役割を持っているため、提供する必要はありません。

<main>要素の公式HTML5仕様を読むには、ここをクリックしてください

<nav>要素は主にウェブサイトのメインナビゲーションブロックを含むセクションに使用するためのもので、ウェブページの他の部分（目次のアンカーなど）や他のページへのリンクを含むことができます。

インラインアイテム

以下は、ハイパーリンクのインラインセットを表示します。 

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

必要に応じてリスト項目を使用する

コンテンツがアイテムのリストを表す場合は、リストアイテムを使用してこれを表示し、ユーザーエクスペリエンスを向上させます。

ここでrole="navigation"に注意してください。 

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

不要な使用を避ける

<footer>要素には、サイトの他の部分へのリンクリスト（FAQ、T＆Cなど）があります。この場合、フッター要素だけで十分です。リンクを<footer> <nav>要素でさらにラップする必要はありません。 

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

ノート：

role="navigation"追加<nav>要素へのARIAの役割は、HTML5をサポートしていないユーザエージェントを支援し、そうしたコンテキストのコンテキストを提供することをお勧めします。 

<nav role="navigation"><!-- ... --></nav>

スクリーンリーダー：（ 視覚障害者がサイトをナビゲートできるようにするソフトウェア）

スクリーンリーダーのようなユーザーエージェントは、 <nav>要素を要求に応じて異なって解釈します。

  • ページのレンダリング時に<nav>要素の優先順位を高くすることができます
  • それは要素のレンダリングを遅らせる可能性があります
  • ユーザーのニーズに合わせて特定の方法でページを適合させることができます
    例：視覚障害者のために<nav>要素内のテキストリンクを大きくする。

<nav>要素の正式なHTML5仕様を読むには、ここをクリックしてください

セクションエレメント

<section>要素は、コンテンツをテーマ別にグループ化するための一般的なセクションを表します。すべてのセクションは、通常、セクションの子として見出し要素で識別できる必要がありsection 。

  • <article>内の<section>要素を使用することも、その逆も可能です。
  • すべてのセクションにテーマ （このリージョンを識別する見出し要素）
  • <section>要素を一般的なスタイリングの 'コンテナ'として使用しないでください。
    スタイリングを適用するコンテナが必要な場合は、代わりに<div>使用します。

次の例では、複数のチャプターを持つ1つのブログ投稿を表示しています。各チャプターはセクション（テーマごとにグループ化されたコンテンツのセットで、各セクションの見出し要素で識別できます）です。 

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

ノート：

開発者は、要素の内容をシンジケートすることが理にかなっている場合、 article要素を使用する必要があります。

<main>要素の公式HTML5仕様を読むには、ここをクリックしてください

ヘッダ要素

<header>要素は、最も近い祖先のセクションコンテンツまたはセクションルート要素の紹介コンテンツを表します。 <header>には、通常、入門用またはナビゲーション用の補助機能のグループが含まれています。

注：ヘッダー要素はセクショニングコンテンツではありません。それは新しいセクションを導入しません。

例： 

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

この例では、 <article>に<header>ます。 

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
  </header>
  <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

W3C勧告案

フッター要素

<footer>要素には、ページのフッター部分が含まれます。

p段落タグを含む<footer>要素の例を次に示します。 

<footer>
    <p>All rights reserved</p>
</footer>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow