HTMLセクションタグの使い方と解説：header 、 main 、 section 、 aside 、 footer

HTMLにおけるセクションタグは、ウェブページの構造と意味を定義するための重要な要素です。

< header >、< main >、< section >、< aside >、< footer >などのセクションタグを使い分けることで、ウェブページの構造を分かりやすくマークアップすることができます。

本記事では、それぞれのセクションタグの使い方を詳しく解説します。

最近HTMLを学び始めたけど、セクションタグってどう使うんですか？

セクションタグは、ウェブページの構造と意味を定義するための要素で、< header >、< main >、< section >、< aside >、< footer >などがあります。それぞれのタグを使い分けることで、ウェブページを分かりやすくマークアップすることができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

記事のまとまり表す：articleタグ

HTMLにおける< article >タグは、ウェブページ内で独立したコンテンツを表現するためのタグです。通常、< article >タグは、ウェブページの中で単一の記事、ニュース記事、ブログ記事、レビュー、コメントなどを定義するために使用されます。

< article >タグは、< section >タグと同様に、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< article >タグを使用することで、ウェブページ内の重要なコンテンツを分かりやすくマークアップすることができます。

以下は、< article >タグを使用してブログ記事を表現する例です。

<article>
  <header>
    <h1>ブログ記事のタイトル</h1>
    <p class="article-meta">投稿日： 2023年4月1日　著者：John Doe</p>
  </header>
  
  <section>
    <p>ブログ記事の本文がここに入ります。</p>
  </section>
  
  <footer>
    <p>この記事の著作権は〇〇に帰属します。</p>
  </footer>
</article>

上記の例では、< article >タグで記事全体を囲み、< header >、< section >、< footer >の3つの要素で記事を構成しています。

< header >要素は、記事のタイトルとメタデータを含むコンテナです。メタデータには、記事の投稿日や著者などが含まれます。< section >要素は、記事の本文を含むコンテナです。< footer >要素は、記事のフッターに表示される情報を含むコンテナです。

< article >タグを使用することで、ウェブページの構造を分かりやすくし、コンテンツを簡単にスタイリングできるようになります。

テーマの区切りのまとまりを表す：sectionタグ

HTMLにおける< section >タグは、ウェブページ内の特定のコンテンツのまとまりを表現するためのタグです。通常、< section >タグは、ウェブページ内の異なるテーマ、セクション、章、パートなどを区切るために使用されます。

< section >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< section >タグを使用することで、ウェブページ内のコンテンツを分かりやすくマークアップすることができます。

以下は、< section >タグを使用してウェブページのコンテンツを分割する例です。

<section>
  <h2>第1章：ウェブページの構造</h2>
  <p>この章では、ウェブページの構造について説明します。</p>
</section>

<section>
  <h2>第2章：HTMLの基本</h2>
  <p>この章では、HTMLの基本について説明します。</p>
</section>

<section>
  <h2>第3章：フォーム</h2>
  <p>この章では、フォームについて説明します。</p>
</section>

上記の例では、< section >タグで3つのセクションが定義されています。それぞれのセクションには、< h2 >タグでタイトルが定義され、< p >タグでコンテンツが定義されています。

< section >タグを使用することで、ウェブページの構造を分かりやすくし、コンテンツを簡単にスタイリングできるようになります。

補足部分のまとまりを表す：asideタグ

HTMLにおける< aside >タグは、ウェブページ内で補足情報やサイドバーとして表示される情報を表現するためのタグです。通常、< aside >タグは、ウェブページ内の主要なコンテンツとは関係が薄い情報を表示するために使用されます。

< aside >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< aside >タグを使用することで、ウェブページ内の補足情報を分かりやすくマークアップすることができます。

以下は、< aside >タグを使用して補足情報を表示する例です。

<article>
  <h1>記事のタイトル</h1>
  <p>記事の本文がここに入ります。</p>

  <aside>
    <h2>関連記事</h2>
    <ul>
      <li><a href="#">関連記事1</a></li>
      <li><a href="#">関連記事2</a></li>
      <li><a href="#">関連記事3</a></li>
    </ul>
  </aside>
