HTML
HTML5

HTML要素名/属性名を省略表記前の単語と意味から覚える

More than 1 year has passed since last update.

はじめに

HTMLの要素名と属性名はaやdiv、altなど省略表記されているものが多く、由来となった語句や意味をあまり知らずに使っている人は意外と多い。

「単語・句」と「意味」はセットにすると覚えやすく、より適切な(セマンティック)マークアップが行えるようになる。そこで省略されたものに限り、もとの単語・句を一通り調べ、訳・解説を加えてまとめてみた。

HTML要素のカテゴライズは筆者独自のもの。HTML5を対象としたが、廃止要素も少しだけ扱った。

要素(Element)

よく使う基本的な要素

要素名 単語・句 訳・解説
a anchor
アンカー
「錨(いかり)」「つなぎ止めるもの」
ハイパーリンクを指定する際用いる
img image
イメージ
「画像」
p paragraph
パラグラフ
「段落」「節」
ひとかたまりになった文章のこと
div       division
ディビジョン
単語は「区分」「仕切り」の意
HTML上は意味を持たずCSS適用のためのコンテナ要素として使用されることが多い
h(n) heading
ヘッディング      
「見出し」「表題」
h1〜h6まであり、数が増えるごとに使用頻度が減る
br break
ブレイク
「改行」
line breakでも同様の意味
meta meta information
メタ インフォメーション
「メタ情報」
metaは「〜を含む」という接頭辞。ページの各種付加情報を定義。必ずhead要素内に記述

リスト系

要素名 単語・句 訳・解説
ol ordered list
オーダード リスト
「順序付きの/番号付きリスト」
orderedはコンピュータ用語で「順序付きの」の意
ul unordered list
アンオーダード リスト
「順序付きでない/番号なしリスト」
li list item
リスト アイテム
「リスト項目(そのひとつひとつ)」
必ずolまたはulの子要素として使用する

説明(記述)リスト系

HTML4で定義リストと呼ばれていた。HTML5で表す意味が少し幅広くなったように思う

要素名 単語・句 訳・解説
dl  description list
ディスクリプション リスト
「説明(記述)リスト」
HTML4ではdefinition list(定義リスト)だったがHTML5で変更
dt description term
ディスクリプション ターム
「説明用語・項目」
ddに説明(記述)してもらう
dd description, definition
ディスクリプション, ディフィニション
「説明、定義」
dtについて説明(記述)する

テーブル系

要素名 単語・句 訳・解説
thead table header
テーブル ヘッダー
表(テーブル)のヘッダー部分
tbody table body
テーブル ボディ
表のボディ部分
tfoot table footer
テーブル フッター
表のフッター部分
colgroup column group
カラム グループ
表の縦一列をグループ化する際に使用する
columnは「列」(縦方向)を意味する
col column
カラム
表の縦列に属性やスタイルを指定する
HTML5では必ずcolgroupの子要素として使用する
tr table row
テーブル ロウ
表の横一行をグループ化する際に使用する
rowは「行」(横方向)を意味する
th table header cell
テーブル ヘッダー セル
テーブルの見出し(項目名)セル
td table data cell
テーブル データ セル
テーブルのデータ(内容)セル

テキスト適用系

要素名 単語・句 訳・解説
s strikethrough
ストライクスルー
「取り消し/打ち消し線」
すでに正確でなくなったことを表す
sub subscript
サブスクリプト
「下付き文字」
sup superscript
スーパースクリプト
「上付き文字」
pre preformatted text
プレフォーマッテッド テキスト
「整形(フォーマット)済みテキスト」
半角や改行をそのまま表示。code要素と用いることが多い
wbr word break opportunity
ワード ブレイク オポチュニティ
直訳「単語改行機会」
改行してもいい位置を示す際に使用。英文での使用が想定される
abbr  abbreviation
アブリビエーション
"HTML"や"W3C"など「略語」「頭字語」を表すために用いる
title属性によって正式名称を補う
dfn definition
ディフィニション
「定義」される用語を表す
使うポイントはあまりよくわからない
bdi bidirectional isoration
バイディレクショナル アイソレーション
直訳「双方向性の独立」
テキストの一部を異なる文字方向に指定
bdo bidirectional override
バイディレクショナル オーバーライド
直訳「双方向性の上書き」
文字表記の方向を指定

テキスト適用・引用系

下記2つとblockquote要素を加え引用系は3つ。それぞれの違いを知っておきたい

要素名 単語・句 訳・解説
q quotation
クォーテーション
「引用」
インラインレベルの改行不要な短い文章を引用する際に使用。一般的に使用されるのはblockquote要素
cite  citation
サイテーション
「引用(元)」
作品(本、音楽、演劇、映画、テレビ番組、ゲームなど)のタイトルなど引用元や出典を表す際に使用

