1. Home
  2. HTMLタグ
  3. HTMLの基本
  4. HTML5の簡易メモ

HTML5の簡易メモ

このページの内容について

※HTML5リファレンスを立ち上げたので、このページは削除させていただく予定です。（2012年4月12日）

このページは、自分用のメモを兼ねて作成しています。HTML5に関して調べたことを、簡潔にまとめて掲載していきたいと考えています。

※HTML5で廃止予定となっている要素・属性についてはこちらでご覧いただけます。

このメモをご利用するにあたりましては、以下の点にご注意の上、ご利用いただきますようお願いいたします。

  • HTML5に関する全ての要素・属性を掲載している訳ではありません。
  • 私の勘違いや勉強不足により、誤った情報が掲載されている可能性があります。
  • HTML5はまだ正式には勧告されていません。今後、変更が加えられる可能性があります。

2011年2月3日 更新

HTML5で作成する際のポイント

HTML5で作成する際のポイントをまとめてみました。

DOCTYPE宣言

HTML5のDOCTYPE宣言は、以下のように記述します（文書の先頭に記述します）。この宣言を行うことで、ブラウザのレンダリングモードが標準モードになります。

<!DOCTYPE html>

言語コードの指定

文書全体の言語を示したい場合は、HTML 4.01の場合と同様に、html要素に対して以下の指定を行ないます（日本語の場合は「ja」）。

<html lang="ja">

文字コード宣言

HTML5の文字コード宣言は、meta要素で以下のように記述します（head要素内の先頭に記述します）。

※UTF-8を使用することが推奨されています。（UTF-8を指定する場合は、そのファイルをUTF-8で保存する必要があります）

<meta charset="UTF-8">

IEへの対応

IE8以下は、HTML5の新要素には対応していません（そのため、スタイルが適用されなくなってしまいます）。

Google Codeで公開されている「html5shiv」というスクリプトを読み込ませることで、IE8以下にもHTML5の新要素を認識させることが可能になります。

このスクリプトを読み込ませる場合は、head要素内に以下の内容を記述しておきます。（「if lt IE 9」という部分は、「IE9未満にのみ適用させる」という指定です）

※この指定を行なっている場合でも、JavaScriptをオフにしているIEには適用されません。

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

CSSの設定

HTML5の新要素のうち、ブロックボックスとしてレンダリングさせたい要素に対して「display: block」を指定しておきます。

article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}

HTML5の雛形

上記のポイントをまとめると、以下のようなコードになります。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">

<title>タイトル</title>

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

<style>
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}
</style>

</head>
<body>

<p>内容</p>

</body>
</html>

HTML5で追加された要素一覧

HTML5では、以下の要素が追加されました。

※関連する全ての情報を掲載している訳ではありません。

