HTML
headerタグ
headerタグ
header tag(ヘッダー タグ)はウェブーページの上の部分をです。 ヘッダータグではサイトのロゴ、メーニュ、検索窓などが置いてあります。 よく使われるYahooージャパンのサイトを見ると下のイメージの部分がヘッダータグのエリアです。
ヤフージャパン
ネイバーまとめ
header タグには上のように会社の名、ロゴ、メーニュ、検索エリアなどがあります。
header タグの使い方
<header>いろいろ</header>
現在のサイトピンクコーディングのヘッダならこう書けますね。
下のソースを見ましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>headerタグ</title>
</head>
<body>
<header>
<div id="serviceNameArea">
<div>
<img src="/material/jp/images/main/happyCatHeader.png" alt="happy cat image">
</div>
<a href="/">
<h1 id="serviceName">pinkcoding</h1>
<h2>Web Technology, ピンクコーディング</h2>
</a>
</div>
<div id="searchArea">
<div id="searchEngineKeywordLabel">
<input type="text" id="searchEngineKeyword" placeholder="検索キーワード.">
</div>
<div id="searchBtnLabel">
<img src="/material/jp/images/service/searchIcon.png" id="searchBtn">
</div>
</div>
</header>
</body>
</html>
結果は、すぐ下で確認出来ます。
実行したら今とは違いますね。CSSを勉強して適用したら今のように作れます。
では次はfooterタグについて勉強しましょう。
