目次
もくじ

HTML5 要素(タグ)一覧

2012年12月17日版の勧告候補による全要素一覧

先頭の○印はHTML5から追加になった要素です。

4.01の時代からある要素でも使い方が異なるものがありますから注意が必要です。

ブラウザのバージョンに未対応なものもあります。

セクション Sections
body文書の本体。この内部が表示される
section部分・部品章など主題で分けられるセクション。見出しをともなうような。
nav(navigation)「航海」他のページやページ内のリンクをまとめるもの。 フッターに注意書きのような補助的な情報へのリンクを置く場合はそこにnavを置く必要はない
article記事・論説切り出して再利用できるような独立性の高い記事であることを示す
aside余談・わきへ補足情報。article内でその記事の解説、外では関連の薄いもの、広告など。
h1〜h6(heading)表題・項目見出しを付ける。暗黙のセクションの開始。
hgroupheading group見出しに副題をつけてまとめる。(採用中止かも)
headerヘッダ・表題導入やナビのグループであることを示す
footerフッタそのセクションに関する情報を書く。著者や、関連文書へのリンクや、著作権データなど。セクションごとにあってもよい。
address住所article要素またはbody要素に対する連絡先情報を表す。連絡先・問合せ先になるものに限る
コンテンツのグループ化 Grouping content
p(Paragraph)段落・寸評ひとつの段落(パラグラフ)であることを表す
hr(horizontal rule)水平 罫線段落レベルのテーマや話題の区切り。HTML 4.01では水平線だが5では規定なし。
pre(preformatted)予備整形されたフォーマット済みテキストのブロック。半角スペースや改行をそのまま表示する。詩、コンピュータコードなど。<code>,<samp>と併用も可。
blockquote(block quote)区画 引用他の情報源から引用された内容であることを表す。情報源のアドレスがあればcite属性で示す。どこからの引用かの情報は blockquote 要素の外に置くこと。
ol(ordered list)順序あるリスト順序のあるリストとする。start属性で開始番号の指定可。
ul(unordered list)順序なしリスト順序のないリストとする。
li(list item)項目リストの項目を記述する。value属性がありol内なら項目の序数値になる。
dl(description list)説明リストname-valueからなる関連リストをつくる。項目と説明、問と答えなどに使う。
dt(description term)説明される言葉dlの中で定義・説明される言葉を表す。name-valueのname部分
dd(description data)説明資料・情報dlの中で直前のdtの説明を表す。name-valueのvalue部分
figure図形、肖像本文から参照される図表であることを示す
figcaption(figure caption)説明文figure内に置いて図表のキャプションを示す
div(division )分割特別な意味を持たせずに範囲を定義する。レイアウトやスタイル指定のために使う。
テキストレベルの意味づけ Text-level semantics
a(anchor)錨 href属性があるとき、ハイパーリンクを表す。
em(emphasis)強勢・強調 そのコンテンツの強勢強調を表します。アクセントを付けることで文の意味が変わる時に使用します。重要であるという意味ではありません。イタリックにするのでもありません。
strong強い そのコンテンツの強い重要性を表します。
small小さい 細則など付加的なコメントを表します。免責条項・警告・著作権などの注釈や細目などです。
s(strike-through)打ち消し線 すでに正確ではなくなった内容、もう関連性がない内容を表します。訂正を示すときにはdel要素にします。
cite引用・列挙 作品のタイトルを表します。(例:書籍、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、劇場作品、演劇、オペラ、ミュージカル、展覧会、訴訟事例報告など)人名には使わない。作品の内容の引用はblockquoteやqを使う。cite属性とは別物
q(quote)引用 他の情報源からの引用句・引用文であることを表します。 情報源のアドレスがあればcite属性で示します。
dfn(definition )定義 直近の親要素で定義された用語であることを表します。親要素はp,dl,sectionなどです。
abbr(abbreviation)略語 略語や頭字語であることを表します。title属性には、略語や頭字語の正式な名称を指定します。
time時間 コンピュータに可読な日付や時刻を記述します。要素の日時値は、datetime 属性があれば、その値となり、なければ、この要素の textContent となります。
code記号体系・コード プログラムなどのコードであることを示します。XML 要素名、ファイル名、コンピューター・プログラム、そのほかコンピューターが認識する文字列などです。
var(variable)変数 変数であることを示します。数式やプログラミングの変数、定数を表す識別子、物理量を表す記号に使えます。
samp(sample)見本 プログラムによる出力結果のサンプルであることを示します。
kbd(keyboard)キーボード ユーザーが入力する内容であることを示します。キーボードに限りません。
sub(subscript)下付き文字 下付き文字を表します。
sup(superscript)右肩文字 上付き文字を表します。数学のマークアップには MathML を使う方がよい。しかし、詳細な数学的なマークアップを求めていないのであれば、sub 要素と sup 要素で済ませても良い。
i(italic)斜体 声や心の中で思ったことや、他と区別したいテキストの範囲に使用します。分類名、技術用語、外国語のフレーズなど欧米テキストでイタリックにするような場合に使うようにしたところがスタートだが、見栄えはスタイルシートで整えるので必ずしもイタリック体になるものではない。
b(bold)太字 重要性を伝えるのではなく、i要素で表すものでもなく、区別したいテキストの範囲を表します。例えば、キーワード、レビュー記事中の製品名などです。見栄えはスタイルシートで整えるので必ずしも太字になるものではない。
mark 文書内の該当テキストを目立たせる。作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。
rubyルビルビをふる
rt(Ruby Text)ルビテキストルビのテキストを指定する
rp(Ruby Parentheses)ルビ括弧ルビを囲む記号を指定する
bdi(isolated?)双方向テキスト隔離? 双方向テキスト書式という目的において、その前後から孤立させることになるテキストの範囲を指定する
bdo(bidirectional algorithm override)双方向テキスト方向指定 文字表記の方向を指定する。この要素に dir 属性を指定しなければいけません。左から右へ向かう方向に変更することを指定する ltr と、右から左へ向かう方向に変更することを指定する rtl のどちらかです。
span範囲・期間 ひとつの範囲として定義する。これ自身では何も意味を持ちませんが、class, lang, dir などのグローバル属性と組み合わせて使います。
br(line break)改行改行する
wbr(word break)単語改行 改行しても良い位置を示す(終了タグ無し)
訂正 Edits
ins(insert)挿入 追加された部分であることを示す。cite属性で説明文書のURL、datetime属性はで変更日時を指定できる。HTML5では中にp要素を配置することもできる。
del(delete)削除 削除された部分であることを示す。cite属性で説明文書のURL、datetime属性はで変更日時を指定できる。HTML5では中にp要素を配置することもできる。
埋め込みコンテンツ Embedded content
img(image)画像 画像を表示する。alt属性については仕様が変更になった。
iframe(inline frame)行内枠 インラインフレームを作る
embed埋め込まれる 動画・音声などプラグインを必要とするデータを埋め込む
objectもの 文書に外部リソースを埋め込む
param(parameter)パラメータ <object>タグで プラグインデータを埋め込んだ際にプラグインのパラメータを指定する
video映像 動画を再生する。Flashなどのプラグインをインストールせずに、標準のHTMLからimgと同様に動画を扱えるようにする
audio音声の 音声を再生する
source出所 動画や音声などのURLや種類を複数指定して選択可能にする
track軌道・トラック メディア要素に対して明示的な同期テキスト・トラックを指定できるようにします。
canvas画布 標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどの図形を描くことができる領域を用意する
map地図 イメージマップを作成する(一枚の画像に複数のリンクを設定する)
area領域 イメージマップのハイパーリンク領域を設定する
テーブル(表)データ Tabular data
tableテーブル(表)を作成する
caption見出し・説明文 テーブル(表)にキャプション(table要素のタイトル)ををつける
colgroup(column group)列グループ 表の縦列をグループ化する
col(column)列 表の縦列の属性やスタイルを指定する
tbody(table body) テーブル(表)のボディ部分を定義する
thead(table head) テーブル(表)のヘッダ部分を定義する
tfoot(table foot) テーブル(表)のフッタ部分を定義する
tr(table row) テーブル(表)の横一行を定義する
td(table data) テーブル(表)のデータセルを作成する
th(table header) テーブル(表)の見出しセルを作成する
フォーム Forms
form書式入力・送信フォームを作る
fieldset欄の組み分けフォームの入力項目をグループ化する
legendキャプション(説明文) フォームの入力項目グループにキャプション付ける
labelラベル(貼り札)フォーム部品と項目名(ラベル)を関連付ける
input入力入力部品を置く(種類は別表)
buttonボタンボタンを作成する
select選択セレクトボックスを作成する
datalistデータリスト 入力候補となるデータリストを定義する。(入力候補を表示するオートコンプリート機能のため)
optgroup(option group)オプションのグループ optoinタグで作成する選択肢をグループ化する
option選択肢 selectタグやdatalistタグで作る選択肢や入力候補リストを指定する
textareaテキスト領域 複数行のテキスト入力欄を作成する
keygen(key generator)キー生成 フォーム送信時に暗号化に使うキーを発行する
output出力 計算結果を示す。inputに入れられた値から計算された結果を表示。
progress進展・推移 タスク完了までの進捗状況を示す
meter計量器 規定範囲内の測定値を表す。たとえば、ディスク使用量、人気投票の割合など。
インタラクティブな要素 Interactive elements
details詳細 備考や操作手段などの詳細情報を示す。小さな見出し(summaryで指定)の下にあるフィールドを折りたたんだり展開することができるようになります。
summary要約 <details>の内容の要約を入れておきます
commandコマンド menu 要素の中に置いてコンテキスト・メニューやツールバーのコマンドを指定します。
menuメニュー コマンドのリストを表します。操作メニューを作成できます。
dialog対話・会話・問答 ダイアログ・ボックスやインスペクターやウィンドウなど、ユーザーがタスクを実行するために操作することができるアプリケーションの一部を表します

