HTML5の基本と追加タグ


HTML5基本

このページでは、HTML5の基礎部分のサンプルを紹介します。

HTML5のDOCTYPE宣言

これだけでHTML5準拠のページとみなされます。
記述がこんなに簡単なのは、覚えやすさのためと、どのブラウザでも標準モードでレンダリングすることを示す目的があるからです。

HTML5の文字エンコーディング宣言

HTML5の文字エンコーディングはUTF-8推奨です。

HTML5の骨組みサンプル

HTML5を書くときは、この骨組みを適宜変更していく形になると思います。

HTML5タグ

HTML5で変更になった要素を紹介します。

HTML5の追加要素一覧

要素名 説明
section 一般的なセクション。節や章を表す。
article ブログ投稿やニュース記事など、1つのコンテンツを表す。ウィジェットやガジェットのような領域にも利用される。
aside 関連が薄いコンテンツを表す。補足記事、サイドバー、広告、ブルー・クォートなど。
hrgroup 見出しが複数のレベルを持つとき、h1 ~ h6 要素のセットをグループ化するために使う。
header セクションやページのヘッダーを表す。
footer セクションやページのフッターを表す。
nav ナビゲーションを表す。ヘッダーや左サイドバーに掲載されるようなグローバルナビゲーションなどに使う。
サイトマップはメインコンテンツと言えるものなので、nav要素には適さない。
figure キャプション付き図画を表す。キャプションはfigcaption要素でコンテンツの前後に付けるが、必須ではない。
figcaption figure要素の子要素として使用し、コンテンツのキャプションを表す。
video ビデオをウェブページに組み込む。
audio オーディオをウェブページに組み込む。
source video要素やaudio要素の子要素として使用し、親要素のメディアファイルを指定するのに使用する。
embed プラグインなどの組み込みに使用する。以前からあったが、HTML5で仕様化。
mark テキストのハイライトに使用する。
progress タスクの進捗を表す。プログレスバーに使用する。
meter 限定された範囲における値を表す。progressは割合を表示するが、こちらは具体的な範囲内の値を表示する。
time 新暦のグレゴリオ暦の正確な日付を表す。
ruby ルビを伴ったテキストを表す。
rt ruby要素の子要素として使用し、ルビテキストを表す。
rp ruby要素に対応していないブラウザに対して、ルビに括弧を付けるために使う。
ruby要素をサポートしているブラウザでは無視される。
canvas Javascriptで図を描画できる。
command ユーザが呼び出すことのできる命令を表す。
WISYWIGのようなアプリケーションを想定しているが、対応ブラウザはまだない。
details ユーザに追加の詳細情報を見せるディスクロージャー・ウィジットを表す。
summary detailsタグの子要素として使用し、ウィジットの要約・キャプションなどを表す。
datalist テキストフィールドのサジェストの選択肢をグルーピングするために使用する。
keygen フォームをサブミットする際に、鍵を生成するコントロール。
output フォームの計算結果を表示する。
広告
  • LINEで送る