この記事ではページにヘッダーおよびフッターとしてマークアップする方法をご紹介します！
なお、本来であれば階層構造(ツリー構造)にしてマークアップしますが、Sampleコードでは逆に見づらくなってしまうので階層構造にはしていませんが、本番では必ず階層構造にしましょう！（ソースコードの可読性が向上します）
※ヘッダーとフッターの背景色を変えていますが、CSSを使用しています。
ヘッダーとフッターのマークアップ手順
下記の表は、今回使用するタグの一覧表になります。
今回使用するタグ一覧
| <header> | ヘッダーをマークアップ |
|---|---|
| <footer> | フッターをマークアップ |
| <h1> | 見出しをマークアップ |
| <small> | コピーライトをマークアップ |
ベースとなるソースコード
下記のソースコードをベースにマークアップをおこなっていきましょう！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
</body>
</html>① ソースコードにheaderタグを追加する
それでは、下記のようにヘッダーをマークアップしてみましょう！
なお、<header>でマークアップしても、画面表示に影響することはありません。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
<header></header>
</body>
</html>② ソースコードにh1タグを追加する
上記で追加したヘッダータグの子要素として、h1をマークアップしてみましょう！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
<header><h1>ちからこぶ</h1></header>
</body>
</html>③ ソースコードにfooterタグを追加する
下記のようにフッターをマークアップしてみましょう！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
<header><h1>ちからこぶ</h1></header>
<footer></footer>
</body>
</html>④ ソースコードにsmallタグを追加する
上記で追加したフッタータグの子要素として、smallタグを追記してコピーライトをマークアップしてみましょう！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
<header><h1>ちからこぶ</h1></header>
<footer><small>Copyright © ちからこぶ All Rights Reserved.</small></footer>
</body>
</html>実行結果
