はじめてのWEBサイト作成
HTML
CSS
JavaScript
概要
ここではHTMLのheader, nav, main, article, section, aside, footerタグの使い分けについて学習します。
すべてHTML文書の構造を区分けし、意味付けするためのタグです。
正しく使用することでコンテンツの読みやすさ、アクセシビリティ、SEO（検索エンジンへのアピール）が向上します。
見比べてそれぞれの使い方の違いを感じ取ってください。
headerタグ
役割＆特徴
ページ全体のヘッダー部分を定義します。
ページ内にheaderが複数設置されることは、ほぼありません。
そのためclassやidを記述しなくても、headerタグに対してCSSでスタイルを適用できます。
headerはサイト全体で統一されて、全ページ（トップページだけ別ということもありますが）で共通したものを使用します。
サイトのロゴや、サイト全体のナビゲーションメニュー、検索フォームなどを含むことが一般的です。
店舗のコーポレートサイトでは営業時間や電話番号も含めることが多いです。
sectionごとにheaderを使用することもできますが、そのような使い方はほぼしません。
使用例
<header>
<img src="" alt="サイトのロゴ">
<nav>
<a href="#home">ホーム</a>
<a href="#about">概要</a>
</nav>
</header>navタグ
役割＆特徴
複数のリンクをまとめるときに使用します。
設置する場所によって名前が変わります。
サイト全体のグローバルメニュー、ページ内の目次、パンくずリストなどに使用します。
使用例
<nav id="global-navigation">
<a href="#home">ホーム</a>
<a href="#services">サービス</a>
</nav>
<nav id="table-of-contents">
<a href="#home">ホーム</a>
<a href="#services">サービス</a>
</nav>
<nav id="breadcrumb-list">
<a href="#home">ホーム</a>
<a href="#services">サービス</a>
</nav>mainタブ
役割＆特徴
ページの中で文字通りメインとなるコンテンツを囲みます。
乱暴な言い方をするとheaderでもasideでもfooterでもない部分はmainと考えてよい、つまり他のページと異なることが書いてある部分はmainになります。
実際にはmainの中に複数のsectionやarticleが入ることになります。
使用例
<main>
<article>
<h2>ハリーポッターと賢者の石</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
<article>
<h2>ハリーポッターと秘密の部屋</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
<article>
<h2>ハリーポッターとアズカバンの囚人</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
</main>ハリーポッターと賢者の石
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
ハリーポッターと秘密の部屋
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
ハリーポッターとアズカバンの囚人
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
articleタグとsectionタグ
役割＆特徴
まず役割が似通っていて、articleがsectionを囲んでいることも、sectionがarticleを囲んでいることもあります。
使い分け方としては、前後に関係があるものが記述されていればsectionを使用する、前後に関係なく独立した内容であればarticleを使用することが多いです。
ただ本当に使い分けが難しいケースが多く、使用例を見ていただければと思いますが、映画の上映で考えれば賢者の石と秘密の部屋は独立していますが、ハリーポッター全体で考えればつながっています。
使用例
<main>
<article>
<h2>ハリーポッターと賢者の石</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
<article>
<h2>ハリーポッターと秘密の部屋</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
<article>
<h2>ハリーポッターとアズカバンの囚人</h2>
<section>
<h2>第1章</h2>
<p>第1章の内容...</p>
</section>
<section>
<h2>第2章</h2>
<p>第2章の内容...</p>
</section>
<section>
<h2>第3章</h2>
<p>第3章の内容...</p>
</section>
</article>
</main>ハリーポッターと賢者の石
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
ハリーポッターと秘密の部屋
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
ハリーポッターとアズカバンの囚人
第1章
第1章の内容…
第2章
第2章の内容…
第3章
第3章の内容…
asideタグ
ページの補助的なコンテンツを囲みます。
おもに2カラム表示のページのサイドバーとして使用します。
サイドバーの中には全ページ共通で使用する、閲覧者のサイト内回遊を助けるものを記述します。
ブログであれば管理人のプロフィールや告知・広告であったり、コーヒーショップであればドリンクやフードなどのカテゴリーを表示したりします。
sectionを使うことはあまりなく、articleでコンテンツを区切ることが多いです。
使用例
<aside>
<article>
シャッチクンのプロフィール
</artcle>
<article>
キャンペーンのご案内
</article>
<article>
記事カテゴリー一覧
</article>
</aside>footerタグ
ページ全体のフッター部分を定義します。
ページ内にfooterが複数設置されることは、ほぼありません。
そのためclassやidを記述しなくても、footerタグに対してCSSでスタイルを適用できます。
footerはサイト全体で統一されて、全ページ（トップページだけ別ということもありますが）で共通したものを使用します。
サイトマップや、プライバシーポリシーへのリンク、コピーライトなどを含むことが一般的です。
サイトによって1番使い方がマチマチなのがfooterだといえるでしょう。
sectionごとにfooterを使用することもできますが、そのような使い方はほぼしません。
<footer>
<a href="privacy-policy">プライバシーポリシー</a>
<p>© 2024 会社名. All rights reserved.</p>
</footer>