Then he turned to the blackboard and picked up the chalk. After a few moment's thought, he wrote E = m c2. The teacher looked pleased.

MathML-test: x = b ± b 2 4 a c 2 a

output-test: + =

Progress: 30%

input のtype属性

input type="hidden"画面上は表示されない隠しデータを指定
input type="text"一行テキストの入力欄を作成
input type="search"検索テキストの入力欄を作成
input type="tel"電話番号の入力欄を作成
input type="url"URLの入力欄を作成
input type="email"メールアドレスの入力欄を作成
input type="password"パスワード入力欄を作成
input type="datetime"協定世界時による日時の入力欄を作成
input type="date"日付の入力欄を作成
input type="month"月の入力欄を作成す/td>
input type="week"週(2013-W18など)の入力欄を作成
input type="time"時間の入力欄を作成
input type="datetime-local"ローカル日時の入力欄を作成
input type="number"数値の入力欄を作成
input type="range"レンジ入力欄(音量調節や明るさ調節のような)を作成
input type="color"色の入力欄を作成
input type="checkbox"チェックボックス(複数の項目を選択できるボタン)を作成
input type="radio"ラジオボタン(ひとつの項目だけを選択できるボタン)を作成
input type="file"サーバーへ送信するファイルを入力欄と参照から選択するボタンを作成
input type="submit"送信ボタンを作成
input type="image"画像ボタンを作成(座標を選択してフォームをサブミットすることができるイメージ、または、サブミットボタンの代わり)
input type="reset"リセットボタンを作成
input type="button"汎用ボタンを作成(デフォルトでは何もしない。onclickと組み合わせて使用)

input のその他追加された属性

input autofocusウェブページが表示された自動でフォーカスされるようにします
input placeholder入力欄に入力の助けとなるような短いヒント(単語や短いフレーズ)を表します
input required入力必須であることを示す
input pattern正規表現で入力値のパターンを指定する
input min max入力できる最小値と最大値を指定する
input step入力欄で刻むステップ値を指定する
input autocomplete入力候補を提示して入力内容を自動補完する
input multiple複数の値を入力・選択できるようにする