トップページ | HTML5編・目次

●HTML5要素、タグ一覧表

更新日:
公開日:

■HTML5全要素、タグ一覧表

 編集時点でのHTML5で使える全要素の一覧表です。要素名はタグ形式で表しましたが、空要素を除き、開始タグと共に終了タグがあります。赤い色のタグで示した要素はHTML5で従来のHTMLの構造を改善するために新しく追加された要素、青色はHTML5で意味の変更のある要素です。簡素ですが備考欄に各要素についてのコメントが添えてあります。参考にしてください。

 HTML5は2014年10月28日付けで正式にW3Cから勧告され、さらに2016年 11月1日付けでHTML5.1が勧告されました。現在、HTML5.2がドラフト(草案 )段階にあります。従って、これからも要素が追加されたり、削除されたり、意味が変わったりする可能性はあるでしょう。あらかじめ、ご了承ください。

Tag 備考
文書型定義
<!doctype> DOCTYPE宣言。なお、タグは小文字表記にしていますが実際に配置するときは半角大文字にする必要があります。
例)
<!DOCTYPE html>
 骨格を成すもので必須の要素
<html> HTMLドキュメントの定義。最上位の要素であるルート要素を表します。
<head> ドキュメントに関する情報の定義。メタデータの集まりを表します。
<body> body要素の定義。ドキュメントの内容を表します。
メタ情報 (head要素内に配置するもの)
<title> ドキュメント・タイトルの定義。ドキュメントのタイトルを表します。
<meta> メタ情報の定義。ドキュメントのメタデータを表します。
<link> 参照、資料収集の定義。ドキュメントを他のリソースとリンクで関連付けます。
<base> 基準となるURLの定義。他のリソースに対するパスの基準となる絶対URLを指定します。
<style> スタイルの定義。スタイル情報を記述してCSSのスタイルシートを組み込みます。
ドキュメントの構造を成す要素
<address> 連絡先情報の定義
<blockquote> 長い引用文の定義。blockquote要素は、その要素内容が引用されたものであることを示す要素です。
<div> ドキュメントの中のセクション(区分)の定義。div要素そのものには特別な意味はありませんが、<div>〜</div>で囲まれた範囲を一つのグループとしてまとめることができます。
<footer> ドキュメントまたはセクションのためのフッター領域の定義
<h1> 〜 <h6> 見出し1から見出し6の定義
<header> ドキュメントまたはセクションのためのヘッダー領域の定義
<hr> 段落のテーマの区切りの定義。例えば、同じセクション内で話題を変えたい場合に使えます。
<main> ドキュメント全体におけるメインコンテンツの定義
<p> 段落の定義
<pre> 整形済みテキストの定義
<span> この要素自体は特別な意味を持ちませんが、グローバル属性と併用することでドキュメントの特定の範囲だけに目的に応じた設定を行うことが可能な要素です。例えば、この要素にclass属性を使い、特定の範囲だけにスタイルを適用させることも可能です。
セクション要素
<article> 記事セクションの定義。雑誌や新聞でいうところの記事のようなものでブログ記事のようにそれ自体が一つの記事として完結しているのがarticle要素に該当します。
<aside> メインコンテンツ外のセクションの定義。aside要素は補足や脚注、用語の説明など、本筋とは別に触れておきたい、あるいは分離しておきたいセクションを表します。
<nav> ナビゲーションリンクの定義。nav要素は、ドキュメント内の主要なナビゲーションのセクションを表します。
<section>  セクションの定義。一般的なドキュメントのセクションを表します。一般に、その内部に見出し(h1〜h6)が含まれます。ただし、<article>、<nav>、<aside>といった要素および、レイアウトのための要素のグループ化におけるセクションはそれらの要素で定義してください。
画像・動画・音声関連
<area> イメージマップ領域の定義。area要素は、クライアントサイドクリッカブルマップ(map要素のこと)の領域を指定する要素です。
<audio> サウンドコンテンツの定義。プラグインを必要とせず、ブラウザの基本機能のみで音声の再生を可能にします。audio要素の要素内容はaudio要素に対応していない環境への代替コンテンツになります。
<canvas> スクリプトによる画像や動的グラフィックスを表示させるための定義。JavaScriptによって描写が行われるため、JavaScriptが無効の場合は使用できませんが、canvas要素の要素内容はcanvas要素に対応していない環境への代替コンテンツになります。
<embed> プラグインを使った埋め込みの定義。embed要素は、プラグインが必要となる音声や動画などのデータを埋め込むための要素です。この要素は空要素であるため、利用可能なプラグ イン がなかった場合の代替コンテンツは指定できない点にご注意ください。
<img> 画像の埋め込みの定義
<map> クライアントサイド・イメージマップの定義。map要素 は、イメージマップを定義するための要素です。img要素とarea要素をあわせて使用します。
<object> 埋め込みオブジェクトの定義。object要素は、画像や別ドキュメント、プラグインを使用するデータといった外部リソースをHTMLドキュメントに埋め込むために使用します。埋め込む外部リソースは、data属性の値として指定します。
<param> オブジェクトからのパラメータの定義。param要素は、object要素によって埋め込まれる外部リソースが利用するパラメーターを与える要素です。オブジェクトが実行される時に必要となる値を指定します。
<source> 選択可能なファイルの複数指定の定義。通常、video要素やaudio要素を使用して再生させられるデータは1つしか指定できません。source要素は、video要素やaudio要素、picture要素といったように複数のデータを指定することが可能です。このように複数のファイルを用意することで閲覧者の環境に合わせて適切と思われるファイルを提供することが可能になります。
<track> track要素は、動画や音声データに同期して再生させる外部のテキスト・トラック(字幕)を指定するための要素です。
<video> 動画ファイルの埋め込みの定義。動画データを再生させるための要素です。video要素の要素内容はvideo要素に対応していない環境への代替コンテンツになります。
テキスト関連
<a> リンク設定の定義
<abbr> 略語の定義。abbr要素は、その要素内容が略称や頭字語であることを示す要素です。
<b> b要素はその部分が特別である、目立たせたいときに使われる要素です。例えば、ドキュメント内のキーワードや製品名など、他と区別したいテキストが該当するでしょう。ただし、その部分が強調や重要性、引用、用語の定義といった意味合いは含まれません。一般的なブラウザでは太字で表示されます。
<bdi> 隔離されたテキストの定義。テキストの一部に書字表記 の方向が逆のテキストを挿入すると、テキストの語順が 変わってしまうことがあります。これは、Unicodeの双方向アルゴリズムによるものなのですが、bdi要素はその双方向アルゴリズムの範囲を指定することによって双方向アルゴリズムの影響を受けなくなるようにします。例えば、日本語の文章に書字方向の違うアラビア語を混在させるときにこの要素を使って、双方向テキスト書式制御から隔離させ、書字方向の誤判断を防ぐことが可能になります。
<bdo> 文字表示の方向の定義。bdo要素は、要素内容の「左から右」または「右から左」といった文字表記の方向を設定できる要素です。dir属性の指定、必須。
<br> 強制改行の定義
<cite> 作品のタイトルの定義。以前は引用、出典先、参照元を表す要素でしたが、HTML5では意味が変わり、書籍、詩、楽譜、楽曲、脚本、映画、演劇など、その作品のタイトルを示すために使われるようになりました。
<code> コンピューター言語のコードの定義
<data> data要素は要素内容がコンピューターが可読可能なさまざまなデータ形式を表す要素です。使える属性はvalueで必須です。
例)
一等賞金は<data value="3">三</data>億円です。

