閉じる
HTML
  • 2011.09.22 (Thu)

HTML5に移行する前に知っておくべき基本マークアップについてまとめ

HTML5仕様のwebサイトが本格的に普及し始め、しばらくたちますが、まだまだ仕様の変更の可能性があるなど仕様策定中のHTML5。
ここで基本に立ち返る意味でもHTML5について勉強してきた事を備忘録的に毎回テーマごとにまとめていきたいと思います。

今回のテーマはHTML5のマークアップについて…

HTML5のマークアップについて|目次

1.HTML5って何?

簡単にまとめると、従来今まで使われていたHTML4.01やXHTML1.0などは文書を書くための仕様でした。
そこに、AjaxやjQueryやgoogle APIなどなど、よりリッチなアプリケーションをブラウザで構築できる技術が発達するようになってくると文書を書くだけの仕様では足りなくなり、新たにwebアプリケーションのプラットフォームとなる仕様としてHTML5が策定されました。

対応ブラウザは一般的なモダンブラウザ(Firefox・Chrome・Safari・Opera)ではすでにHTML5の機能を全てではないですが実装しています。IEの新バージョンIE9では多くの機能が実装されています。
古いIE6,7,8では決して使えないわけではありません。
IEに対応させるためのJavaScriptのライブラリを使用したり、CSSにIE用に記述することで、可能になります。

また、スマートフォン(iPhone/Android)ではブラウザはHTML5対応のWebkitベースのブラウザに限定されているので、上記のPCのようにブラウザ仕様に関して考える必要性は薄いでしょう。

目次へ戻る

2.HTML5の基本コード

HTML5のマークアップはHTML4.01に比べ非常に簡単になりました。
簡単と言うよりもむしろ無駄なものが削ぎ落とされた感じです。

以下はHTML4.01とHTML5の記述の違いです。

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01のコード</title>
</head>
<body>

<p>これはHTML 4.01でのマークアップです</p>

</body>
</html>

HTML5

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML 5のコード</title>
</head>
<body>

<p>これはHTML 5でのマークアップです</p>

</body>
</html>

見て分かるようにDOCTYPEの宣言やmataでの文字コードの指定が非常にシンプルになっています。

また、HTML5はXHTMLで記述することも可能です。この場合は厳格な文法での記述が要求されます。

XHTML5は以下のようなコードになります。

XHTML5

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang"ja" lang="ja">
<head>
<meta charset="UTF-8">
<title>XHTML 5のコード</title>
</head>
<body>

<p>これはXHTML 5でのマークアップです</p>

</body>
</html>

XHTML5については@IT 第3回 HTML5の登場で、XHTMLは結局どうなったの?が参考になります。

目次へ戻る

3.HTML5で追加された要素

HTML5ではセマンティックにマークアップするために以下の要素が追加されました。

ここでHTML5ではよく『セマンティック』という言葉が使われていますが、『セマンティック』とはコンテンツに意味を持たせるという事です。

HTML5追加要素と記述例

レイアウト・セクショニング要素

header  ・・・・ヘッダーを表します。
footer  ・・・・フッターを表します。
section  ・・・・表題・汎用的なセクションを表します。
article  ・・・・本文・独立した情報のセクションを表します。
nav  ・・・・主要のナビゲーションを定義できます。

これまでヘッダーやフッターなどはdiv要素で代用してきましたが、HTML5ではそれぞれコンテンツを表す要素が用意されています。

ヘッダーのこれまでの記述

<div id="header">
  <!-- ヘッダーの内容-->
</div>

HTML5でのヘッダー記述

<header>
  <!-- ヘッダーの内容-->
</header>

セクショニング要素の、section・article(他、aside・nav)とh1~h6の見出し要素を組み合わせ、文書の構造を表すことができます。この入れ子の構造をアウトラインといいます。

記述例

<section>
  <h1>タイトル</h1>
    <article>
        <h2>タイトル◯◯◯</h2>
        <section>
          <h3>◯◯◯について</h3>
          <p>テキストテキストテキスト</p>
        </section>
    </article>
    <article>
         <h2>タイトル□□□</h2>
        <section>
          <h3>□□□について</h3>
          <p>テキストテキストテキスト</p>
        </section>   
         <section>
          <h3>■■■について</h3>
          <p>テキストテキストテキスト</p>
        </section>     
    </article>
</section>

分りやすくアウトラインを図にすると…

ブロック・セマンティック要素

aside  ・・・・注釈など文章の補足やtipsなどの情報として使用します。
figure  ・・・・文章内のグループを明確にする。figureタグで挟まれたテキストや画像は同じ情報・意味を持ちます。
dialog  ・・・・複数の人の発言が会話形式で記述されていることを明確にさせる。

asideの使い方・記述

<aside>
<h4>ヒントです!!</h4>
<p>テキストテキストテキストテキスト</p>
</aside>

figureの使い方・記述

<figure>
<img src="hoge.jpg" alt="hoge" >
<legend>画像の説明、関連する情報などのテキスト</legend>
</figure>

dialogの使い方・記述

<dialog>
<dt>Aさん</dt>
<dd>Aさんのコメント</dd>
<dt>Bさん</dt>
<dd>Bさんのコメント</dd>
</dialog>

埋め込み要素

video
audio
いずれもimgタグ同様にコンテンツへ貼り付ける事が可能になります。

記述方法:audio

<audio src="sound.mp3" controls autobuffer></audio> 

<!--タグの間にメッセージを書くことも出来ます。 -->
<audio src="sound.mp3" controls autobuffer>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

以上、基本的な要素を上げてみましたが、h1~h6の見出し要素をまとめるhgroupなど、追加された要素はまだまだあります。

その他タグや要素の説明など、HTML5リファレンスが参考になります。

目次へ戻る

4.HTML5をIEに対応させる

HTML5の新要素はIE8以下では使用も出来ませんし、要素に対してCSSを適用させる事もできません。
そこで、以下のようにJavaScriptでDOMを生成する必要があります。

JavaScriptでDOMを生成

<head>内に以下を記述します。

<!--[if IE]>
<script type="text/javascript">
    document.createElement( 'header' );
    document.createElement( 'section' );
    document.createElement( 'nav' );
    document.createElement( 'aside' );
    document.createElement( 'footer' );
    document.createElement( 'article' );
    document.createElement( 'time' );
</script>
<![endif]-->

または下記のように簡単にまとめる事もできます。

<!--[if IE]>
<script type="text/javascript">
var elements=['header', 'section', 'nav', 'aside', 'footer'];
for ( var i=0; i<elements.length; i++){
   document.createElement(elements[i]);
}
</script>
<![endif]-->

上記は必要な要素を追加してあげる手法になるわけですが、その他に新要素すべてに対して処理を行えるライブラリを使用する方法もあります。

html5.jsを使用する

以下Googleのライブラリよりダウンロード出来ます。
html5.js

設置方法はダウンロードしたファイルを任意のフォルダにアップロードし、<head>内に以下を記述します。

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->

または直接ライブラリから読み込む事も可能です。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

目次へ戻る

今後の仕様変更など考慮し、あまり細かくその他新規要素など書ききれなかったのですが、以上HTML5マークアップについての基本編まとめでした。