HTMLコーディングメモ006

ブロック要素

Webサイトには、ヘッダ/フッタ、ナビゲーションメニュー、関連記事、などの構成要素がある。

それらをそれぞれ個別のブロックとしてタグで囲み、グループ化することが可能。

グループ化しておくと、グループ毎に異なるCSSを適用することができる。

ブラウザで表示したときに、前後に改行が入るタグで囲まれた要素が「ブロック要素」。

改行が入らずテキストの一部として扱われるタグで囲まれた要素が「インライン要素」。

ヘッダ部分の作成 <header>

ページ上部のヘッダ部分を構成するブロック。

<header>
    <h1>Header Title</h1>
    <p>Header Description</p>
</header>

ナビゲーションメニューの作成 <nav>

ナビゲーションメニューを構成するブロック。

<header>タグの中に含まれることが多い。

記事の作成 <article>

ページ内の記事となる部分で、特に独立ページとしても成り立つ内容には<article>タグでブロック構成する。

テーマ群の作成 <section>

ページ内の記事となる部分で、塊でコンテンツとして成り立つ内容には<section>タグでブロック構成する。

メインコンテンツ部分の作成 <main>

ページのコンテンツ全体を構成するブロック。

中に<article>や<section>が入ってくる。

補足情報の作成 <aside>

本文ではない補足情報を構成する。

フッタ部分の作成 <footer>

ページ下部のフッタ部分を構成するブロック。

SNS等の関連リンクやコピーライトが含まれる。

独自の意味を持たせるブロック <div>

特に典型的なブロックとして定義できないが、独自で意味を持たせたいブロックを構成する。