レイアウトデザインにも重要になるページの骨組みについて学習します。
各タグとその意味・役割について理解することが目的になります。
ページの骨組み
Webページを構成する骨組みとなるタグです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>骨組みとなるタグ</title>
</head>
<body>
<header>
ページの上部に、サイト名やロゴマーク、ヘッッダーメニューなどを表示する領域を示したタグ
主にサイトに関する情報を表示する場所
</header>
<nav>
サイトの主要なページへ案内するナビゲーションを表示する領域を示したタグ
主にグローバルナビゲーション（メインメニュー）で使用される
</nav>
<main>
ページの主要な内容を示す領域のタグ
ページの本文を示す範囲として使用するが、サイドメニューやコピーライト表記、サイトのロゴマークなどのような部分は含まない
</main>
<footer>
ページの下部に、コピーライト表記やフッターメニューなどを表示する領域を示したタグ
主にサイトに関する情報を表示する場所
</footer>
</body>
</html>
レイアウトの骨格になる以外に、アクセシビリティでも有効です
便利なブラウザの拡張機能
Google ChromeやFirefoxのブラウザで使用できる拡張機能です。
いろんなWebページの見出しの構造が確認できます。
Firefox 向け HeadingsMap をダウンロード。The extension generates a document-map or index o…
addons.mozilla.org
Generates a navigable page outline with heading and sectioning elements
chrome.google.com
Webサイトで確認するものもあります。
gsnedders.html5.org
適切な見出しの階層構造（アウトライン）は、ページに書かれている情報を、ユーザーや検索エンジン（プログラム）に正しく伝えることができます。
より多くの人にアクセスしてもらい、サイトを有効に利用してもらうためにも必要なスキルです。