当然ながらコンピューターが読み取り可能なデータ形式でなければなりませんが、マイクロフォーマットやマイクロデータ等のデータ形式も使えます。
 なお、データが日付や時間に関するものである場合は、専用要素であるtime要素を使いましょう。
<del> 後から削除されたテキストの定義。属性は、cite="削除された場合の根拠となるリソースのURI"、datetime="削除された日時"の属性が使えます。グローバル属性が使えるのは他の要素と同じです。
<dfn> dfn要素は、その要素内容がドキュメント内で定義される定義語であることを示す要素です。この要素で囲まれた部分は他のテキストよりも強調されます。一般的なブラウザでは、イタリック体(斜体)で表示されます。
<em> em要素は意味的な強調を表し、文章内の特定のテキスト部分を強調させたいときに使われる要素です。ただし、strong要素のように「重要」の意味合いは含まれません。一般的なブラウザではイタリック体(斜体)で表示されます。
<i> 他とは質や状態が異なるテキストの定義。HTML4.01 のときのように単にイタリック体(斜体)にして強調させるような枠割はなく、例えば、英語の文章の中に含まれるフランス語の部分に適用させるといった具合に、他とは状態が異なる、あるいは質が異なる場合に使われます。心に思ったことや声、気分などもこれに含まれるでしょう。ただし、定義語におけるdfn要素など、他の要素の使用がふさわしい場合はそちらを優先させましょう。一般的なブラウザでは、イタリック体(斜体)で表示されます。
<ins> 後から挿入、または追加されたテキストの定義。どのように表示されるかはブラウザにより異なりますが属性は、cite="追加された場合の根拠となるリソースのURI"、datetime="追加された日時"の属性が使えます。グローバル属性が使えるのは他の要素と同じです。
<kbd> ユーザーによるキーボード操作入力の定義。要素内容にキーボード上の文字列を指定します。samp要素の中にkbd要素を入れるとメニューリストの呼び出しなど、コンピューターによって、出力されるものの文字列を指定することもできます。ただし、kbd要素自身はプログラムを動作させるわけではなく、テキスト上に入力情報を付加する目的のために使われます。なお、一般的にはキーボードから入力する内容を示しますが、音声など他の入力の場合でも使用可能です。
<mark> テキストのハイライトの定義。例えば、関連性のある文章の中で特定のテキスト部分をハイライトさせたいときに使います。ただし、重要度といって意味は持ちません。一般的なブラウザでは背景が黄色くハイライトされた状態で表示されます。
<q> 語句単位の引用の定義。q要素は、その要素内容が他から語句単位で引用されたものであることを示す要素です。なお、段落単位での引用を表すにはblockquote要素を使います。
<s> 無効なテキストの定義。strike要素と共にHTML4.01では非推奨でしたがHTML5で一度廃止され、さらに意味が修正されて復活した異色の要素です。この要素は、以前は正しかったがもう正確ではない、あるいは、もう関係がなくなった場合に使われます。一般的なブラウザでは、取り消し線が引かれたテキストとして表示されます。なお、テキストが削除されたことを表したい場合はdel要素を使いましょう。
<samp> コンピューター・コード出力の定義。samp要素は、その部分がコンピューターやプログラムによって、出力された部分であることを表します。
<small> 小さなテキストの定義。細目や注釈のテキストを表すときに使われます。例えば、フッタ領域にある免責事項や著作権表示といったテキストを小さくしたい場合に使います。この要素を使用すると一般的なブラウザでは小さいフォントサイズで表示されます。
<strong> strong要素は文章内の特定のテキスト部分が「 重要」「 深刻」「 緊急」のいずれ かであることを強く示すために使われる要素です。この要素はem要素より強調されます。
<sub> 下付き文字テキストの定義。通常は水の化学式であるH2Oのようにこの要素を使わなければ意味が通じない場合に限り使います。
<sup> 上付き文字テキストの定義。通常は数式や化学式などの上付き文字のように、この要素を使わなければ意味が通じない場合に限り使います。
<time> 日付や時刻、経過時間の定義。24時間表記での時刻、および、グレゴリオ暦、および、オプションによる時刻、タイムゾーン・オフセット(協定世界時からの時差)の追加による正確な日付と時刻を示す要素ですが、可視性が主な目的ではなく、コンピューターの可読性のために使われます。使える属性は、datetime属性でdatetime="日時"というように使いますがグローバル属性も使えます。また、要素内容がコンピューターに可読可能な形式であればdatetime属性を省略することも可能です。なお、省略した場合はどの要素(子孫要素)も含めることはできません。

 datetime属性による指定は、日・週・月・年といった「日付」、または「時刻」、または「日付と時刻」のいずれかの方法で指定します。また、タイムゾーン・オフセットを加えることもできます。

