当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

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><!--header要素の開始タグ-->
2<h1>サンプルサイト</h1>
3</header><!--header要素の終了タグ-->
4
5<main><!--main要素の開始タグ-->
6<h2>サンプル見出し1</h2>
7<p>ここにテキストが入ります。</p>
8<p>ここにテキストが入ります。</p>
9<h2>サンプル見出し2</h2>
10<p>ここにテキストが入ります。</p>
11<p>ここにテキストが入ります。</p>
12</main><!--main要素の終了タグ-->
13
14<footer><!--footer要素の開始タグ-->
15(c)2021 著作者の名前
16</footer><!--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をコピーしました