【head要素との違いは?】htmlのheader要素とは? 書き方も分かりやすく解説!

header要素について知りたい人

header要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

header要素とは?
header要素の書き方
header要素とhead要素の違い
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

header要素はその名前の通りWebサイトのヘッダーを作るために使われるものです。

ヘッダーはサイト名、ロゴ、メニューなどは配置されることが多く、とても重要な部分です。

ヘッダーはWebサイト制作時必ず必要なものなのでしっかりと理解する必要があります。

そこでこの記事ではheader要素について解説していきます。

また、混同しがちなhead要素との違いについてもお話していきます。

気になる方は是非最後まで読んで頂ければと思います。

header要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.header要素とは?

header要素は文書やセクションのヘッダーを表します。

文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。

トップページのヘッダーとする場合は、Webサイトのロゴや検索フォーム、メインのナビゲーションメニューなどが含まれます。

注意点

<head>と<header>は別物です。

head要素とheader要素の違いはサイトに表示されるかどうか、タグの中に含む内容かどうかです。

head要素の方はサイトに表示されることはなく、基本的にメタタグやリンクタグを書きます。

2.header要素の書き方

それではheader要素の書き方をみていきましょう。

・・・

<body>
 <header>
  <h1>タイトル</h1>
　<nav>
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">COMPANY</a></li>
    <li><a href="#">PRODUCT</a></li>
    <li><a href="#">CONTACT</a></li>
   </ul>
  </nav>
 </header>
</body>

・・・

header要素はbody要素のコンテンツのヘッダー部を意味します。

ヘッダーはページの最上部に配置され、最初に現れる要素になります。

そのため、見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。

上記ではタイトルとナビゲーションを配置しました。

header要素内に配置する具体的な例を他にもみていきましょう。

ページの概要
ページ内リンクのメニュー
ロゴ
記事タイトル
セクションの見出し
セクションの概要
検索フォーム
日時
作者名

上記のものも適宜配置できるので自分の好きなようにheader要素を使いましょう!

3.header要素とhead要素の違い

よく混同されがちなheader要素とhead要素の違いをみていきましょう。

名前は似ていますが、役割が異なるのしっかりと区別しましょう!

HTMLのhead要素は文書のヘッダ部分を指定するためのものです。

具体的には文字コード、タイトル、CSSのリンクなどを書いていきます。

そのため、head要素はブラウザのために使う、header要素は訪れたユーザーのために使うものと認識しておきましょう。

↓↓↓↓ head要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日HTMLのhead要素とは? 書き方や読み方を分かりやすく解説!

「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント