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

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

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

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

この記事でお話すること
  • header要素とは?
  • header要素の書き方
  • header要素とhead要素の違い

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要素について詳しく知りたい方は以下の記事をご覧になって下さい。

HTMLのhead要素とは? 書き方や読み方を分かりやすく解説!

 

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

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

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。