</article>

上記の例では、< article >タグで記事全体を囲み、記事の本文の後に< aside >タグで関連記事を定義しています。< aside >タグ内には、< h2 >タグでタイトルが定義され、< ul >タグで関連記事のリストが定義されています。

< aside >タグを使用することで、ウェブページの構造を分かりやすくし、補足情報を簡単にスタイリングできるようになります。

リンクの集まりのまとまりを表す：navタグ

HTMLにおける< nav >タグは、ウェブページ内のナビゲーションメニューを表現するためのタグです。通常、< nav >タグは、ウェブページ内のメインナビゲーション、サブナビゲーション、フッターナビゲーションなどを表示するために使用されます。

< nav >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< nav >タグを使用することで、ウェブページ内のナビゲーションメニューを分かりやすくマークアップすることができます。

以下は、< nav >タグを使用してメインナビゲーションメニューを表示する例です。

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">製品紹介</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

上記の例では、< nav >タグでメインナビゲーションメニューを囲み、< ul >タグでリストを定義しています。それぞれのリストアイテムには、< a >タグでリンクが定義されています。

< nav >タグを使用することで、ウェブページの構造を分かりやすくし、ナビゲーションメニューを簡単にスタイリングできるようになります。

最初の部分のまとまりを表す：headerタグ

HTMLにおける< header >タグは、ウェブページ内の最初の部分を表現するためのタグです。通常、< header >タグは、ウェブページのロゴ、タイトル、メニュー、検索フォームなどを含む、ウェブページの重要なコンテンツを表示するために使用されます。

< header >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< header >タグを使用することで、ウェブページ内の最初の部分を分かりやすくマークアップすることができます。

以下は、< header >タグを使用してウェブページのヘッダーを定義する例です。

<header>
  <h1>ウェブページのタイトル</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">製品紹介</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

上記の例では、< header >タグでウェブページのヘッダー全体を囲み、< h1 >タグでウェブページのタイトルを、< nav >タグでメニューを定義しています。それぞれのメニューアイテムには、< a >タグでリンクが定義されています。

< header >タグを使用することで、ウェブページの構造を分かりやすくし、最初の部分を簡単にスタイリングできるようになります。

最後の部分のまとまりを表す：footerタグ

HTMLにおける< footer >タグは、ウェブページ内の最後の部分を表現するためのタグです。通常、< footer >タグは、ウェブページの著作権情報、連絡先情報、サイトマップ、ソーシャルメディアへのリンクなどを表示するために使用されます。

< footer >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< footer >タグを使用することで、ウェブページ内の最後の部分を分かりやすくマークアップすることができます。

以下は、< footer >タグを使用してウェブページのフッターを定義する例です。

<footer>
  <p>Copyright © 2023, 〇〇. All rights reserved.
  </p>
  <nav>
    <ul>
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">利用規約</a></li>
    </ul>
  </nav>
</footer>

上記の例では、< footer >タグでウェブページのフッター全体を囲み、< p >タグで著作権情報を、< nav >タグでリンクを定義しています。それぞれのリンクアイテムには、< a >タグでリンクが定義されています。

< footer >タグを使用することで、ウェブページの構造を分かりやすくし、最後の部分を簡単にスタイリングできるようになります。

セクションの連絡先を表す：addressタグ

HTMLにおける< address >タグは、ウェブページ内の連絡先情報を表現するためのタグです。通常、< address >タグは、セクション内の連絡先情報、フッター内の連絡先情報、個人の連絡先情報などを表示するために使用されます。

< address >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< address >タグを使用することで、ウェブページ内の連絡先情報を分かりやすくマークアップすることができます。

以下は、< address >タグを使用してセクション内の連絡先情報を表示する例です。

<section>
  <h2>お問い合わせ</h2>
  <address>
    〒123-4567 東京都渋谷区1-2-3<br>
    〇〇ビル5階<br>
    TEL: 0120-123-4567<br>
    E-mail: example@example.com
  </address>
</section>

上記の例では、< section >タグでセクション全体を囲み、< h2 >タグでセクションのタイトルを、< address >タグで連絡先情報を定義しています。それぞれの連絡先情報は、< br >タグで改行して表示しています。