一般的な例)
<p>更新日:<time datetime="2017-04-01">2017年4月1日</time></p>

時刻とタイムゾーンを付加した例)
<p>このサンプルは日本時間の<time datetime="2012-04-01T15:00:00+09:00">2012年4月1日15時00分00秒</time>を表しています</p>

 これは2012年4月1日15時00分00秒を表します。日付と時刻の区切りである「T」と各数字の桁数は固定です。「+09:00」は日本のタイムゾーンを表しています。

 この要素はいろんな表記や使い方があるのでこの要素を使用するときはW3Cの解説などを参照してください。
<u> 一度削除されましたが、従来のHTML4、XHTMLの要素の意味(使用目的)が変更され、再定義された。例えば、漢字文化の連続した綴りにおいてそれが固有名詞とわかるようにマークする場合やスペルが間違っている箇所を示す場合などに使われます。一般的なブラウザでは下線が引かれたテキストとして表示されます。
<var> 変数の定義。その部分が変数や引数であることを示す要素です。
<wbr> 折り返し可能なテキストの定義。wbr要素は、br要素と同じ空要素ですが、br要素のように必ずその位置で改行されるわけではなく、例えば、途中からの折り返しが禁じられている英単語などがあります。長い英単語のように文字列がブラウザの表示領域に収まらない時など、指定した位置で折り返せられるようにしたい時に使われる要素です。 対応しているブラウザが少ないので注意が必要です。
リスト関連
<ul> 番号なしリストの定義。ul要素は項目の順番を入れ替えても関係のない箇条書きのリストを表します。
<ol> 規則リストの定義。ol要素は番号の順番に関係のあるリストを表します。
<li> リスト項目の定義。li要素は、ol要素やul要素を内包することでリストの項目を表す要素です。
<dl> 記述リストの定義。dl要素は、これまで“definition list(定義(付け)リスト)”の略でしたが、HTML5では“description list(記述リスト)”の略に変更になっています。この要素は1つ以上のdt要素に続く1つ以上のdd要素のグループを0個以上持っています。
<dt> 記述リスト(dd要素)の定義する用語を示す要素です。
<dd> dl要素の説明文、解説リスト
ルビ関連
<ruby> ルビの定義。ruby要素はルビの範囲をマークアップします。基本、rb要素とrt要素の組み合わせでルビ注釈を構成します。
<rb>  rb要素はルビの対象となるテキストを表す要素で、ルビを振る元となるテキストを指定します。( この場合のテキストとは、例えば日本語の場合だと通常は漢字になります)
<rp> ルビに未対応のブラウザ環境において、ルビがテキストとして表示された際に、カッコまたはその他の記号でルビのテキストを囲んで表示させるために使われます。例えば、次のように記述したとします。

