2020.11.03
header要素
header
header要素は各セクションの紹介やナビゲーションの手助けとなる内容を記述します。
BODY要素やarticle要素内で用いられます。
article要素に含まれない場合は、body要素(ページ全体)のヘッダー情報を示すことになります。
header要素はセクション内において、一般的にh1~h6の見出しを含みますが必須ではありません。
カテゴリー
フロー・コンテンツ
パルパブル・コンテンツ
header属性
固有の属性はありません。
header使用例
header使用例(ページ全体のヘッダとして使用する例)
[html highlight=”8,17″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<header>
<nav>
<ul class="globalnav">
<li>TOPへ</li>
<li>このサイトについて</li>
<li>カテゴリー</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>ページの見出し</h1>
<p>(内容…)</p>
</section>
</main>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<header>
<nav>
<ul class="globalnav">
<li>TOPへ</li>
<li>このサイトについて</li>
<li>カテゴリー</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>ページの見出し</h1>
<p>(内容…)</p>
</section>
</main>
</body>
</html>
[/html]
header使用例(articleのヘッダとして使用する例)
[html highlight=”9,12″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インディアンスパゲッティ< | tech.pjin.jp</title>
</head>
<body>
<article>
<header>
<h1>インディアンスパゲッティ</h1>
<p>今日先輩が「インディアン、インディアン」って連呼しているので何の話かと思ったら…</p>
</header>
<aside>
<p>
コロンブスがカリブ諸島についたとき、インド周辺の島々であると誤認したから
インドじゃないのにインディアンって呼ばれるようになったみたいですね。
<p>
</aside>
</article>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インディアンスパゲッティ< | tech.pjin.jp</title>
</head>
<body>
<article>
<header>
<h1>インディアンスパゲッティ</h1>
<p>今日先輩が「インディアン、インディアン」って連呼しているので何の話かと思ったら…</p>
</header>
<aside>
<p>
コロンブスがカリブ諸島についたとき、インド周辺の島々であると誤認したから
インドじゃないのにインディアンって呼ばれるようになったみたいですね。
<p>
</aside>
</article>
</body>
</html>
[/html]