要素名 説明 メモ
セクション
section 汎用セクション 他のセクショニング・コンテンツ（article、aside、nav）では表せないセクションで使用する。見出しが含まれているのが自然。スタイリング・スクリプティング目的ならばsectionではなくdivを使用する。 
<section>
<h1>セクションの見出し</h1>
<p>セクションの内容</p>
</section>
article 記事セクション その範囲のみでも1つのコンテンツとして成立するようなセクションで使用する。見出しが含まれているのが自然。articleを入れ子にする場合は、子articleの内容は親articleの内容に関連している必要がある。 
<article>
<h1>記事の見出し</h1>
<p>記事の内容</p>
</article>
aside 補助セクション 前後のコンテンツに関連する補助的なセクションで使用する。asideの内容が無くなってもメインコンテンツに影響がない場合に使用する。補足情報、関連広告、関連リンク、等で利用できる。 
<article>
<h1>記事の見出し</h1>
<p>記事の内容</p>
<aside>
<p>記事に関連した補足情報</p>
</aside>
</article>
nav 主要ナビゲーション そのサイト・ページにとって「主要・重要」と思われるナビゲーションで使用する。グローバルナビゲーション、ページ内リンクのナビゲーション、パンくずリスト、ページャー、等が考えられる。関連リンクなどには適さない。 
<nav>
<ul>
<li>メニュー1</li><li>メニュー2</li><li>メニュー3</li>
</ul>
</nav>
header セクションのヘッダ 親セクションに対するヘッダを表す。親セクションがbodyならばページ全体のヘッダを表す（headとは異なる）。ページ内で何回でも使用できる。見出しが含まれているのが自然。ナビゲーション、前置き、検索ボックス、関連するロゴ、等も含められる。headerとfooterは含められない。アウトラインは生成しない。 
<article>
<header>
<h1>記事の見出し</h1>
<p>ヘッダの内容</p>
</header>
<p>記事の内容</p>
</article>
hgroup 見出しのグループ化 複数の見出し要素をグループ化して1つの見出しとして表す。h1-h6のみ含められる。そのグループの中で最も高いレベル（h1に近い要素）の内容が見出しテキストとして扱われる（また、そのレベルがhgroupの見出しレベルになる）。それ以外の内容は副題・キャッチフレーズとして扱われる。 
<hgroup>
<h1>見出し</h1>
<h2>キャッチフレーズ</h2>
</hgroup>
footer セクションのフッタ 親セクションに対するフッタを表す。親セクションがbodyならばページ全体のフッタを表す。ページ内で何回でも使用できる。セクションに関連する情報（著作者、著作権、連絡先、関連リンク、等）を含める。headerとfooterは含められない。アウトラインは生成しない。 
<footer>
<address>info@example.com</address>
</footer>
コンテンツのグループ化
figure 参照される内容 本文から参照される内容（挿絵、図表、コード、等）を表す。その内容は単独ユニットとして存在する（独立したアウトラインを持つ）。本文から離れた場所（別ページを含む）に切り離すことも可能。必要があればfigcaptionを含める。 
<p><a href="#sales">売り上げ推移</a></p>
<figure id="sales">
<figcaption>売り上げ推移</figcaption>
<img src="sales.gif" alt="推移のグラフ">
</figure>
figcaption 参照される内容のキャプション 「参照される内容」に対してキャプションを付けたい場合に使用する。figure内の最初か最後のどちらかにのみ入れられる。 
<p>... 具体的な使い方は、以下のサンプルコードを参考にしてください。</p>
<figure>
<pre><code>&lt;p&gt;段落&lt;/p&gt;</code></pre>
<figcaption>P要素の使用例</figcaption>
</figure>
テキストの意味
time 日付や時刻 正確な日付や時刻を表す。日付にはグレゴリオ暦を使用する。pubdate属性は親articleまたは（親articleが存在しなければ）ページの発行日時であることを表す。datetime属性で日時を示しておけば内容は日時でなくても構わない。datetime属性が無い場合は内容が日時でなければならない。（その他、細かいルールあり） 
<article>
<h1>記事の見出し</h1>
<p>記事の更新日を表した例です。</p>
<footer>
更新日： <time datetime="2011-01-26" pubdate>平成23年1月26日</time>
</footer>
</article>
mark 目立たせる 目立たせたいテキストに対して使用する。ユーザーが参照しやすいように目立たせる（「この部分ですよ！」と伝えることが目的）。その文章における意味的な強調（em）とは異なる。例えば検索結果画面における該当キーワードのハイライトなどに利用できる。 
<h1><mark>TAG index</mark> の検索結果</h1>
<p><mark>TAG index</mark>はHTMLとCSSのリファレンス ...</p>
wbr 改行位置の候補 極端に長い単語の改行位置の候補を指定する。「幅いっぱいになった場合はこの位置で折り返されてほしい」と考える部分に使用する。（※日本語の場合は使いどころがないかもしれません） 
<p>aaaaaaaaaa<wbr>bbbbbbbbbb<wbr>cccccccccc</p>
ruby ルビを振る ルビ（ふりがな）を付けたいテキストに対して使用する。以前のruby（独自拡張）とは異なりHTML5ではrbを使用しない。 
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>
rt ルビのテキスト ruby内において直前のテキストに対するルビテキストを表す。 
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>
rp ルビテキストを括弧で囲む ルビ未対応ブラウザ向けにルビテキストの前後に括弧を付ける。ルビに対応しているブラウザではrpの内容（括弧）は表示されない。 
<ruby>
漢<rp>（</rp><rt>かん</rt><rp>）</rp>
字<rp>（</rp><rt>じ</rt><rp>）</rp>
</ruby>
bdi テキストの隔離 双方向テキスト（書字方向が混在するテキスト）において隔離したいテキストを表す。（※詳細は未確認） 
-
コンテンツの埋め込み
embed プラグインコンテンツを埋め込む Flashなどのプラグインコンテンツを埋め込む。以前のembed（独自拡張）がHTML5で採用された。 
<embed src="example.swf">
canvas 動的なビットマップグラフィックス 動的に描画されるグラフやゲームなどをビットマップグラフィックス（ドットの集合体で表現される画像）で表す。スクリプトを使って動かす。（※詳細は未確認） 
-
video ビデオデータを再生する ビデオデータを再生する際に使用する。内容にsourceを含めることでタイプの異なるデータ群（再生候補）を提供できるようになる。（※詳細は未確認） 
-
audio オーディオデータを再生する オーディオデータを再生する際に使用する。内容にsourceを含めることでタイプの異なるデータ群（再生候補）を提供できるようになる。（※詳細は未確認） 
-
source ビデオ・オーディオデータを指定する videoまたはaudioの子として使用する。この要素を使いタイプの異なる複数のデータを指定しておくと、ユーザーの環境で利用可能なデータが再生されることになる。（※詳細は未確認） 
-
フォーム
keygen 鍵ペアを生成する 暗号化用の鍵ペア（公開鍵と秘密鍵）を生成する。（※詳細は未確認） 
-
output 出力結果を表す スクリプトによる計算結果などを表す。（※詳細は未確認） 
-
datalist コンボボックスを作成する input要素と関連付けることでコンボボックス（1行のテキスト入力欄と選択リストの組み合わせ）を作成できる。オートコンプリートのようなものを作成できる。（※詳細は未確認） 
-
progress 処理の進行状況を表す タスクがどの程度進行しているのかを表す。ダウンロードなど時間のかかる処理を実行する際に利用できる。（※詳細は未確認） 
-
meter 測定値を表す 特定の範囲内における数量や割合を表す。ディスクの使用量を表す際などに利用できる。（※詳細は未確認） 
-
インタラクティブ
details オンデマンドで追加情報を提供する オンデマンド（ユーザーのリクエストに応じて行われるもの）で提供される追加情報等を表す。内容にsummaryを含めることでその情報の要約等を表すことができる。ユーザーが「詳細を見る」を選択した際に表示される情報などに利用できる。注釈とは異なる。（※詳細は未確認） 
-
summary 追加情報の要約等を表す detailsの子として使用する。detailsによって表される「追加情報等」に対する要約、説明、キャプションを表す。（※詳細は未確認） 
-
command コマンドを表す ユーザーが実行できるコマンド（コンピュータに対する命令内容）を表す。menu要素内で使用することでそのコマンドがレンダリングされる。（※詳細は未確認） 
-

