各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
こんにちは。All About ホームページ作成ガイドの西村文宏です。
前回は、HTML5の具体的な書き方のうち、head要素に含める各種情報の書き方を簡単にご紹介いたしました。
今回は、HTML5で新しく追加された要素のうち、階層構造や区画を示すことのできる要素の中から、いくつかを抜粋してご紹介いたします。
以下に記した38行のHTML5ソースには、body要素内に、header、footer、nav、section、asideの各要素が書かれています。
これらは、HTML5で新しく追加された要素の一部です。
それぞれ、HTMLに構造上の意味を付加したり、区画を明示したりする役割を果たします。
<!DOCTYPE html>
<html lang=”ja”>
<head>
— (省略) —
</head>
<body>
<header>
<p>HTML5のサンプルをご紹介!</p>
<h1>HTML5サンプル</h1>
</header>
<nav>
<ul>
<li><a href=”/”>HOME</a></li>
<li><a href=”/sample/”>SAMPLE</a></li>
<li><a href=”/about/”>ABOUT</a></li>
</ul>
</nav>
<section>
<h2>HTML5のサンプルいろいろ</h2>
<p>サンプルをご紹介。</p>
: : :
</section>
<section>
<h2>HTML5+CSS3のサンプルいろいろ</h2>
<p>CSSを加えたサンプルをご紹介。</p>
: : :
</section>
<aside>
<h2>ブログロール</h2>
<p>最新のエントリはこちら</p>
: : :
</aside>
<footer>
<p>Copyright (C) 2013, HTML5 SAMPLE.</p>
</footer>
</body>
</html>
上記ソースに含まれる各要素について、簡単にご紹介いたします。
◆header要素(ヘッダ)
ヘッダを示す要素です。上記のサンプルソースでは「ページのヘッダ」として利用していますが、「セクションのヘッダ」としても使えます。また、後述のnav要素を使ったナビゲーションをここに含んでも構いません。従来のHTMLで、例えばdiv要素を使って <div> ~ </div> のように記述していたのとは違い、明確にヘッダであることが示せます。
◆nav要素(ナビゲーション)
ナビゲーションであることを示す要素です。
上記ではメインメニューを構成するようなul要素を含んでいますが、他にも「パンくずリスト」や特定コーナー内のローカルなナビゲーションを含んでも良いでしょう。
◆section要素(区画)
「コンテンツの区切り」を示す要素です。ページ内に複数の話題が含まれている際に、同一の話題の範囲を示す際に活用します。この要素内には、必ずh1要素やh2要素などの
「見出し」を含むようにします。もし、適当な見出しが書けないようなら、それはsection要素を使うのには適していない区切りだということです。
その場合は、div要素やhr要素など、その他の要素を使いましょう。
なお、先のサンプルではh2要素で見出しを作っていますが、見出しの階層はsection要素内で振り直すことも可能ですから、h1要素を使っても構いません。
◆aside要素(脇)
ここに含まれている内容が「メインコンテンツではない」ことを示す要素です。
補足情報や広告など、本編から分離しても問題のない内容を記述する際に使います。
◆footer要素(フッタ)
フッタを示す要素です。上記のサンプルでは「ページのフッタ」として利用していますが、「セクションのフッタ」としても使えます。
従来のHTMLで、div要素を使って例えば<div> ~ </div> のように記述していたのとは違い、明確にフッタであることが示せます。
上記にご紹介した要素の中で、「必ず使わなければならない」要素は1つもありません。すべて必要に応じて使えば良いものです。
しかし、うまく活用すると、分かりやすいHTMLソースにできますから、ぜひ使ってみてください。
次回は、HTML5で作られた様々なデザインのテンプレートをご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。
万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。