はじめに
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