HTML5で変更された要素一覧

HTML5では、以下の要素が変更されました。

※関連する全ての情報を掲載している訳ではありません。

要素名 変更前（HTML 4.01） 変更後（HTML5）
hr 水平線を引く 段落レベルのテーマの区切りを表す。1つの記事の中で話題が変わるような場面で使用する。セクション間の区切りとしては使用しない。アウトラインには影響しない。 
<p>... ということで楽しい一日でした。</p>
<hr>
<p>さて、話題は変わりますが、明日は ...</p>
em 強調を表す 強調・強勢を表す。トーンを強めて言いたいような箇所で使用する。入れ子にすることで強調の度合いを高められる。重要性は表さない。 
<p><em>強調している中で<em>更に強調</em>しています！</em></p>
strong より強い強調を表す 強い重要性を表す。重要なお知らせ、警告、等に利用できる。入れ子にすることで重要性の度合いを高められる。 
<p><strong>立入禁止。<strong>雨の日は特に危険です。</strong></strong></p>
b 太字で表示する 他と区別したいテキストに対して使用する。本題に関連するキーワード、製品名、等を表す。他に適切な要素がない場合に使用する。重要性や強調は表さない。（※英語圏の印刷表現に基づいているらしいです） 
<h1>当サイトのご紹介</h1>
<p><b>TAG index</b>はHTMLとCSSのリファレンス ...</p>
i イタリック体で表示する 声やムードを表す。小説などにおける登場人物の心の声、等を表したり、技術用語、船の名前、外国語、等を表す箇所で使用する。強調は表さない。（※英語圏の印刷表現に基づいているらしいです） 
<p><i>ムードを表すってどういう意味や？</i>と彼は思った。</p>
s 取り消し線を引く 変更されたのでその内容はもう正確ではない、関連性がなくなった、ということを表す。間違っていたので訂正します、ということを表す場合はdelを使用する。 
<p><s>集合場所は秋ヶ瀬公園となります。</s></p>
<p>集合場所はさくら草公園に変更となりました。</p>
small 小さめの文字サイズで表示する 細目（さいもく：免責条項、著作権表記、ライセンス要件、等）を注釈として表す。インラインで使用する。ブロックまるごとは含められない。 
<footer>
<p><small>(c) 2011 TAG index.</small></p>
</footer>
a リンクを設定する 内容にブロックレベル要素も含められる。但しその内容に他のリンク等を含めてはならない。href属性の無いaはプレースホルダを表す。 
<a href="example.html">
<p>例えば段落全体を含められます。</p>
</a>