テキスト適用・プログラムコード系

code要素と一緒に使う系

要素名 単語・句 訳・解説
var variable
バリアブル
「変数」であることを示す
samp sample
サンプル
プログラムによる出力結果の「サンプル」であることを示す
kbd keybord
キーボード
ユーザーが「キーボード」などで入力する内容であることを示す

テキスト適用・挿入/削除

要素名 単語・句 訳・解説
ins insert
インサート
「挿入(追加)」された部分であることを示す
del delete
デリート
「削除」された部分であることを示す

テキスト適用・ルビ系

漢字など東アジア言語の発音向けに策定されたruby要素系

要素名 単語・句 訳・解説
rb ruby base
ルビ ベース
ルビをふる対象(文字列)を指定
rt ruby text
ルビ テキスト
ルビにする文字列/テキストを指定
rp ruby parentheses
ルビ パレンセシス
ブラウザ未対応時のルビを囲む括弧を定義
parenthesesは「括弧(かっこ)」の意
rtc ruby text container
ルビ テキスト コンテナー
複数のルビを付ける場合のコンテナー

フォーム系

要素名 単語・句 訳・解説
keygen key-pair generator
キーペア ジェネレーター
フォーム送信時にペアキー(公開鍵と秘密鍵)の生成を行う
optgroup option group
オプション グループ
フォーム内で選択項目を記述するoption要素をグループ化する

コンテンツ埋め込み系

要素名 単語・句 訳・解説
iframe inline frame
インライン フレーム
直訳すると「埋め込む枠」か
別のファイル(HTML)を表示するための枠を作る
svg scalable vector graphics
スケーラブル ベクター グラフィックス
直訳「拡張性のあるベクターグラフィック」
文書中に埋め込むSVG
param parameter
パラメーター
object要素で埋め込んだプラグインの「パラメーター」を指定する

その他

要素名 単語・句 訳・解説
nav navigation links
ナビゲーション リンク
セクショニング・コンテンツの一つでナビゲーション(他ページリンクやページ内リンク)を示す
hr horizontal rule
ホリゾンタル ルール
「水平罫(けい)線」の意
HTML5では段落レベル、セクション内の話題の区切りに使用する
figcaption figure caption
フィギュア キャプション
「画像、図のキャプション」
figure要素中で使用する図や画像に対する説明文

それほど使用を推奨しない系

HTML4時代にスタイル用途で使用し、HTML5要素として若干意味を変え残留したがあまり実用性がない

要素名 単語・句 訳・解説
em   emphasis
エンファシス
「強勢強調」
文章中のアクセントを示す。使いにくいので重要度を表す強調のstrong要素を使えば良いかと
i italic
イタリック
代替音声や気分など、質が異なるテキストを示す
HTML4では「斜体」を表したが、5ではほとんど意味を持たないためCSSスプライトやアイコンフォントのマークアップが慣例化している
b bold
ボールド
区別したいテキストを印刷の際に太くしたいなどの目的で使用
HTML4では「太線」を表したがスタイルはCSSが受け持つべき
u underline
アンダーライン
テキストをラベル付けする
HTML4では「下線」を表したがスタイルはCSSが受け持つべき

HTML5で廃止になった要素

要素名 単語・句
dir directory list
ディレクトリ リスト
tt teletype text
テレタイプ テキスト
nobr no break
ノー ブレイク

属性(Attribute)

グローバル属性

要素名 単語・句 訳・解説
dir direction
ディレクション
「方向」
lang language
ラングエイジ
「言語」
itemprop item property
アイテム プロパティ
「アイテム特性」
Microdata(マイクロデータ)マークアップを行う際プロパティを指定する属性

その他

要素名 単語・句 訳・解説
alt alternate text
オルタネイト テキスト
「代替テキスト」
img要素に設定必須の属性
src source
ソース
「源」「出所」
文書内に表示する画像やスクリプトなどの場所をURI指定
href hypertext reference
ハイパーテキスト リファレンス
「文書間を結びつける参照」
アンカーの到着点や相対URIの基準となるURIを設定
rel relation
リレーション
「関係」
リンク先の他の文書に対する関係を示す
rev reverse
リバース
「逆」
リンク先の他の文書からの関係を示す
char character
キャラクター
「文字」
表における内容の位置揃え基準となる文字を設定
http-equiv http-equivalent
エイチティーティーピー イクイヴァレント
「http相当」
async asynchronous
アシンクロナス
「非同期」

参考:
https://www.w3.org/TR/html5/
https://developer.mozilla.org/ja/docs/Web/HTML/Element