【勉強メモ】ページ構造を作るタグ

アウトラインとセクション

アウトラインとは、HTML文書から見出し（h1～h6要素）だけを抜き出して、文書内のセクションとその階層を示したものです。
1. 見出しA
　　1. 見出しB
　　2. 見出しC
　　　　1. 見出しD

https://techblog.istyle.co.jp/archives/3261#:~:text=%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF%E3%80%81HTML%E6%96%87%E6%9B%B8,%E3%82%92%E7%A4%BA%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A7%E3%81%99%E3%80%82

セクショニングコンテンツは、セクション（章・節・項といった文章のまとまった範囲）を表す要素です。

セクショニングコンテンツには「article」「aside」「nav」「section」の4つの要素があります。

HTML5の仕様では、セクショニングコンテンツを利用する際は見出し要素（h1〜h6）が必要となります。見出しとなる要素がない場合、そのセクションは名無しのセクションとなります。

nav要素やaside要素など、文脈的に見出しを付けることが難しい場合は無理に見出しを付けなくても大丈夫です。

https://jam25.jp/html/html-lesson-05/

ページを構成するタグ

header

ヘッダーを明示。
アウトラインなし。

nav（ナビ）

ナビゲーションリンクであることを明示。

main

主要コンテンツであることを明示。
HTML内に１つだけしか置けない。
アウトラインに影響なし。

section

文章のまとまりを明示。
子要素に見出し（h1〜h6）を含む。
アウトラインが生まれる。

sectionタグを使用するうえで、下記3つのポイントについて確認していきましょう！
1.レイアウト目的であればdivを使うこと
2.見出しを付けれない場合、sectionは使用しない
3.適切なタグを使用する

https://jam25.jp/html/how-to-sectioningtag/

article（アーティクル）

自己完結するコンテンツを明示。
子要素に見出し（h1〜h6）を含む。

「記事ページの本文」のように自己完結できる「独立したコンテンツ」であることを前提として、使用するようにしましょう。

https://jam25.jp/html/how-to-sectioningtag/

aside（アサイド）

補助的なコンテンツを明示。

サイドバーに広告、人気記事、新着記事、SNSシェアボタンなどのコンテンツを含んだ形で使用するのが一般的です。

https://jam25.jp/html/html-lesson-06/

footer

フッターを明示。
アウトラインなし。

出典：
https://jam25.jp/html/html-lesson-06/　

https://jam25.jp/html/how-to-sectioningtag/　

https://techblog.istyle.co.jp/archives/3261#:~:text=%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF%E3%80%81HTML%E6%96%87%E6%9B%B8,%E3%82%92%E7%A4%BA%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A7%E3%81%99%E3%80%82