<p>
<ruby>
 <rb>紅玉</rb>
 <rp>(</rp>
 <rt>ルビ</rt>
 <rp>)</rp>
</ruby>
</p>

 ルビに対応したブラウザではルビの対象となる漢字などのテキストの真上にふりがなが振付けられますが、ルビに未対応のブラウザでは、“紅玉(ルビ )”というように表示されます。rp要素を使ったからといって、弊害はないのでruby要素を使った場合、rt要素と共にこの要素を使うことを推奨します。
<rt> ルビ表示のテキストの定義。ruby要素内の(漢字などの)テキストのルビ(ふりがな)を表示させる要素です。
<rtc> rtc要素は、複数のrt要素をグルーピングしたい場合に使います。ただし、編集時点では対応しているブラウザが少ないので使う際には注意が必要です。
表関連
<table> 表の定義。基本的な構造としては、th要素(見出しセル)、td要素(データセル)、および、tbody要素、tr要素といった行関係の要素で構成されます。
<tr> 表の行の定義。表を構成する横一列(一行)分のセルが含まれる要素です。td要素またはth要素のみ配置することができます。
<td> 表のデータセルの定義。データが入る普通のセルです。
<th> 表の見出しセルの定義。表の列または行の見出しセルの場合はこのth要素を使います。
<thead> 表ヘッダーの定義。表のヘッダー部分(表の一番上の行)をグループ化する要素です。
<tbody> 表本体の定義。表の本体部分である行をグループ化する要素です。
<tfoot> 表フッターの定義。表のフッター部分(表の一番下の行)をグループ化する要素です。
<caption> 表タイトルの定義
<col> 表の縦列の定義。col要素は、colgroup要素内に含まれ、そのグループ内での縦列を表す要素です。
<colgroup> 表の縦列のグループ化の定義
フォーム関連の要素
<form> データが送信可能なフォームの定義。閲覧者が入力したデータはサーバーに送信されて処理されます。
<button> プッシュボタンの定義
<datalist> datalist要素は、閲覧者であるユーザーに入力情報の候補を提供するために使われる要素です。具体的には、input要素の部品にユーザーがテキストを入力するとそのテキストの後に続く固有の名前の候補を幾つかサジェスト機能として提供します。その際、入力候補となる複数のoption要素をとりまとめる要素でもあります。input要素とdatalist要素を関連付けるには、datalist要素のid属性の値をinput要素のlist属性に指定する必要があります。
<fieldset> 各種フォーム部品を1つのグループにまとめるための要素
<input> 入力フィールド(入力欄)の定義。type属性に指定するキーワードによって、どのフォーム部品になるのかが決まります。
<keygen> 公開鍵(プロダクトキーなど)と秘密鍵のペアのコントロール(制御装置)の定義。送信時に公開鍵はサーバに送信され、秘密鍵はローカル環境に残ります。ただし、動作するフォームのコントロールそのものは別途、作る必要があります。keygen要素は鍵ペアを生成するためのコントロールです。
<label> フォームコントロールのためのラベルの定義。<label for="各フォーム構成部品のID">、または、<label form="form要素のID">というように、ラベルに関連付ける部品のid属性と同じ値を指定することにより、フォームの構成部品とラベルを明確に関連付けます。
例)
<label for="EmailAddress">アドレス:</label>
<input name="e-mail" id="EmailAddress" … >
 このように<label>〜</label>の間にはラベルとなるテキスト文字のみが入ることに注意してください。
 label要素の使い方はもうひとつあります。<label>〜</label>の間にラベルとなるテキストとフォームの構成部品を入れる方法もあります。ただし、Internet Explorer5/6がfor属性を使う方法しか対応していないので本稿はfor属性を使う方法を推奨します。
