ページ内容の構成 <header>,<nav>,<main>,<aside>,<footer>

　web ページの表示される内容に関する <header>、<nav>、<main>、<aside>、<footer> タグについての解説です。
　これらのタグはページとして表示される内容を構成しているヘッダー、ナビメニュー、コンテンツ、フッターをカテゴリごとに分けるためのタグエレメントです。 <body> タグエレメントの中身になります。

　<header>、<nav>、<main>、<aside>、<footer> は以下のようなカテゴリ分けになります。

<header>: ページのヘッダー
<nav>: サイト内をたどるためのリンク。サイト内インデックスのようなもの
<main>: ページのメインになる内容
<aside>: メイン以外の内容。サイト内操作のためのリンクや広告など
<footer>: ページのフッター

　これらのタグエレメントは、商用利用するサイトを制作するには憶えておいたほうがよいでしょう。

Example

　例えば、お店の LP （ランディングページ）を作ってみましょう。
　<header>、<nav>、<main>、<aside>、<footer> を以下のように<body> タグ内で編集します。

　<header>、<nav>、<main>、<aside>、<footer> 以外のタグエレメントもありますが、後で必要になりそうなタグです。
　<title> はウィンドウのタブに表示されます。

　<!DOCTYPE>、<html>、<head>、<body> は web ページを作成する上で基礎となるタグです。詳しくはHTML入門 <!DOCTYPE>、<html>、<head>、<body>を参照してください。

　<ul> はナビゲーションメニューでよく使われます。

　<h1>は web ページのタイトルです。<title> と同じにしたほうがよいでしょう。<p> は段落を示すタグです。<h2> は内容ごとの見出しに使用しています。

　<div> は１つのブロックとして表示するために利用しています。

　確認ボタンをクリックすると上記の例を以下に実行表示します。

　ここでは、まだスタイルシート（ CSS ）を利用していませんので、内容が羅列しているだけです。HTML テキストのみではこのようにテキストの内容が上から下に並ぶだけです。

　この HTML テキストにスタイルシート（ CSS ）を適用することでデザイン性を加えることができます。スタイルシート（ CSS ）によるページデザインはページデザインを参照してください。