Edited at

【html5】英語が弱い人のためのタグ早見表

More than 1 year has passed since last update.


はじめに

この記事は、「ulってなんの略?brは?」って聞かれて答えられなかった人が、html5のタグの意味や語源を全部知って意味を理解した上でマークアップができるようにしよう!!と思って作った表です。


ドキュメントタイプ宣言(Document type definition)

タグ名
英語
日本語
意味・使い方

<!DOCTYPE html>
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日本語訳