ホームページ制作/WEB制作 福岡 | 株式会社アスパラガス

ASP BLOG | アスパラブログ

アスパラガスな人が書いてるブログ

サイトリニューアルにあたって、HTML5でマークアップしてみて（備忘録的）

ソースを見られてる方はお気付きでしょうが、今回の弊社サイトリニューアルに伴い、何かと話題なHTML5でサイトをマークアップしてみました。HTML5というと、<audio>要素・<video>要素・<canvas>要素なんかが注目されていますが、とりあえず今回はそんな要素は使わずにマークアップしています（単に今は弊社サイトに必要性がないので…）。
ここでは、実際にマークアップするにあたって、考えたことなんかを書いていこうと思います。

「HTML4.01」「XHTML1.0」とは違う、DOCTYPE宣言と<head>内の要素

以下に今までのDOCTYPE宣言との違いを書いてみます。


<!-- HTML4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
… 略 …

<!-- XHTML1.0 -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>タイトル</title>
… 略 …

<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="utf-8">
<title>タイトル</title>
… 略 …

はい、見ての通り単純明快です。
今まではDOCTYPE・スタイルシート・Javascriptなんかの宣言文なんて、コピペぐらいでしか記述したことなかったんですが、HTML5になってここまで簡単になると、コピペするまでもなく記述できますね＾＾

HTML5で出てきた新要素について

これまでは、何でも<div>で括られてきましたが、
HTML5からは、より意味のある括りとして以下のような要素が追加されました。
いくつかの要素を、以前のやり方と比較しながら以下に説明していきます。

<header>要素

ヘッダーとしての括りで、グローバルナビゲーションなどが入ります。

<!-- HTML4.01 or XHTML1.0 -->
<div id="header">
ヘッダーの中身
</div>

<!-- HTML5 -->
<header>
ヘッダーの中身
</header>

<footer>要素

フッターとしての括りで、関連リンクや著作権などの情報が入ります。

<!-- HTML4.01 or XHTML1.0 -->
<div id="footer">
フッターの中身
</div>

<!-- HTML5 -->
<footer>
フッターの中身
</footer>

<nav>要素

ナビゲーションとして使用し、サイト内の他のページなどへのリンクを入れます。

<!-- HTML4.01 or XHTML1.0 -->
<div id="header">
	<div id="navigation">
 	<ul>
	<li>リンク1</li>
	<li>リンク2</li>
	<li>リンク3</li>
 	</ul>
 </div>
</div>

<!-- HTML5 -->
<header>
	<nav>
 	<ul>
	<li>リンク1</li>
	<li>リンク2</li>
	<li>リンク3</li>
 	</ul>
 </nav>
</header>

<article>要素

いわゆるブログの記事部分やコンテンツの内容部分などが入ります。
<article>を入れ子にした場合、内側の<article>は外側の<article>に関係していることになります。

<!-- HTML4.01 or XHTML1.0 -->
<div id="entry">
<h1>記事の見出し</h1>
<p>見出しの内容</p>
	<div id="entry_body">
 <h2>記事の小見出し</h2>
 <p>小見出しの内容</p>
 </div>
</div>

<!-- HTML5 -->
<article>
<h1>記事の見出し</h1>
<p>見出しの内容</p>
	<article>
	<h1>記事の小見出し</h1>
 	<p>小見出しの内容</p>
 	</article>
</article>

上記内容で、お気付きの方もいらっしゃると思いますが、<h1>が複数出てきています。
html5において、<article>、<section>、<aside>、<nav>要素などのセクショニング・コンテンツごとでは、<h1>は複数使うことができます。（これまでのHTML4.01やXHTML1.0でも<h1>の複数使用はできるのですが、「1ページ＝1テーマ」がSEOに有利であることを考えるところから「<h1>要素は1ページに1個」が主流となっていました。）
上記HTML5内の入れ子部分の<h1>は、親要素の中に含まれるので、ここで出てくる<h1>は実質<h2>と同じ意味合いがあります。

