当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】header/main/footer各タグの使い方

アイキャッチ画像
みきてぃ東西線

HTML5では、

  • headerタグ
  • mainタグ
  • footerタグ

の3つのタグが追加されました。

ですが、

口コミ用キャラクターアイコン

初めてHTMLに触れるけど、headerタグやmainタグ、footerタグの使い方が分からない・・・。

口コミ用キャラクターアイコン

headerタグやmainタグ、footerタグの意味は何なの?

など、まだ分からない初心者も多いですよね。

今回は、HTML5で新たに追加された「header/main/footerの各タグ」について、それぞれ分かりやすく解説していきます。

各タグの概要・使い方

htmlタグ概要
headerタグセクション内ヘッダー情報であることを示す
mainタグHTML文書内のメインコンテンツであることを示す
footerタグセクション内フッター情報であることを示す

▼簡単に図で表すと、以下のようになります。

HTML header/main/footer各タグの使い方

headerタグ

headerタグとは、セクション内におけるヘッダー情報であることを示すタグです。

主にサイトのロゴの表示やナビゲーションの設置などに使われます。

1<header>
2<h1>サンプルサイト</h1>
3</header>

mainタグ

mainタグとは、HTML文書内におけるメインコンテンツとして扱われるタグのことです。

1<main>
2<h2>サンプル見出し1</h2>
3<p>ここにテキストが入ります。</p>
4<p>ここにテキストが入ります。</p>
5<h2>サンプル見出し2</h2>
6<p>ここにテキストが入ります。</p>
7<p>ここにテキストが入ります。</p>
8</main>

footerタグ

footerタグとは、セクション内のフッター情報であることを示すタグです。

主に、プライバシーポリシーや免責事項へのリンク、コピーライトを記載するのに使われることが多いです。

1<footer>
2(c)2021 著作者の名前
3</footer>
プロフィール用アイコン
みきてぃ東西線

コピーライトの基礎知識・書き方については、以下の記事を読んでね!

コピーライトの基礎知識と正しい書き方【初心者向け】

サンプルコード

1<header>
2<h1>サンプルサイト</h1>
3</header>
4<main>
5<h2>サンプル見出し1</h2>
6<p>ここにテキストが入ります。</p>
7<p>ここにテキストが入ります。</p>
8<h2>サンプル見出し2</h2>
9<p>ここにテキストが入ります。</p>
10<p>ここにテキストが入ります。</p>
11</main>
12<footer>
13(c)2021 著作者の名前
14</footer>

▼ブラウザでは、以下のように表示されます。

HTML header/main/footer各タグの使い方
プロフィール用アイコン
みきてぃ東西線

上の「サンプルサイト」というタイトルはheaderタグ、見出しと本文はmainタグ、コピーライトはfooterタグで囲んでいるよ。

まとめ

というわけで、今回は「header/main/footerの各タグ」について解説しました。

最後に、今回のまとめです。

htmlタグ概要
headerタグセクション内ヘッダー情報であることを示す
mainタグHTML文書内のメインコンテンツであることを示す
footerタグセクション内フッター情報であることを示す

いずれもHTML5で新たに追加されたタグですので、初めてHTMLに触れる方は混乱するかと思いますが、使い方は上記のように覚えておけば簡単です。

今回の記事がお役に立てれば幸いです。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました