備忘録的プログラミングリファレンス

body タグ以下のページ内容構成エレメント

 body タグ以下のページ内容構成エレメント <header><nav><main><aside><footer> タグについての解説です。
 これらのタグは web ページとして表示される内容において、ヘッダー、ナビメニュー、コンテンツ、フッターを作成するためのタグエレメントです。

 <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> は1つのブロックとして表示するために利用しています。

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

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

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