< address >タグを使用することで、ウェブページの構造を分かりやすくし、連絡先情報を簡単にスタイリングできるようになります。

ページの主な内容を表す：mainタグ

HTMLにおける< main >タグは、ウェブページ内の主要なコンテンツを表現するためのタグです。通常、< main >タグは、ウェブページ内の記事、製品情報、サービス説明などを含む、ウェブページの主要なコンテンツを表示するために使用されます。

< main >タグは、セマンティックHTMLの一部であり、ウェブページの構造と意味を定義するために使用されます。つまり、< main >タグを使用することで、ウェブページ内の主要なコンテンツを分かりやすくマークアップすることができます。

以下は、< main >タグを使用してウェブページの主要なコンテンツを表示する例です。

<main>
  <h1>ウェブページのタイトル</h1>
  <p>ウェブページの説明がここに入ります。</p>
  <section>
    <h2>セクションのタイトル</h2>
    <p>セクションの説明がここに入ります。</p>
  </section>
</main>

上記の例では、< main >タグでウェブページの主要なコンテンツ全体を囲み、< h1 >タグでウェブページのタイトルを、< p >タグでウェブページの説明を、< section >タグでセクションを定義しています。それぞれのセクションには、< h2 >タグでセクションのタイトルが、< p >タグでセクションの説明が定義されています。

< main >タグを使用することで、ウェブページの構造を分かりやすくし、主要なコンテンツを簡単にスタイリングできるようになります。

各セクションを複合的に利用したhtmlのサンプルプログラム

以下は、< header >、< main >、< section >、< aside >、< footer >などのセクションを組み合わせたHTMLのサンプルプログラムです。

<!DOCTYPE html>
<html>
  <head>
    <title>ウェブページのタイトル</title>
  </head>
  <body>
    <header>
      <h1>ウェブページのヘッダー</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">製品紹介</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>セクションのタイトル1</h2>
        <p>セクションの説明がここに入ります。</p>
      </section>
      <section>
        <h2>セクションのタイトル2</h2>
        <p>セクションの説明がここに入ります。</p>
        <aside>
          <h3>サイドバーのタイトル</h3>
          <ul>
            <li><a href="#">リンク1</a></li>
            <li><a href="#">リンク2</a></li>
            <li><a href="#">リンク3</a></li>
          </ul>
        </aside>
      </section>
    </main>
    <footer>
      <p>Copyright © 2023, 〇〇. All rights reserved.
      </p>
      <nav>
        <ul>
          <li><a href="#">プライバシーポリシー</a></li>
          <li><a href="#">利用規約</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

上記の例では、< header >タグでウェブページのヘッダーを定義し、< nav >タグでメニューを表示しています。次に、< main >タグでウェブページの主要なコンテンツを定義しています。

この中には、2つの< section >タグがあり、それぞれのセクションには、< h2 >タグでタイトルが定義されています。また、2番目のセクションには、< aside >タグでサイドバーを表示しています。最後に、< footer >タグでウェブページのフッターを定義しています。

このように、セクションを複合的に使用することで、ウェブページを分かりやすくマークアップすることができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

セクションタグの使い方を詳しく解説しました。

HTMLにおけるセクションタグは、ウェブページの構造と意味を定義するための要素である。
< header >、< main >、< section >、< aside >、< footer >などのタグを使い分けることで、ウェブページを分かりやすくマークアップすることができる。
< header >タグはウェブページのヘッダーを、< main >タグは主要なコンテンツを、< section >タグはセクションを、< aside >タグは補足情報を、< footer >タグはフッターを表現するために使われる。

セクションタグの使い方について、具体的に知ることができて良かったです。これからウェブページを作成する際に、役立てたいと思います。

セクションタグは、ウェブページを構造的に整理するための大切な要素である。正しく使い分けることで、ウェブページを分かりやすくすることができるだけでなく、検索エンジンなどのユーザーエージェントからも正しく認識されるようになる。

ウェブページを作成する際には、セクションタグの使い方にも注意してみてはいかがでしょうか。