かならず<h1>を各セクションの見出しとして使わないといけないわけではありません。
もちろん、階層に合わせて<h2>、<h3>なども使うことが可能です。

<section>要素

<section>は汎用的なセクションとして扱います。
<header>、<footer>、<article>、<aside>、<nav>などの各要素に当てはまらず、かつ「見出し」を付けることができるコンテンツなどに使います。

<!-- HTML4.01 or XHTML1.0 -->
<div id="entry">
<h1>記事の見出し</h1>
<p>見出しの内容</p>
</div>

<!-- HTML5 -->
<section>
<h1>セクションの見出し</h1>
<p>見出しの内容</p>
</section>

<aside>要素

メインのコンテンツの補足情報や余談の情報を入れるセクションとして扱います。

<!-- HTML4.01 or XHTML1.0 -->
<div id="entry">
<h1>記事の見出し</h1>
<p>見出しの内容</p>

<div id="hosoku">
<h2>最新記事一覧</h2>
<ul>
	<li>記事タイトル</li>
	<li>記事タイトル</li>
	<li>記事タイトル</li>
</ul>
</div>
</div>

<!-- HTML5 -->
<article>
<h1>記事の見出し</h1>
<p>見出しの内容</p>
</article>

<aside>
<h1>最新記事一覧</h1>
<ul>
	<li>記事タイトル</li>
	<li>記事タイトル</li>
	<li>記事タイトル</li>
</ul>
</aside>

<hgroup>要素

当該セクションの見出しをグループ化してまとめるために扱い、<hgroup>要素全体で一つの見出しと見なされます。
小見出しなどが複数の階層にある場合、<h1>～<h6>の見出しをセットで使用します。
<hgroup>要素の見出しランクは、<hgroup>の中にある<h1>～<h6>の中で最もランクの高い要素と同じランクとなります。

<!-- HTML4.01 or XHTML1.0 -->
<div>
<h1>記事の見出し</h1>
<h2>記事の小見出し</h2>
<h2>記事の小見出し</h2>
<h2>記事の小見出し</h2>
</div>

<!-- HTML5 -->
<hgroup>
<h1>記事の見出し</h1>
<h2>記事の小見出し</h2>
<h2>記事の小見出し</h2>
<h2>記事の小見出し</h2>
</hgroup>

<figure>要素、<figcaption>要素

文書の本文から参照されるような挿絵、図表、写真、コードなどに<figure>要素を使用し、注釈を付けるために<figcaption>要素が使われます。

<!-- HTML4.01 or XHTML1.0 -->
<div>
<img src="../images/neko.gif" alt="猫の写真">
<p>猫の写真の説明文</p>
</div>

<!-- HTML5 -->
<figure>
<img src="../images/neko.gif" alt="猫の写真">
<figcaption>猫の写真の説明文</figcaption>
</figure>

最後に…

自分なりに思うこととして、これまでのHTML4.01やXHTML1.0でも、W3Cに準拠したマークアップをすれば、きっちりした文書構造を築けていました。HTML5になって各セクション要素を用いて、より分かりやすく文章の構造分けや意味付けができるようになったのではないかと思います。

ゆくゆくは、この文章構造の意味付けが、今後のSEOへと繋がっていくかもしれません。
しかしながら、正しいマークアップが出来ていたとしても、結局はコンテンツの中身が最重要だと思っています。

ですので、「正しいマークアップ＆他にはない魅力的なコンテンツ」の図式が成立したとき、
最強のSEOへの足がかりとなるでしょう(・∀・)

HTML5で出てくる新しい要素をざっと上記で備忘録がてら説明してみましたが、若輩者故、間違っている部分もあると思いますので、ご指摘等あれば、お気軽にコメントいただければと思います。

Leave Your Comments

  • ※メールアドレスの入力が必須ですが、公開はされません。
  • ※承認制のため、即時には反映されません。

Trackback URL