HTMLセクションと範囲「h」ハッシュタグから「nav」：html step5

前回は、HTMLのheadに記載する内容につきまして、文字コードの記載方法などサンプルと共に記載いたしました。

head内に記載する内容は、実は記載する気になれば、まだまだ沢山ございますが、とりあえず必要最低限を記載してみました。また、HTMLに特化した記事ですので、あえてjavascript(ジャバスクリプト）などの事は記載いたしませんでしたが、個人的には、SEOやサイトの表示速度の事を考慮して、ファーストビューにあまりかかわらないjavascriptであれば、</body>（ボディの閉じタグ）直前に記載することが多くなっています。

現段階におきましては、まず、ページ内表現の動きなどはあまり気にせず、シンプルで無駄のないマークアップが出来るよう心掛けたいですね。何事も一歩ずつ確実に進むことをオススメします。

という事で、それでは今回はッ、

・SEOに重要な見出しタグ
・段落を表すpタグ
・記事全体の範囲を示すarticle
・セクションの範囲を示すsection
・本題から外れた内容aside
・ナビゲーションの範囲nav

上記について記載していこうと思います…。

SEOに重要な見出しタグ

h1～h6要素は、それが見出し（heading）であることを表します。1～6の数字は見出し階層を示していて、h1が1番上の階層の見出し、h6が6番目の階層の見出しというように6段階まで用意されています。

一般的なブラウザでは、特に何も指定しなくても階層が上の見出しほど大きく表示されますが、これはCSSを適用していない状態でも見出しのおおよその階層が分かるようにするためのものであり、HTMLの仕様でこのように表示することが決められているわけではありません。

見出しの大きさや具体的な表示方法は、最終的にCSSで指定しますので、表示される大きさによって使用する見出しを選ぶのではなく、必ず文章構造の実際の階層に合わせた見出しを使用することが適切です。

HTML5で導入されたセクション

HTML5におけるセクションは、書籍における「章」や「節」のようなものになります。
具体的に記載すると、先頭に見出しがあって、その見出しによる主題の及ぶ範囲にあるコンテンツ全体がセクションになります。

セクションと見出しは基本的にセットで使用されますが、セクションによっては見出しのないものもあります。

HTML5の7種類のカテゴリーのうち、「セクショニングコンテンツ」に該当する4つの要素（article要素・section要素・aside要素・nav要素）がセクションを表す要素になります。

Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SEOに重要な見出しタグ</title>
</head>
<body>
<h1>1番目の階層の見出し</h1>
<h2>2番目の階層の見出し</h2>
<h3>3番目の階層の見出し</h3>
<h4>4番目の階層の見出し</h4>
<h5>5番目の階層の見出し</h5>
<h6>6番目の階層の見出し</h6>
</body>
</html>

段落を表すpタグ

p要素は、その範囲がひとつの段落（paragraph/パラグラフ）であることを表します。
一般的なブラウザでは、この要素の前後に1行分のスペースが取られて表示されます。
それでは↓私の大好きなExcel VBAの神様よりサンプルソースコード。

Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>段落を表すpタグ</title>
</head>
<body>
<h1>1番目の階層の見出し</h1>
<p>
翌日、ボクは水岡遥香を背後に感じながら仕事をしていた。といっても、彼女はボクに用事があったわけではない。ボクの後ろにある資料棚で探し物をしていたのだ。
</p>
<p>
ボクは、とっさに「いたずら」を思いつき、すぐさま実行に移した。VBEを開き、簡単なマクロを作って、それを「フォームコントロール」のボタンに登録した。
</p>
</body>
</html>

記事全体の範囲を示すarticle

article要素は、本や新聞の記事のような、その範囲内に内容の全体が入っているセクションを表します。
これに対して、全体の一部分となっているセクションを表す場合は、section要素を使用します。

Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>段落を表すpタグ</title>
</head>
<body>
<article>
<h1>記事全体の範囲を示すarticle</h1>
<p>
翌日、ボクは水岡遥香を背後に感じながら仕事をしていた。といっても、彼女はボクに用事があったわけではない。ボクの後ろにある資料棚で探し物をしていたのだ。
</p>
</article>
</body>
</html>

セクションの範囲を示すsection

section要素は、全体の一部分となっているセクションを表します。これに対して、内容全体を含むセクションには上記で説明したarticle要素を使用します。

HTML5ではセクションを表す要素が全部で4種類ありますが、用途の限定されている他の3種類に該当しないセクションに対しては、このsection要素を使用します。

Sample

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セクションの範囲を示す</title>
</head>
<body>
<article>
<h1>セクションの範囲を示すsection</h1>
<p>
翌日、ボクは水岡遥香を背後に感じながら仕事をしていた。といっても、彼女はボクに用事があったわけではない。ボクの後ろにある資料棚で探し物をしていたのだ。
</p>

<h2>真二、メッセージを表示して感動する</h2>
<p>翌日、会社でボクがプリンターから用紙を取り出すと、・・・</p>

</section>

</article>
</body>
</html>

本題から外れた内容aside

aside要素は、親となっているセクションとは、あまり関係のない内容のセクションを表します。

たとえば、広告・参考情報・補足情報・記事の横にある各種リンクetcなどに対して使用します。

Sample

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本題から外れた内容</title>
</head>
<body>
<article>
<h1>本題から外れた内容aside</h1>
<p>
翌日、ボクは水岡遥香を背後に感じながら仕事をしていた。といっても、彼女はボクに用事があったわけではない。ボクの後ろにある資料棚で探し物をしていたのだ。
</p>
<section>
<h2>真二、メッセージを表示して感動する</h2>
<p>翌日、会社でボクがプリンターから用紙を取り出すと、・・・</p>

</section>
</article>
</body>
</html>

ナビゲーションの範囲nav

nav要素は、主要なナビゲーションのセクションを表します。一般的に、ホームページの中にはリンクのグループのようになっている部分が数か所ありますが、それらすべてに使用するのではなく、あくまで主要なグローバルナビゲーションなどに対してのみ、使用することが好ましいもように思います。

Sample<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーションの範囲</title>
</head>
<body>
<h1>ナビゲーションの範囲nav</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">MK-Blog</a></li>
</ul>
</nav>
・・・
</body>
</html>

という事で今回は、h要素・p要素・article要素・section要素・aside要素・nav要素について記載してみました。

XHTMLと比べてみますと、HTML5ではこのようにタグ要素の意味合いが格段に増えていることが見て取れます。
XHTMLでのマークアップになれてしまっている、私のようなコーダーに取りましては、多少大変に感じるものの、これもまた慣れで初めのうちであれば、HTML5のタグ一覧を見ながらでも、適切にマークアップをおこなう習慣を身につけますと、次第に何も考えずにHTML5のマークアップも適切に出来るようになる事と思います。

初心者の方であれば、タグの内容などが分からないことも多々あるかとございますが、分からないうちはタグ一覧などを参考にして、分かる所からマークアップをおこなうよう、とにかく手を動かすことが重要なように思います。

いずれ慣れてしまえば、なにも難しく感じることはなくなる事と思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。