<legend> fieldset要素のタイトルを定義
<meter> 数量や最大値、最小値、境界などの位置といったように特定の範囲内における量、または割合を示す値をあらわす定義。例えば、ディスク使用率のような計測結果もこれに入ります。
<optgroup> 選択(プルダウンメニュー)グループの定義。select要素内のoption要素をグループ化する要素。
<option> 選択(プルダウンメニュー)のオプション(選択肢)の定義。option要素は、select要素によって作成されるプルダウンメニューの選択肢、または、datalist要素によって提供される入力候補の選択肢をあらわします。select要素、またはdatalist要素、またはoptgroup要素内に配置します。
<output> 計算の出力結果の定義。スクリプトによるフォーム部品から導き出された計算結果であることを表します。
<progress> あらゆる種類のタスクの進捗(しんちょく)状況の定義。ダウンロードや重い処理を実行する際に、一般的なブラウザではその進捗状況をプログレスバーに表示されることを想定しています。この要素に対応していないブラウザでは、progress要素の内容が代替コンテンツとなります。
<select> 選択リストの定義。一般的にはプルダウンメニューを作成する要素です。メニュー内の選択肢は、select要素に含まれるoption要素によって指定されます。
<textarea> 複数行のテキスト入力欄の定義。
その他の要素
<figure> 写真、挿絵、図表、ソースコードなどのまとまりの定義。ただし、そのまとまりはドキュメントから切り出したとしても内容自体の意味が通じるような単体で独立したものでなければなりません。
<figcaption> figure要素内で使われるキャプションの定義。(必須ではありません)
<iframe> インライン・フレームを表示させる定義。(ドキュメント内でさらに別のドキュメントを表示させる要素です)
<script> スクリプトの定義。別途、外部ファイルとして用意したJavaScriptをsrc属性で読み込ませて実行できるほか、Script要素内に直接ソースコードを記述することもできます。
<noscript> スクリプトが無効な場合の定義。ユーザーのブラウザがスクリプト(JavaScript)に無効になっている場合に表示される代替コンテンツをこの要素の内容に設定します。
 なお、noscript要素はXML文書では使用できません。そのため、HTML構文のHTML5文書では使用できますが、XHTML構文のHTML5文書の場合は無効となります。ご注意ください。
