気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
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要素によってボタンやメニューをタッチ(ポイントやクリック)することでツールバー風、プルダウンメニュー風のメニューを作成できたり、隠されたウィジェットを表示したり、折りたたんだりといった開閉機能も可能となっています。

【構造関連】
commandmenu要素用コマンド要素/イベントにおけるコマンド実行・チェックボックス・ラジオボタン
navナビゲーションリンクを持つセクション
article記事/単一まはた複数設定可
aside余談・補足記事
details詳細と詳細を隠すための開示制御
summary概要(details要素の子要素で詳細における表題)
*HTML4ではtable要素の属性
figureオプションとしてキャプションを持つ図
figcaptionfigure要素の図のキャプション(表題)
headerページまたはセクション用ヘッダ
hgroupHeaderGROUP/見出しのグループ化
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ビデオプレーヤー
sourcevideo要素またはaudio要素のメディアソース
trackvideo要素または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コンボボックスコントロールのオプションのコンテナ
keygenKey GENerator/フォームにおける暗号鍵ジェネレータのコントロール

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

イメージ例7 markタグ
<mark>マーカー</mark>
マーカー

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

【フォント系要素関連】
markMARKer/マーカー・ハイライト

HTML5【特殊文字関連】

イメージ例8 rubyタグ
 rt 例:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
 rp 例:
<ruby>
 漢<rp>(</rp><rt>かん</rt><rp>)</rp>
 字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

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

【特殊文字関連】
rubyルビ、振り仮名、振り仮名用の活字
rtRuby Text/ルビのテキスト
rpRuby Parentheses/ルビテキストの括弧

HTML5【定義要素関連】

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

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

HTML5【入出力書式関連】

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

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

HTML5【国際化関連】

 HTML5の国際化関連では同一文書内で右書き/左書きテキスト文字列の混在を可能とするbdi要素が追加されています。

【国際化関連】
bdiテキストの方向性の分離

 HTML4では、bdo要素によってブロック単位で右書き/左書きスタイルを指定できましたが、HTML5では、これに加えbdi要素によってインラインで指定できるようになります。

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