【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（body要素の基本構造）

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（body要素の基本構造）です。

見出し要素とセクション要素関係
その他の要素
- headr要素とfooter要素
main要素
address要素
div要素とspan要素

見出し要素とセクション要素関係

見出しとそれに対する文章全体を含む範囲をセクションといいます。

見出し要素はh1〜h6の６種類（ランク）
セクション要素（セクショニングコンテンツ）は以下４種類
- article・・・記事
- section・・・一般セクション
- aside・・・別扱いセクション
- nav・・・ナビゲーションリンクを含むセクション

アウトラインの表示ルール

セクショニングコンテンツ内の最初の見出しはそのセクションの見出しとする
２つ目以降の見出しが、
前の見出しとランクが同じ場合、前のセクションは終了しレベルが同じ新しいセクションが開始される
前の見出しよりランクが上の場合、前のセクションは終了しレベルが１つ上がった新しいセクションが開始される
前の見出しよりランクが下の場合、前の見出しのセクション内のサブセクションが開始（レベルが１つ下がる）される =暗黙のセクション
セクショニングコンテンツと見出しがセットの場合、そのセクションを含む最も近いセクションまたはセクショニングルートのサブセクションが開始される =見出し要素のランクでは判断されない
セクショニングコンテンツがセクショニング・ルートのblockquote（引用）である場合、見出しやセクショニングコンテンツを含んでいても外部アウトラインに一切表示されない

<body>
    <h1>見出しA</h1>
    <h2>見出しB</h2>
    <section>
        <h3>見出しC</h3>
    </section>
    <h2>見出しD</h2>
    <blockquote>
        <h3>見出しE</h2>
    </blockquote>
</body>

上記の場合のアウトライン：

見出しA
- 見出しB
- 見出しC
- 見出しD

セクショニング・ルート

内容として含む見出しやセクショニングコンテンツが外部アウトラインに一切影響を与えない（blockquoteは表示もされない）要素。全部で６種類。

body
blockquote
fieldset
figure
td
details

h1〜h6要素

セクションの見出しとなる要素。

article要素

記事（全体）のセクションの要素。

section要素

一般（一部）のセクション要素。

aside要素

別扱いのセクション要素。

nav要素

ナビゲーションリンクを含むセクション要素。

その他の要素

headr要素/footer要素は、最も近いセクションまたはセクショニングルートのヘッダー/フッターを表す要素。

main要素

そのページ全体のメインコンテンツを表す要素。したがって、セクション要素とheader要素・footer要素内では使えません。

address要素

article要素またはbody要素の内容に関する問合せ先情報を記載するための要素。問合せ情報以外は入れられないので注意！

div要素とspan要素

div要素はブロックレベル、span要素はインラインの汎用要素。

<body>
    <header>
        <h1>Oimoのお勉強ノート</h1>
        <span>HTML/JavaScript/CSSについて学習中</span>
        <nav>
            <ul>
                <li>Tips</li>
                <li>HTML</li>
                <li>JavaScript</li>
                <li>CSS</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h1>はじめに</h1>
                <p>このノートについて</p>
            </header>
            <div>
                ほげほげ。ふがふが。
            </div>
            ・・・
        </article>
    </main>
    <footer>
        <ul>
            <li><a href="">利用規約</a></li>
            <li><a href="">個人情報保護ポリシー</a></li>
            ・・・
        </ul>
        <address>
            お問い合わせ
            <a href="mailto:hogehoge@hogehoge.com">hogehoge@hogehoge.com</a>
        </address>
        <p>
            <small>&copy; 2020 Oimo, All rights reserved.</small>
        </p>
    </footer>
</body>

Oimo のお勉強ノート

勉強したことのメモを残す