先頭の○印はHTML5から追加になった要素です。
4.01の時代からある要素でも使い方が異なるものがありますから注意が必要です。
ブラウザのバージョンに未対応なものもあります。
セクション Sections | |||
body | 体 | 文書の本体。この内部が表示される | |
○ | section | 部分・部品 | 章など主題で分けられるセクション。見出しをともなうような。 |
○ | nav | (navigation)「航海」 | 他のページやページ内のリンクをまとめるもの。 フッターに注意書きのような補助的な情報へのリンクを置く場合はそこにnavを置く必要はない |
○ | article | 記事・論説 | 切り出して再利用できるような独立性の高い記事であることを示す |
○ | aside | 余談・わきへ | 補足情報。article内でその記事の解説、外では関連の薄いもの、広告など。 |
h1〜h6 | (heading)表題・項目 | 見出しを付ける。暗黙のセクションの開始。 | |
○ | hgroup | heading 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:
Progress:
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 autofocus | ウェブページが表示された自動でフォーカスされるようにします |
○ | input placeholder | 入力欄に入力の助けとなるような短いヒント(単語や短いフレーズ)を表します |
○ | input required | 入力必須であることを示す |
○ | input pattern | 正規表現で入力値のパターンを指定する |
○ | input min max | 入力できる最小値と最大値を指定する |
○ | input step | 入力欄で刻むステップ値を指定する |
○ | input autocomplete | 入力候補を提示して入力内容を自動補完する |
○ | input multiple | 複数の値を入力・選択できるようにする |