<nav>
<ul>
<li><a href="page1">ページ1</a></li>
<li><a>ページ2</a></li>
<li><a href="page3">ページ3</a></li>
</ul>
</nav>
address 連絡先を明記する 管理者の連絡先（名前、メールアドレス、住所、電話番号、フォームへのリンク、等）を表す。親セクションがbodyならばページ全体の連絡先を表す。親セクションがarticleならばその記事の連絡先を表す。連絡先以外の内容（更新日、著作権表記、等）は含めない。管理者以外の連絡先（営業所一覧、会員一覧、等）には使用しない。 
<address>
山田 太郎<br>
<a href="mailto:taro@example.com">taro@example.com</a>
</address>
cite 引用元を明示する 作品（書籍、楽曲、映画、他）のタイトルを表す。タイトル名のみに使用する。人名（作者名、発言者名、等）は含めない。 
<p><cite>TAG index</cite>では次のように説明されていました。 ...</p>
label フォーム部品とラベルを関連付ける ラベルをクリックした際の挙動はプラットフォーム側の基準に合わされる。 
<p><label for="name1">お名前：</label>
<input type="text" name="namae1" id="name1"></p>
menu メニュー型のリストを作成する ツールバーやコンテキストメニュー（右クリックで表示されるメニュー）を表す。（※詳細は未確認） 
-
head 文書のヘッダ object要素は含められない。 
-
script スクリプト 利用する言語がJavaScriptの場合はtype属性を省略できる。（type属性の初期値がtext/javascriptになったため） 
<script>
document.write("サンプルテキスト");
</script>
style スタイルシート 利用する言語がCSSの場合はtype属性を省略できる。（type属性の初期値がtext/cssになったため） 
<style>
h1 { color: #ff0000; }
</style>
サイト内検索

HTMLの基本

ページの先頭へ