気の向くままに辿るIT/ICT/IoT

HTML/XHTMLタグ・要素・属性・属性値

HTML5要素・タグ一覧【新規追加要素】

HTML5で新たに定義された要素・タグにはどんなものがあるの？

HTML5要素・タグ一覧【新規追加要素】

HTML5で新たに追加された要素・タグ

　HTML5として定義された要素自体は全108種類、内HTML5で新たに追加となった要素は30要素ですが、これとは別に数学・科学技術計算のMath系マークアップ(MathML3.0／要素数197)もHTML5(及びCSS3)で拡張仕様として利用できるようになっています。

　それだけではなく、更にHTML5では、例えばtableで利用できる基本的なタグの他にdetailsという親要素とその子要素であるsummary要素のセットは汎用的なタグとして定義されていますが、これはtable要素の子要素ではないもののcaption要素の子要素のように使うことができたりするなど親要素と子要素という関係の要素が増え尚且つ汎用性があったりするのでバリエーションが増えていたりします。

　よってHTML4までの仕様を知っている場合は特に柔らか頭(柔軟性)が必要かもしれません。

　というわけでHTML5にはHTML5用途別要素・タグ一覧で便宜的に分類した13系統の内、9系統に何らかの追加があります。

webzoit分類リンク
構造系	form要素系	table要素系
入出力書式系	フォント系	リスト系
プラグイン系	マルチメディア系	部分修正系
定義系	特殊文字系	アンカー系
国際化

HTML5【構造関連】

イメージ例1 全体

menu command	header
	article




	footer

　HTML5における構造に関する追加要素は、構成的にはブログ的発想のタグ構成で大枠として本文header/article/footer各要素とメニュー部(command/menu要素)で段組みができるなどHTML4でdiv要素を多用していたようなケースに対応できます。

イメージ例2 article

article

hgroup/h1～h6

section

aside

figure/figcaption

details

summary

　また、記事(article要素)内では必要に応じてhgroup/header/section要素によって章立て、figure/figcaption要素で図示、aside要素で補足を付記、長文ならdetails要素で「続き...」などとして詳細記事を折りたたみ、header/footerなどにパンくずリスト的なちょっとしたリンクを配置するなどある種、限定的なナビゲーションや引用先などリンクを含む文章などをブロック単位で指定する場合などにnav要素を使うといったことが可能となります。

イメージ例3 footer

footer

nav

　実用上は、ブログ風の実装に留まらず、PC端末上のRIAとして、またスマホやタブレットでも利用価値の高いと思われる仕様として例えば、command要素/menu要素とdetails要素によってボタンやメニューをタッチ(ポイントやクリック)することでツールバー風、プルダウンメニュー風のメニューを作成できたり、隠されたウィジェットを表示したり、折りたたんだりといった開閉機能も可能となっています。

【構造関連】
command	menu要素用コマンド要素／イベントにおけるコマンド実行・チェックボックス・ラジオボタン
nav	ナビゲーションリンクを持つセクション
article	記事／単一まはた複数設定可
aside	余談・補足記事
details	詳細と詳細を隠すための開示制御
summary	概要(details要素の子要素で詳細における表題) *HTML4ではtable要素の属性
figure	オプションとしてキャプションを持つ図
figcaption	figure要素の図のキャプション(表題)
header	ページまたはセクション用ヘッダ
hgroup	HeaderGROUP／見出しのグループ化
section	一般的な文書またはアプリケーションのセクション
footer	ページまたはセクションのフッタ

　ちなみにsummaryは、HTML4ではtable要素の属性として存在しましたが、HTML5ではtableの属性から除外されると共に構造上のdetails要素の子要素、summary要素として別途定義、汎用化され、他方、table内でもcaption要素(tableの表題)の一時的な子要素としてdetails要素(表題の詳細)、ひいてはsummary要素(表題の詳細の要約)を使用できるようです。

HTML5【マルチメディア関連】

イメージ例4 audioタグ

<audio>

<source></source>

<track></track>

</audio>

　HTML5はCSS3と併せてマルチメディア関連の仕様が充実しており、グラフ描画やゲームなどスクリプトを使ったビットマップ領域を提供するcanvas要素、オーディオプレーヤーを実装するaudio要素、ビデオプレーヤーを実装するvideo要素、audio/video用のソースファイル指定用source要素、track要素など5つの要素が追加されています。

【マルチメディア関連】
canvas	スクリプト可能なビットマップのキャンバス
audio	オーディオプレーヤー
video	ビデオプレーヤー
source	video要素またはaudio要素のメディアソース
track	video要素またはaudio要素の時限テキストトラック

HTML5【スクリプト・プラグイン関連】

イメージ例5 progress

　HTML5のプラグイン関連ではゲージであるmeter要素と処理経過を視覚的に表示するプログレスバーであるprogress要素という2つの要素が追加されています。

【スクリプト・プラグイン関連】
embed	組み込み(プラグイン)
meter	ゲージ
progress	進捗バー

イメージ例6 embedタグ

<embed src="foo.swf" quality="high">

　尚、embed要素については、ブラウザNetscape Navigatorにおいて初期の段階で独自拡張され、後にIEも同様の拡張を行うなど新鮮味はないもののHTML4としては標準仕様化されていなかった為、HTML標準仕様としてはHTML5で新たに追加された要素ということになりますが、ソースとして例えばAdobe Flashの再生用ファイルフォーマットの1つswfファイルを指定すればFlashが再生されます。

HTML5【form要素関連】

　HTML5ではform要素にコンボボックス(単一選択プルダウン)のオプションをグループ化するdatalist要素、暗号鍵ジェネレータkeygen要素の2つの要素が追加されています。

【form要素関連】
datalist	コンボボックスコントロールのオプションのコンテナ
keygen	Key GENerator／フォームにおける暗号鍵ジェネレータのコントロール

HTML5【フォント系要素関連】

イメージ例7 markタグ

<mark>マーカー</mark>

　HTML5ではフォント系要素にマーカー(ハイライト)要素が追加されています。

【フォント系要素関連】
mark	MARKer／マーカー・ハイライト

HTML5【特殊文字関連】

イメージ例8 rubyタグ

rt 例:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

　HTML5ではルビ(ふりがな)に関する要素が3つ追加されています。

【特殊文字関連】
ruby	ルビ、振り仮名、振り仮名用の活字
rt	Ruby Text／ルビのテキスト
rp	Ruby Parentheses／ルビテキストの括弧

HTML5【定義要素関連】

　HTML5では定義系要素としてtime要素が追加となっています。

【定義要素関連】
time	日付および/時間

HTML5【入出力書式関連】

　HTML5では入出力書式に関する要素として算出値等のoutput要素と文字間の改行候補を指定するwbrの2つの要素が追加されています。

【入出力書式関連】
output	出力(計算された出力値等)
wbr	Word BReak／改行機会・文字区切り・改行すべき位置の指定(ブラウザユーザーエージェントへの指示)