<details>  HTML5.1で追加された要素。details要素は、閲覧者が操作可能な開閉式のウィジットを表します。例えば、見出しをクリックすると開閉する階層型メニューを簡単に作成できます。
<summary> HTML5.1で追加された要素。details要素の最初の子要素として配置し、details要素のキャプションを定義します。details要素による詳細情報の見出し、説明文を指定します。
<template>  template要素は、スクリプトによるドキュメントへの挿入・複製が可能なHTMLの断片を定義するための要素です。例えば、ユーザーの操作に応じてデータベースからデータを読み込み、読み込んだデータをその断片化されたHTMLに出力させるといったような使われ方が想定されると思います。

赤色:赤はHTML5で新たに追加された要素。

青色:青はHTML5で意味が変更された要素。

■主なブラウザのHTML5対応一覧表

 主なメジャーブラウザのHTML5対応状況です。尚、HTML文書はHTML5の文法に沿って記述する必要があります。表にあるバージョンはそのバージョンから完全に対応したというわけではなく、そのバージョンから段階的に対応したことを意味します。また、要素がサポートされていてもCSS3のプロパティが動作しない場合があります。(CSS3のプロパティを使っている場合、こっちの対応状況のほうが重要です。)

ブラウザの種類 HTML5対応(開始)状況のバージョン
Internet Explore(IE) v8.0〜
(※HTML5の新要素の認識など実質的な対応はv9.0から)
Firefox v3.1〜
Opera v9.6〜
Google chrome v3.0〜
Safari v3.0〜

     灰色:灰色は主要ブラウザの種類(名称)

・参考サイト

■HTML5で削除された要素、タグ一覧表

 HTML4.01やXHTML1.0の中に含まれていた要素の中でHTML5で削除された要素の一覧表です。(14種類あります。13種類あります。)

Tag 備考
<acronym> 略語(頭字語、頭文字語)
<applet> Javaアプレットを配置するための要素。
<basefont> 基準となるフォント名・色・フォントサイズを指定できる要素。
<big> フォントサイズを大きくする要素。
<center> 中央揃え。この要素で囲まれたほとんどの要素はセンタリングされますがHTML4.01〜XHTML1.1のすべての種類、バージョンで非推奨か廃止でした。
<command>  command要素は、ユーザーが呼び出すことのできるコマンドの定義。この要素はmenu要素内に配置する必要があり、コマンドはスクリプトによって、呼び出されます。(※この要素は、menu要素と共にHTML5勧告候補の仕様から削除されました)
<dir> 複数の段から構成されるディレクトリ(一覧)リスト
<font> フォントの種類、色、フォントサイズの一括指定
<frame> frameset要素内に配置して、HTMLドキュメント内のそれぞれの区画(領域)となるHTMLファイル(拡張子「html」)を指定する要素です。
<frameset> HTMLドキュメントを幾つかの区画(領域)に分割する要素です。
<hgroup> セクションの見出しを表したり、見出しをグループ化させるための要素。具体的には、連続した見出し要素をグループ化するために使われます。例えば、HTML5では同じページ内において、配置した見出しの次の見出しのランクが前の見出しのランクより上位になるとそこでいったんセクションが終了したと解釈され、新しいセクションが開始されるという暗黙のセクションが生成されるため、それを回避させたい場合に使われます。この要素を配置した場合、要素内容にはh1〜h6のいずれか1つ以上を配置しなければなりません。(※この要素はW3Cの正式勧告には入らなかったが各ブラウザに実装されています)
<isindex> 1行テキストボックスを作成する要素です。主にWebサーバを通して簡単なキーワード検索用に利用されていましたが1行テキストボックスを使いたい場合は、input要素を使うようにしてください。
<menu>  menu要素は、操作メニューリストの定義。指定できる属性は、type属性とlabel属性です。(※この要素は、command要素と共にHTML5勧告候補の仕様から削除されました)
<noframes> frame要素をサポートしないブラウザや、フレーム表示を非表示の設定にしている場合に、この要素内容に代わりとなる内容をHTMLで記述します。
<strike> 取消し線の定義。HTML5で意味が修正される前のS要素とまったく同じ働きをしていましたが、HTML5で廃止されました。
<tt> 要素内容を等幅フォントで表示する要素。

 黄色:黄色はHTML5で削除された要素

目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.