はじめに
この記事は、「ulってなんの略？brは？」って聞かれて答えられなかった人が、html5のタグの意味や語源を全部知って意味を理解した上でマークアップができるようにしよう！！と思って作った表です。
ドキュメントタイプ宣言(Document type definition)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
|
Document type is html |
この文書はHTML5で作成されたものである |
文書の先頭にどのバージョンで作成されているかを宣言する |
根本となる要素 (The root element)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <html> |
html(HyperText Markup Language) |
ハイパーテキストマークアップ言語 |
HTML文書であることを示す |
文書のメタデータ(Document metadata)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <head> |
head |
ヘッド |
文書のヘッダ情報を表す |
| <title> |
title |
タイトル・表題 |
文書にタイトルをつける |
| <base> |
base |
ベース・基盤 |
相対パスの基準URIを指定する |
| <link> |
link |
リンク |
リンクする外部リソースを指定する |
| <meta> |
meta |
メタ |
その文書に関するメタデータを指定する |
スクリプト(Scripting)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <script> |
script |
スクリプト |
スクリプトを組み込む |
| <noscript> |
no script |
スクリプトがない |
スクリプトが動作しない環境用の表示内容を指定する |
セクション(Sections)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <body> |
body |
ボディ |
文書の本体を表す |
| <section> |
section |
セクション・章・区間 |
一つのセクションであることを示す |
| <nav> |
navigation |
ナビゲーション |
ナビゲーションであることを示す |
| <article> |
article |
記事 |
記事であることを示す |
| <aside> |
aside |
わきに・かたわらに |
余談・補足情報のセクションであることを示す |
| <h1>〜
|
heading / headline |
見出し |
見出しを付ける(h1が最も高位な見出しである) |
| <header> |
header |
ヘッダ |
イントロダクションやナビゲーショングループであることを示す |
| <footer> |
footer |
フッター |
直近のセクションのフッタであることを示す |
| <address> |
address |
アドレス・宛先 |
連絡先・問合せ先を表す |
コンテンツの分類(Grouping content)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <p> |
paragraph |
段落 |
ひとつの段落であることを示す |
| <hr> |
horizontal rule |
水平方向の罫線 |
テーマ・話題の区切りを表す要素 |
| <pre> |
preformatted text |
整形済みテキスト |
半角スペースや改行をそのまま表示する |
| <blockquote> |
block quote |
ブロック型の引用文 |
他の情報源からの引用・転載セクションであること |
| <ol> |
ordered list |
順序付きリスト |
順序のあるリストを表示する |
| <ul> |
unordered list |
順序の付けられていないリスト |
順序のないリストを表示する |
| <li> |
list item |
リストのアイテム |
リストの項目を記述する |
| <dl> |
description list (元 definition list) |
説明リスト |
定義・説明リストを表す |
| <dt> |
description term (元 definition term) |
説明される言葉 |
定義・説明される言葉を表す |
| <dd> |
description, definition |
説明や定義 |
定義用語や言葉の説明をする |
| <figure> |
figure |
図表 |
図表であることを示す |
| <figcaption> |
figure caption |
図表のキャプション・見出し |
図表のキャプションを示す |
| <div> |
division |
区分/分割 |
ひとかたまりの範囲として定義する |
| <main> |
main |
主 |
主のコンテンツであることを示す |
テキストの意味(Text-level semantics)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <a> |
anchor |
アンカー、いかり |
ハイパーリンクを指定する |
| <em> |
emphasis |
強調する |
アクセントを付ける箇所を指定する |
| <strong> |
strong |
強い |
強い重要性を表す |
| <small> |
small |
小さい |
注釈や細目を表す、意味を弱める |
| <s> |
strikethrough text |
取り消し線のテキスト |
すでに正確ではなくなった、すでに関係なくなった内容を表す |
| <cite> |
cite |
引用する |
作品のタイトル(出典・参照先)を表す |
| <q> |
quotation |
引用 |
引用句・引用文であることを表す |
| <dfn> |
definition |
定義 |
何らかの用語の意味を定義（解説）する |
| <abbr> |
abbreviation |
略語 |
略語や頭字語であることを表す |
| <time> |
time |
時間 |
日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す |
| <code> |
code |
コード |
プログラムなどのコードであることを示す |
| <var> |
variable |
変数 |
変数であることを示す |
| <samp> |
sample |
サンプル |
プログラムによる出力結果のサンプルであることを示す |
| <kbd> |
keyboard |
キーボード |
ユーザーが入力する内容であることを示す |
| <sub> |
subscript |
添字 |
下付き文字を表す |
| <sup> |
superscript |
上付き文字 |
上付き文字を表す |
| <i> |
italic |
イタリック |
他と区別したいテキストを表す際に使用。イタリック体になる。 |
| <b> |
bold |
太字 |
他と区別したいテキストを表す際に使用。太字になる。 |
| <mark> |
mark |
マーク |
文書内の該当テキストをハイライトして目立たせる際に、ユーザーの操作に関連している箇所に使用。 |
| <ruby> |
ruby |
ルビ |
ルビをふる際に使用 |
| <rt> |
ruby text |
ルビのテキスト |
ルビのテキストを指定する |
| <rp> |
ruby parentheses |
ルビの括弧 |
ルビのテキストを囲む括弧等の記号を指定。対応していないブラウザで（）で表示する。 |
| <bdo> |
bi-directional override |
双方向オーバーライド |
文字表記の方向を指定する |
| <span> |
span |
スパン |
ひとつの範囲として定義する |
| <br> |
line break |
改行 |
改行する際に使用 |
| <wbr> |
wordbreak opportunity |
単語の分割可能箇所 |
改行しても良い位置を示す |
挿入と削除(Edits)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <ins> |
insert |
挿入 |
追加された部分であることを示す |
| <del> |
delete |
削除 |
削除された部分であることを示す |
コンテンツの埋め込み(Embedded content)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <img> |
image |
画像 |
画像を表示 |
| <iframe> |
inline frame |
インラインのフレーム |
文書内に別の文書などの閲覧コンテンツを入れ子に配置したフレームを作る |
| <embed> |
embedding |
埋め込み |
プラグインデータを埋め込む |
| <object> |
object |
オブジェクト |
文書に外部リソースを埋め込む |
| <param> |
parameter |
パラメーター |
プラグインデータを埋め込んだ際に呼び出されるプラグインのパラメータを指定する |
| <video> |
video |
ビデオ |
動画を再生する際に使用 |
| <audio> |
audio |
オーディオ |
音声を再生する際に使用 |
| <source> |
source |
ソース |
動画や音声などのメディアファイルのURLや種類を指定する際にメディア要素の子要素として使用 |
| <canvas> |
canvas |
キャンバス |
ウェブページ上で図形を描く |
| <map> |
map |
マップ |
イメージマップ(形状でリンクを設定したもの)を作成する |
| <area> |
area |
エリア・領域 |
イメージマップのハイパーリンク領域を設定 |
テーブルデータ(Tabular data)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <table> |
table |
テーブル |
表を作成する |
| <caption> |
caption |
キャプション・見出し |
表にキャプションをつける |
| <colgroup> |
column group |
カラムのグループ |
表の縦列をグループ化する |
| <col> |
column |
カラム・囲み記事 |
表の縦列の属性やスタイルを指定する |
| <tbody> |
table body |
テーブルのボディ |
表のボディ部分を定義する |
| <thead> |
table header |
テーブルのヘッダー |
表のヘッダ部分を定義する |
| <tfoot> |
table footer |
テーブルのフッター |
表のフッタ部分を定義する |
| <tr> |
table row |
テーブルの横列 |
表の横一行を定義する |
| <th> |
table header cell |
テーブルの見出しセル |
表の見出しセルを作成する |
| <td> |
table data cell |
テーブルのデータセル |
表のデータセルを作成する |
フォーム (forms & input-element & button-element)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <form> |
form |
フォーム |
入力・送信フォームを作る |
| <fieldset> |
field set |
分野・領域を設定する |
フォームの入力項目をグループ化する |
| <legend> |
legend |
レジェンド・伝承 |
フォームの入力項目グループにキャプションを付ける |
| <label> |
label |
ラベル |
フォーム部品と項目名（ラベル）を関連付ける |
| <input> |
input |
入力 |
フォームを構成する様々な入力部品を作成する |
| <button> |
button |
ボタン |
ボタンを作成する |
| <select> |
select |
セレクト・選ぶ |
セレクトボックスを作成する |
| <datalist> |
data list |
データリスト |
入力候補となるデータリストを定義する |
| <optgroup> |
option group |
オプションのグループ |
選択肢をグループ化する |
| <option> |
option |
オプション・選択 |
セレクトボックスや入力候補リストの選択肢を指定 |
| <textarea> |
textarea |
テキストエリア |
複数行のテキスト入力欄を作成する |
| <keygen> |
key generator |
キージェネレータ |
フォーム送信時にキーを発行する |
| <output> |
output |
出力 |
計算結果を示す |
| <progress> |
progress |
進行・進捗 |
タスク完了までの進行状況を示す |
| <meter> |
meter |
計器 |
規定範囲内の測定値を表す |
ユーザーによる操作(Interactive elements & commands)
| タグ名 |
英語 |
日本語 |
意味・使い方 |
| <details> |
details |
詳細 |
備考や操作手段などの詳細情報を示す |
| <summary> |
summary |
概要 |
<details>の内容の要約を示す |
| <command> |
command |
コマンド・司令 |
操作メニューの各コマンドを指定する |
| <menu> |
menu |
メニュー |
操作メニューを作成する |
おわりに
思った以上に自分の知っているタグが少ないことに気づきました。
また、語源を知っているとどのような場面でどのタグを使えば良いかがよりはっきりしました。
今後マークアップするときはこの表でまとめたことを意識して正しいマークアップをしていきたいです！
間違い等ございましたらコメントをお願いします。
参考
W3C HTML5
HTML5リファレンス
html5doctor - HTML5.JP
W3C HTML5
W3C HTML5日本語訳
