セクション #

セクションとは章や節といった様なもの、HTMLでは見出しとそれに対応する文書の部分(セクショニングコンテンツ)といった様なものである。

HTMLには種類は様々だが、セクションを構成するための要素がいくつか存在する。

見出し #

h1~h6要素 #

h1,h2,h3,h4,h5,h6は、見出しを構成する要素である。

h1が一番上の階層で、その次に大きいのがh2、その次がh3、、というように続く。

記法例

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>

アウトライン #

HTML文書から見出しの要素だけを抜き出し、文書内のセクションが一目でわかる様にしたものをアウトラインという。

例えばこのHUGOで書いているブログでは、ページ右の部分に見出しの部分だけが表示される様になっている。これもアウトラインだと思ってくれれば良い。

(ちなみに当ブログでは全ての記事にアウトラインが表示される様には設定していない。必要に応じてアウトラインを表示する必要があると判断した場合、表示させる様にしている)

セクションを表す要素 #

以下にセクションを表す際に利用する要素を記載する。

article要素 #

article要素は独立したセクションを表す要素である。

そのため、他のセクションの一部となっている要素は含むことはできない。

適用例としては、雑誌や新聞の記事、ブログのコメントなどがある。

記法例

<h1>MYブログ</h1>

<article>
    <h2>3/9 その１</h2>
    <p>(3/9の内容・・)</p>
</article>

<article>
    <h2>3/10 その１</h2>
    <p>(3/10の内容・・)</p>
</article>

aside要素 #

aside要素は補足や脚注のような、そのセクションの内容からは別扱いのしたほうが良さそうなセクションを表す場合に利用する。

記法例

<aside>
    <h3>補足</h3>
    <p>aside要素で</p>
    <p>補足を表す</p>
</aside>

nav要素 #

nav要素は、そのページがサイト内でどこに位置するかなどといった、ナビゲーションを示すセクションを表す場合に利用する。

記法例

<nav>
    <ul>
        <li>Top</li>
        <li>プログラミング</li>
        <li>フロントエンド</li>
    </ul>
</nav>

section要素 #

section要素はこれまでに述べた３つの要素のような特別な意味は持たない、一般的なセクションを表す際に用いる要素である。

記法例

<section>
    <h2>セクション</h2>
        <p>111</p>
        <p>222</p>
</section>

セクショニング・ルート #

セクショニング・ルートとは、セクションのルートとして扱われる要素のことである。

セクショニング・ルートの下に属するセクションはそのセクショニング・ルート独自のアウトラインを持つことができる。

また、そのセクションやアウトラインはそのセクショニング・ルートの外のセクションには影響を及ぼさない。

セクショニング・ルートになる要素としては、以下の要素が挙げられている。

body要素
blockquote要素
fieldset要素
figure要素
td要素
details要素

その他、セクションに関する要素 #

header要素は、セクションまたはセクショニング・ルートのヘッダーであることを示す要素である。

body要素のヘッダーとなる場合、ページ全体のヘッダーになる。

一般的にヘッダーには見出し、ナビゲーションなどを含む。（必須ではない）

<body>
<header>
    <h1>ヘッダー</h1>
    <nav>
        <ul>
            <li>ホーム</li>
            <li>お知らせ</li>
        </ul>
    </nav>
</header>
</body>

footer要素はheader要素と逆で、セクションまたはセクショニング・ルートのフッターであることを示す要素である。

header要素の時と同様に、body要素のフッターとなる場合はページ全体のフッターになる。

一般的にフッターには問い合わせ先や著作権情報についてを記載する。（必須ではない）

・・・
    <footer>
        <ul>
            <li>著作権情報</li>
            <li>お問い合わせ</li>
        </ul>        
    </footer>
</body>

main要素 #

main要素はその範囲がページにおけるメインコンテンツであることを示す要素である。

main要素の内容には、そのページで固有の内容を記述する様にする。他のページでも共通して利用される様な要素(ナビゲーションや著作権情報など)はここには含めない様にする。

<body>

    <main>
        <article>
            <h2>記事</h2>
            ・・・
            ・・・
        </article>
    </main>

</body>

address要素 #

address要素は、問い合わせ先を示す要素である。

対象となるのはその要素から最も近いbodyまたはaddress要素であり、その要素の内容に対する問い合わせ先を示す。

<body>
・・・
    <address>
        お問い合わせ：aaa@example.com
    </address>
</body>

その他の要素 #

div要素 #

div要素はこれまでに述べた要素とは違い、決められた役割や意味を持たない要素である。

使うのに適切な要素が無い場合に利用する要素で、class属性などを利用する事で用途を示す。

<body>
    <div class="question">問題</div>
    <div class="answer">答え</div>
</body>

span要素 #

span要素もdiv要素と同じく、決められた役割や意味を持たない要素である。

div要素と違う点は、div要素はブロックレベルの要素、span要素はインライン要素という点。(詳しい意味はCSSの所で)

<body>
    <span class="question">問題</div>
    <span class="answer">答え</div>
</body>