HTMLコンテンツモデルカテゴリー

HTMLコンテンツモデルカテゴリー

カスタマイズ HTML, CSS, JavaScript
2023/03/29
0
vanillaice (Akira)
vanillaice (Akira)
中級者向けTipsEducationLivingStandard

本記事では 属性 については触れていません。あくまでも 要素 (タグ) のみの言及です。属性については別途まとめ記事を書きたいと思います。

コンテンツモデルカテゴリー

Content model categories

HTML5以降は旧来の『インラインレベル要素』『ブロックレベル要素』という概念は廃止され、新たに2023年現時点で コンテンツカテゴリー として主要7つの区分と、その他いくつかの区分が定められています。

*インライン要素・ブロックレベル要素の考え方が完全に無くなったというわけではなく、CSSのボックスモデルとして扱うようになっています。

新たに設けられた要素カテゴライズは複雑に感じますが、主要カテゴリーは コンテンツカテゴリ(content categories)、その他を二次カテゴリの コンテンツモデル(content models) としてざっくり区別すると理解しやすいかもしれません。

コンテンツカテゴリ

要素の多くは フローコンテンツ に属し、中には複数カテゴリにまたがっているものもあります。

メタデータコンテンツ
(metadata contents)
文書(document)の情報及び、他文書の情報との関係を表す。
head要素内で利用される要素郡。
日本語対訳『メタデータコンテンツ』
フローコンテンツ
(flow contents)
body要素内に入れ子できるほとんどの要素を含む広範分類。
日本語対訳『フローコンテンツ』
セクショニングコンテンツ
(sectioning contents)
文章の区切りや区分などをグループ化する。多くの場合見出しを有している。
日本語対訳『区分コンテンツ』
ヘディングコンテンツ
(heading contents)
セクションの見出しを示す。
日本語対訳『見出しコンテンツ
フレージングコンテンツ
(phrasing contents)
段落など『文章』を形成する際に用いられる要素郡。
旧概念の『インラインレベル要素』はここに含まれる。
日本語対訳『記述コンテンツ』
エンベッディッドコンテンツ
(embeded contents)
画像や動画などを文書内に埋め込む際に利用される。
日本語対訳『埋め込みコンテンツ』
インタラクティブコンテンツ
(interactive contents)
ユーザーが操作可能なコンテンツのマークアップ
日本語対訳『対話型コンテンツ』

コンテンツモデル

この分類については随時追加や削除が行われたり、主要カテゴリに移動したり外されたり… といった特徴があります(最新情報の把握がなかなか難しいカテゴライズだと思います)
ブログ運営上で最も重要なのは transparent content models です。

パルパブルコンテンツ
(palpable contents)
ユーザーが認識できる明瞭なコンテンツ
日本語対訳『知覚可能コンテンツ』
スクリプトサポートエレメント
(script-supporting elements)
当該要素自体は何も表示しないが、
埋め込まれたスクリプトを支援するために使用される要素
日本語対訳『スクリプト支援要素』
トランスペアレントコンテンツモデル
(transparent content models)
親要素のモデルを継承する要素
日本語対訳『透過的コンテンツモデル』

以下はtransparent content models についての大まかな説明です。

<div>
  <a href="https://xxx.html">
    <div>内容</div>
  </a>
</div>

HTML4.01まで

a要素は インラインレベル要素 であり、同じインラインレベル要素しか入れ子が許可されない。div要素は ブロックレベル要素 なので、構文エラーである。

HTML5 〜 Living Standard(現在)

a要素は トランスペアレントコンテンツモデル であり、親要素のモデルを継承する。親のdiv要素は フローコンテンツ なので、子であるa要素もフローコンテンツとなり、かつ、div要素はほとんどの要素を入れ子可能なのでこの場合は正当構文である。

結果、狭いスマートフォン端末でリンク範囲を大きく取ることが可能になりました。この改正は現場の声に答えたという点で功績と言えますね。

コンテンツモデルカテゴリ一覧

各要素が属するカテゴリの一覧です。

要素名
element name
無し(none) metadata flow sectioning heading phrasing embeded interactive palpable script-
supporting
transparent
a flow phrasing interactive
(href属性が有る場合)
palpable transparent
abbr flow phrasing palpable
address flow palpable
area flow phrasing
article flow sectioning palpable
aside flow sectioning palpable
audio flow phrasing embeded interactive
(control属性が有る場合)
palpable
(control属性が有る場合)
transparent
b flow phrasing palpable
base
bdi flow phrasing palpable
bdo flow phrasing palpable
blockquote flow palpable
body none
br flow phrasing
button flow phrasing interactive palpable
canvas flow phrasing embeded palpable transparent
caption none
cite flow phrasing palpable
code flow phrasing palpable
col none
colgroup none
data flow phrasing palpable
datalist flow phrasing
dd none
del flow phrasing transparent
details flow interactive palpable
dfn flow phrasing palpable
dialog flow
div flow palpable
dl flow palpable
(dt, ddを含む場合)
dt none
em flow phrasing palpable
embed flow phrasing embeded interactive palpable
fieldset flow palpable
figcaption none
figure flow palpable
footer flow palpable
form flow palpable
h1, h2, h3
h4, h5, h6
flow heading palpable
head none
header flow palpable
hgroup flow heading palpable
hr flow
html none
i flow phrasing palpable
iframe flow phrasing embeded interactive palpable
img flow phrasing embeded interactive
(usemap属性が
有る場合)
palpable
input flow phrasing interactive
(type="hidden"
で無い場合)
palpable
(type="hidden"
で無い場合)
ins flow phrasing palpable transparent
kbd flow phrasing palpable
label flow phrasing interactive palpable
legend none
li none
link flow
(body要素内の場合)
phrasing
(body要素内の場合)
main flow palpable
map flow phrasing palpable transparent
mark flow phrasing palpable
math flow phrasing embeded palpable
menu flow palpable
(li要素が有る場合)
meta flow
(itemprop属性が
有る場合)
phrasing
(itemprop属性が
有る場合)
meter flow phrasing palpable
nav flow sectioning palpable
noscript flow phrasing transparent
object flow phrasing embeded palpable transparent
ol flow palpable
(li要素を含む場合)
optgroup none
option none
output flow phrasing palpable
p flow palpable
picture flow phrasing embeded
pre flow palpable
progress flow phrasing palpable
q flow phrasing palpable
rp none
rt none
ruby flow phrasing palpable
s flow phrasing palpable
samp flow phrasing palpable
script flow phrasing script-
supporting
section flow sectioning palpable
select flow phrasing interactive palpable
slot flow phrasing transparent
small flow phrasing palpable
source none
span flow phrasing palpable
strong flow phrasing palpable
style
sub flow phrasing palpable
summary none
sup flow phrasing palpable
svg flow phrasing embeded palpable
table flow palpable
tbody none
td none
template flow phrasing script-
supporting
textarea flow phrasing interactive palpable
tfoot none
th none
thead none
time flow phrasing palpable
title
tr none
track none
u flow phrasing palpable
ul flow palpable
(li要素を含む場合)
var flow phrasing palpable
video flow phrasing embeded interactive
(control属性が有る場合)
palpable transparent
wbr flow phrasing

タグ名の読み方

How to read HTML tags.

いくつかの代表的なタグ名の読み方や正称(公式な言及はありませんので、おおよその見当です)などを記しています。

現場では略語を例えば「ぴー(p)」「えるあい(li)」とアルファベットを順にそのまま読んだり、「えむ(em)」と字面発音をしたり、「あんかー(a)」と正称で読んだり、と様々で読み方ルール統一はできないのですが、アルファベット発音なら誰でも簡単にできるという点を踏まえて、覚えてもらいたいのは正称の方です。ほとんどの場合そのタグの用途と正称の英単語そのものの意味とが合致していますので、正称を知ることでタグ使用時に迷う場面を減らせるかもしれません。狭い画面だとちょっと見づらいのでパソコン閲覧を推奨します。

タグ名クリックでサンプルコードと画像を見ることができます。サンプル画像はGoogle Chromeでの様子で、ほとんどがCSSを適用せずデフォルトスタイルのままにしてあります。table要素など整えないとわけがわからないものについては若干のスタイリングを加えています。

* 下記の表ではアルファベット読みは致し方無い場合のみ記載しています。

*『限られた親(または子)』はカテゴリではなく要素が限定されている場合を示します。

*『タグ名』横の『読み方』及びアクセントはアメリカ発音寄りにしています。

*『限定される子要素』『タグ省略』項目の「void」は void element を指します(内容及び終了タグを持てない要素です)

タグ名 (読み方) クリックで使用例
英語正称(日本語カナ)
英語の意味
タグの定義
限定される親要素
限定される子要素
タグ省略
a (あんかー)
anchor んかー
(アンカー)
錨[名], 固定する[動], etc.
リンクの出発点を表し、href属性で到達点を指定
不可
abbr (あばー,
あぶりーゔぃ
えぃしょん)
abbreviation あぶりーゔぃえぃしょん
(アブリビエーション)
略[名], 短縮[動], etc.
略語を示す
不可
address (あどれす)
address あど
(アドレス)
住所[名], 宛先[名], etc.
連絡・問い合わせ先情報を表す
不可
area (えぁりあ)
area えぁりあ
(エリア)
地域[名], 場所[名], etc.
map要素に於いてクリック可能な範囲を指定
map
article (あーてぃこー)
article あーてぃこー
(アーティクル)
記事[名]
独立したひとつのコンテンツを表す
ブログ記事など
不可
<article>
  <h2>記事タイトル</h2>
  <p>記事内容</p>
</article>
aside (あさいどぅ)
aside さいどぅ
(アサイド)
余談[名], 外れて[副], etc.
メインコンテンツに対し補足的なセクションを表す
サイドメニューなど
audio (あーでぃおぅ)
audio あーでぃおぅ
(オーディオ)
音声[名]
音声コンテンツを埋め込む
不可
b (びー)
旧HTMLでは bold
定義変更のため対応単語無し
-
特別なテキスト(他テキストとの区別)
製品名など
不可
base (べいす)
base べい
(ベース)
土台[名], 根元[名], etc.
文書内におけるすべての相対URLの基点を指定
bdi (びーでぃーあい)
bi-directional isolation ばい でぃれくしょなる(or だいれくしょなる)
あいそれいしょん
(バイディレクショナルアイソレーション)
bi-directional = 双方向の[形]
isolation = 隔離[名]
文章の方向を独立させる
(書き出しの左右が異なる言語内で、向きの依存を無くす)
不可
bdo (びーでぃーおぅ)
bi-directional override ばい でぃれくしょなる(or だいれくしょなる)
おぅゔぁらいどぅ
(バイディレクショナルオーバーライド)
bi-directional = 双方向の[形]
override = 優先する[動]
文章の方向を独立させる
(書き出しの左右が異なる言語内で、向きの依存を無くす)
不可
blockquote (ぶろっくくぉうとぅ)
block + quote ぶろっく くぉうとぅ
(ブロッククオート)
block = かたまり[名]
quote = 引用[名]
比較的長い引用文を示す
不可
body (ばでぃ)
body でぃ
(ボディ)
身体[名], 胴体[名], etc.
HTML文書の内容を表す
条件つき可
開始先頭がコメント・script要素・style要素でない場合
終了body要素に内容があり、直後がコメントでない場合
br (ぶれいく)
(line) break いく
(ブレイク)
改行[名]
任意改行(行替え)
button (ばっんー)
button ばっんー
(ボタン)
(衣服や機械の)ボタン[名]
クリックできるボタンを示す
不可
canvas (きゃんゔぁす)
canvas きゃんゔぁす
(キャンバス)
画布[名]
図を描く領域を指定(描画はJSを用いる)
不可
caption (きゃぷしょん)
caption きゃぷしょん
(キャプション)
(画などにつける)短い説明文[名]
表のタイトル
table
終了タグのみ条件つき可
終了直後に空白文字・コメントが無い場合
cite (さいとぅ)
cite さいとぅ
(サイト)
引用する[動]
引用元タイトル及び参照元URLがある場合はそれを示す
不可
code (こうどぅ)
code こうどぅ
(コード)
(文章や記号などの)コード[名]
コンピュータコードの文字列であることを示す
不可
col (かる, からむ)
column らむ
(カラム)
柱[名]
表の垂直方向の列に共通の意味を持たせる
colgroup (かるぐるーぷ,
からむぐるーぷ)
column + group らむ ぐるーぷ
(カラムグループ)
column = 柱[名]
group = 集まり[名]
表の垂直方向の列をグループ化する
table
条件つき可
開始最初の子がcol要素、かつ先行に
終了タグ省略したcolgroup要素が無い場合
終了直後に空白文字・コメントが無い場合
data (でいた or だーた)
data でいた or だー
(データ)
資料[名], 情報[名], etc.
コンピュータが理解可能な形式で情報を記す
不可
datalist (でいたりすとぅ)
data + listでいた りすとぅ
(データリスト)
data = 資料[名], 情報[名], etc.
list = 一覧[名]
選択と同時に入力も可能にする
(select要素とinput要素が合体したような感じ)
不可
dd (でぃーでぃー)
definition description でふぃしょん でぃすくぷしょん
(デフィニションデスクリプション)
definition = 定義[名]
description = 説明[名]
list = 一覧[名]
用語(dt要素)に対する説明を示す
dl またはdl要素の子要素のdiv要素
終了タグのみ条件付き可
終了直後に他のddまたはdtが有る場合
del (でる, でぃりーとぅ)
delete でぃりーとぅ
(デリート)
削除する[動]
文書から削除された範囲を示す
誤情報訂正や情報更新時など軌跡を残すために用いる
不可
details (でぃーているず)
detail(s) でぃーているず
(ディテール(ズ))
詳細[名]
折りたたみ要素
不可
dfn (でふぃにしょん)
definition でふぃしょん
(デフィニション)
定義[名]
文章内で定義される用語を示す
不可
dialog (だいあろぐ)
dialog だいあろぐ
(ダイアログ)
セリフ[名], 会話[名], etc.
ユーザーが操作可能なダイアログボックス
モーダルウィンドウやアラートなど任意で閉じられる
不可
div (でぃゔ)
division でぃゔぃじょん
(ディビジョン)
分割[名], 区分[名], etc.
意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることができる
不可
dl (でぃーえる)
definition list でふぃしょん りすと
(デフィニションリスト)
definition = 定義[名]
list = 一覧[名]
説明リストを示す
dt dd
不可
dt (でぃーてぃー)
definition term でふぃしょん たぁむ
(デフィニションターム)
definition = 定義[名]
term = 用語, 専門用語[名]
説明対象となる用語を示す
dl またはdl要素の子要素のdiv要素
終了タグのみ条件つき可
終了後続にdt要素あるいはdd要素があるか、
または何も無い場合
em (えむ, えんふぁしす)
emphasis えんふぁしす
(エンファシス)
強調[名]
周囲の内容と比較し、強調すべき範囲を示す
不可
embed (えんべっどぅ)
embedえんべっどぅ
(エンベッド)
埋め込む[動]
外部コンテンツを所定の位置に埋め込み表示させる
fieldset (ふぃーるどせっとぅ)
field + set ふぃーるど せっとぅ
(フィールドセット)
field = 領域[名]
フォーム(form要素)の入力項目をグループ化する
不可
figcaption (ふぃぐきゃぷしょん)
figure + caption ふぃぎゅあ きゃぷしょん
(フィギュアキャプション)
figure = 挿絵, 図式[名]
caption = 短い説明文[名]
figure要素に対する短文説明を記す
figure
不可
figure (ふぃぎゅあ)
figure ふぃぎゅあ
(フィギュア)
挿絵, 図式[名]
写真, 挿絵, コードなどのまとまりを表す
不可
footer
(ふったー)
footer ふったー
(フッター)
文書の下部[名]
文書やセクションの下部に配置され、補足情報を示す
不可
form (ふぉーむ)
form ふぉー
(フォーム)
構造[名], 形式[名], etc.
ウェブサーバーに情報を送信するための文書の区間
不可
hx (へでぃんぐ)
heading でぃんぐ
(ヘッディング)
見出し[名], 表題[名], etc.
セクションの見出しを示す
不可
head (へっどぅ)
head へっどぅ
(ヘッド)
頭[名], 上席[名], etc.
文書に関しコンピュータが理解可能な情報を記す
条件つき可
開始最初が要素である場合
終了直後が空白文字・コメントではない場合
header (へだー)
header だー
(ヘッダー)
文書の上部[名]
文書やセクションの上部に配置され、導入情報を示す
不可
hgroup (えいちぐるーぷ,
へだーぐるーぷ)
header + group だーぐるーぷ
(ヘッダーグループ)
header = 文書の上部[名]
group = 集まり[名]
見出しとその関連内容をグループ化する
hx p
不可
hr (えいちあーる)
horizontal + rule ほりぞんたる るーる
(ホリゾンタルルール)
horizontal = 水平の[形]
rule = 罫線[名]
段落要素(p要素)間で意味的区切りを示すための
水平方向線を引く
html (えいちてぃー
えむえる)
hyperText + markup + language
はいぱーてきすと まーくあっぷ んぐうぃっじ
(ハイパーテキストマークアップランゲージ)
hyperText = コンピュータによる文書作成[名]
markup = 意味づけ[名][動]
language = 言語[名]
HTML文書の起点となる
条件つき可
開始最初がコメントではない場合
終了直後がコメントではない場合
i (あい)
旧HTMLでは italic
定義変更のため対応単語無し
-
他のテキストと区別されるテキストの範囲を表す
慣用句, 呼称, 用語, 思考など
不可
iframe
(あいふれぃむ,
いんらいんふれぃむ)
inline + frame いんらいん ふれぃ
(インラインフレーム)
inline = 文書中の[形]
frame = 枠[名]
HTML内に別のHTMLを入れ子する
不可
img (いめーじ)
image めーじ
(イメージ)
画像[名]
画像を示す
input (いんぷっとぅ)
input いんぷっとぅ
(インプット)
入力[名]
ウェブサーバーに情報を送信するための
ユーザーが操作可能なコントロール作成
ins (いんさぁとぅ)
insert いんさぁとぅ
(インサート)
挿入する[動]
文書に追加されたテキストの範囲を表す
不可
kbd (きーぼぉどぅ)
keyboard きーぼぉどぅ
(キーボード)
鍵盤[名]
ユーザーがキーボードで入力するテキストを表す
不可
label (れぃぼぉ)
label れぃぼぉ
(ラベル)
貼り紙[名]
フォーム部品のラベル(端的説明)を表す
不可
legend (れじぇんどぅ)
legend じぇんどぅ
(レジェンド)
説明[名], 凡例[名], etc.
fieldset要素のキャプションを表す
fieldset
不可
li (えるあい, りすとぅ)
list すとぅ
(リスト)
目録[名], 一覧[名]
箇条書きリスト項目
ul ol menu
終了タグのみ条件つき可
終了直後に別のli要素が続くか、何も無しの場合
link
(りんく)
link んく
(リンク)
結びつき[名], 鎖[名], etc.
HTML文書と外部のファイルやページを関連付ける
main (めいん)
main いん
(メイン)
主要な[形]
文書内の主要なコンテンツを表す
不可
map (まぁぷ)
map まぁ
(マップ)
地図[名]
画像上にクリック可能な領域を指定する
不可
mark (まぁく)
mark まぁ
(マーク)
記しを付ける[動]
周囲のテキストと差別して目立たせる
不可
math (まぁす)
math まぁ
(マス)
数学[名]
XMLで記述された数式MathMLを文章中に埋め込む
不可
menu (めにゅー)
menu にゅー
(メニュー)
献立表[名], コンピュータメニュー[名]
ユーザーが実行またはアクティブ化できるコマンドグループ
不可
meta (めた)
metadata たでいた
(メタデータ)
データに関する属性情報を記述するデータ[名]
Webページのメタデータを検索エンジンや
ブラウザに認識させる
meter (みーたぁ)
meter みーたぁ
(メーター)
計器[名]
下限や上限など規定範囲内の測定値を示す
不可
nav (なゔ)
navigation なゔぃげぃしょん
(ナビゲーション)
航海[名], 走行指示[名], etc.
文書内の他部位や他の文書へのリンクの集合体
不可
noscript (のぅすくりぷとぅ)
no + script のぅ すくぷとぅ
(ノースクリプト)
no = 無い[形]
script = 可読性の高いプログラミング言語
スクリプト(script要素)が諸事情により
実行されない場合の代替情報を示す
不可
object (あぶじぇくとぅ)
object ぶじぇくとぅ
(オブジェクト)
物体[名]
HTML文書内に埋め込まれる外部リソース
不可
ol (おーえる)
ordered + list おぅだどぅ りすとぅ
(オーダードリスト)
ordered = 順序の有る[形]
list = 一覧[名]
順序・序列を持つリスト
li script template
不可
optgroup (あぷしょんぐるーぷ)
option + group あぷしょん ぐるーぷ
(オプショングループ)
option = 選択肢[形]
group = 集合体[名]
select要素内でoption要素をグループ化する
select
option
不可
option (あぷしょん)
option あぷしょん
(オプション)
選択肢[形]
select要素内の選択肢
select optgroup
不可
output (あうとぅぷっとぅ)
output あうとぅぷっとぅ
(アウトプット)
生産[名]
計算結果やユーザー操作の結果を挿入する
不可
p (ぴー)
paragraph らぐらふ
(パラグラフ)
段落[名]
文章段落を構成する
不可
picture (ぴくちゃ)
picture ぴくちゃ
(ピクチャー)
写真[名], 絵画[名], グラフ[名], etc.
ユーザーの閲覧環境に応じて最適な画像を表示させる
source img
不可
pre (ぷりぃ)
preformatted text ぷりぃふぉーまてぃどぅ てくすとぅ
(プレフォーマットテキスト)
preformatted = 整形済みの[形]
text = 文書[名]
改行文字や空白文字によって整形されているテキスト
ソースコードなどの見た目をそのまま表示させる
不可
progress (ぷろぐれす)
progress ぐれす
(プログレス)
進歩[名]
タスクの進捗状況を表示する
不可
q (くぉうとぅ)
quoteくぉうとぅ
(クオート)
引用[名]
比較的短い引用文を示す
不可
rp (あーるぴー)
ruby parentheses るーびー ぱぁれんさしぃず
(ルビパレンセシス)
ruby = 振り仮名[名]
parentheses = 括弧[名]
ルビテキストを囲む括弧を示す
(ルビ非対応ブラウザのためのフォールバック)
終了タグのみ条件つき可
終了直後にrtまたは別のrpが続くか、何も無しの場合
rt (あーるてぃー)
ruby text るーびー くすとぅ
(ルビテキスト)
ruby = 振り仮名[名]
text = 文章[名]
ルビテキスト(ルビにあたる文字列)を示す
終了タグのみ条件つき可
終了直後にrpまたは別のrtが続くか、何も無しの場合
ruby (るーびー)
ruby るーびー
(ルビ)
振り仮名[名]
ルビテキスト(テキストに振り仮名を振る)を示す
ruby
不可
s (えす)
旧HTMLでは strike
定義変更のため対応単語無し
-
既に正確でなくなった情報を示す
(訂正や削除せず情報として残しておく)
不可
samp (さんぽぉ)
sample さんぽぉ
(サンプル)
見本[名]
コンピュータープログラムからのサンプル出力を表す
確認・エラーメッセージなど
不可
script (すくりぷとぅ)
script すくぷとぅ
(スクリプト)
可読性の高いプログラミング言語[名]
実行できるコードやデータを埋め込む
JavaScriptなど
不可
section (せくしょん)
section せくしょん
(セクション)
節[名], 区間[名], etc.
文書の自立した意味的な1つのまとまり
不可
select (せれくとぅ)
select くとぅ
(セレクト)
選択する[動]
フォームの選択式メニューを表す
option optgroup
不可
slot (すらぁとぅ)
slot らぁとぅ
(スロット)
差し込み口[名]
親コンポーネントから子コンポーネントの
DOMツリーを差し込む
component = 構成要素
主に template
不可
small (すもーる)
small もー
(スモール)
小さな[形]
著作権表示や法的表記など注釈など
一般的に小さく表示される文を表す
不可
source (そーす)
source そー
(ソース)
源[名], 情報元[名], etc.
メディアまたは画像の情報元
audio video picture
span (すぱん)
span
(スパン)
AからBまでの距離[名],
長さ[名], etc.
意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることはできない
不可
strong (すとぅろんぐ)
strong すとぅろん
(ストロング)
強い[形], 強固な[形], etc.
重要性・重大・緊急性が高いテキストを示す
不可
style (すたいる)
style たい
(スタイル)
様式[名]
文書あるいは文書の一部分のスタイル情報を記す
不可
sub (さぶ)
subscript ぶすくりぷとぅ
(サブスクリプト)
下付き文字[名]
下付き文字を示す
不可
summary (さまりぃ)
summary まりぃ
(サマリー)
要約[名]
開閉式ウィジェット(details要素)の
キャプション, 要約, 説明文などを表す
details
不可
sup
(さぷ)
superscript すーぱーすくりぷとぅ
(サマリー)
上付き文字[名]
上付き文字を示す
不可
svg (えすゔぃーじー)
scalable vector graphics すけいらぼぉ ゔぇくたー ぐふぃくす
(スケーラブルベクターグラフィック(ス))
scalable = 伸縮可能な[形]
vector = ベクター形式[名]
graphics = 図形[名]
SVGをHTMLにインラインで埋め込む
不可
table (ていぼぉ)
table ていぼぉ
(テーブル)
表[名], 目録[名], etc.
表全体を表す
caption colgroup thead tbody tr tfoot
不可
tbody (てぃーぼでぃ)
table body ていぼぉ でぃ
(テーブルボディ)
table = 表[名], 目録[名], etc.
body = 本体[名], etc.
表の中身, 本体を示す
table
tr
条件つき可
開始終了同table内にtheadが無い場合
td (てぃーでぃー)
table data ていぼぉ いた
(テーブルデータ)
table = 表[名], 目録[名], etc.
data = 情報[名]
情報を記すセルを定義
tr
終了タグのみ条件つき可
終了直後にtrかtdが有るか、何も無しの場合
template (てんぷれぃとぅ)
template てんぷれぃとぅ
(テンプレート)
定形書式[名], 指針[名], etc.
後からJavaScriptで挿入したいコンテンツ領域を保持する
不可
textarea (てくすとぅえぁりあ)
text + area てくすとぅ えぁりあ
(テキストエリア)
text = 文章[名]
area = 地域[名], 場所[名], etc.
フォーム内で複数行の入力ができるエリアを作成する
不可
tfoot (てぃーふっとぅ)
table + footer てぃぼぉ ったー
(テーブルフッター)
table = 表[名]
footer = 脚注[名], 最下部[名], etc.
データの下部にあり補足情報などを記す
table
tr
終了タグのみ条件つき可
終了後続に何も無い場合
th (てぃーえいち)
table + header ( + cell) ていぼぉ へっだー
(テーブルヘッダーセル)
table = 表[名], 目録[名], etc.
header = 見出し[名]
cell = 小部屋, 小区画[名]
各セル見出し
tr
終了タグのみ条件つき可
終了直後にthかtdがあるか、何も無しの場合
thead (てぃーへっどぅ)
table + header (+ group) ていぼぉ へっだー ぐーぷ
(テーブルヘッダーグループ)
table = 表[名]
header = 見出し[名]
group = 集合体[名]
データの先頭情報を示す
(水平方向グループ化)
table
tr
終了タグのみ条件つき可
終了直後にtbodyかtfootがある場合
time (たいむ)
time たい
(タイム)
時間[名]
日付や時刻を表す
不可
title (たいとる)
title たいとる
(タイトル)
題名[名]
そのページのタイトルを表す
タイトルバーやタブに表記される
head
不可
tr (てぃーあーる)
table row
ていぼぉ
(テーブルロウ)
table = 表[名]
row = 並び[名]
表の水平方向の列を定義
table
td th
終了タグのみ条件つき可
終了直後にtrがある場合、または何も無い場合
track (とぅらく)
text + track てくすとぅ とぅ
(トラック)
text = 文章[名]
track = 軌跡[名]
音声・動画ファイルに字幕などのテキストトラックを埋め込む
audio video
u (ゆぅ)
旧HTMLでは underlined text
定義変更のため対応単語無し
-
伝わりづらいテキストやスペルミスのあるテキストなどを示す
不可
ul (ゆぅえる)
unordered list あんおぅだどぅ りすとぅ
(アンオーダードリスト)
unordered = 順序の無い[形]
list = 一覧[名]
順序・序列を持たないリスト
li
不可
var (ゔぁー, ゔぇりあぼぉ)
variable ゔぇりあぼぉ
(バリアブル)
可変の[形], 変数[名], etc.
プログラムや数学などの変数や定数を示す
不可
video (ゔぃでぃおぅ)
video ゔぃでぃおぅ
(ビデオ)
映像[名], 動画[名], etc.
動画再生に対応するメディアプレイヤーを埋め込む
source track
不可
wbr (わぁどぅぶれいく)
word + break わぉどぅ ぶれい
(ワードブレイク)
改行[名]
ブラウザに任意改行を許可する位置を指定する

入れ子で間違えやすいもの

Common nesting mistakes in HTML.

頻繁とは言いませんが、これまでにFC2ブログ上で見たことのある 入れ子 (nesting ねすてぃんぐ) の間違い例をあげておこうと思います。タグの位置や数の整合性ではなく、『入れ子できない要素を入れてしまった』という例です。

p要素の入れ子ミス

p要素内にp要素

<p>おはようございます。
  <p>こんばんは。</p>
</p>

p要素内にdiv要素

<p>おはようございます。
  <div>こんばんは。</div>
</p>

p要素内にspan要素

<p>おはようございます。
  <span>こんばんは。</span>
</p>

p要素の子要素として許可されるのは phrasing contents (フレージングコンテンツ) のみです。

ulまたはol要素の入れ子ミス

ul要素の子要素にp要素(またはdiv, span要素など)

<ul>
  <p>買い物リスト</p>
  <li>みかん</li>
  <li>りんご</li>
  <li>にんじん</li>
  <li>小麦粉</li>
</ul>

ul要素の外にp要素(兄弟要素)

<p>買い物リスト</p>
<ul>  
  <li>みかん</li>
  <li>りんご</li>
  <li>にんじん</li>
  <li>小麦粉</li>
</ul>

ul要素の子要素として許可されるのは li要素 のみです。
* script, template要素も入れられますが使用頻度は高くありません。ブログ記事執筆ではまず使わないと思います。

サンプルケースの入れ子が 子要素 という点にも留意してください。例えば

<ul>
  <li>
    <div>みかん</div>
  </li>
  <li>
    <div>りんご</div>
  </li>
  <li>
    <div>にんじん</div>
  </li>
  <li>
    <div>小麦粉</div>
  </li>
</ul>

上記は ul要素内に div要素 が見受けられますが、このdivはulから見て子ではなく にあたります。孫であるdivの親は li要素 なので、liの入れ子ルールに従う必要があります。上記の場合は正当構文です。ここが理解できれば以下のケースもわかると思います。

ul要素の子要素にa要素

<ul>  
  <a href="https://xxx.html"><li>みかん</li></a>
  <a href="https://xxx2.html"><li>りんご</li></a>
  <a href="https://xxx3.html"><li>にんじん</li></a>
  <a href="https://xxx4.html"><li>小麦粉</li></a>
</ul>

ul要素の孫要素にa要素

<ul>  
  <li><a href="https://xxx.html">みかん</a></li>
  <li><a href="https://xxx2.html">りんご</a></li>
  <li><a href="https://xxx3.html">にんじん</a></li>
  <li><a href="https://xxx4.html">小麦粉</a></li>
</ul>

最後に

非推奨や廃止予定から逆転返り咲きを果たした要素(embedやmenuなど)もあり、今後の変遷も考えられますが現時点ではこのような感じです。FC2ブログでよく見かける center font marquee といったタグがリストに無いことに注目してください。リストに無いということは 廃止されたので使ってはいけない ということです。

こんな記事を書いたからといってなにも「HTMLを使いなさい」と言っているわけではありません。通常のブログ運営では『見たまま編集』で準備されているツールで十分ではないかと思います。ただ、HTML4時代になんとなく覚えた書き方について自身でチェックする機会になれば良いかな、と思います。

というわけで本記事では 要素 とそれぞれのカテゴライズについてまとめました。属性 については後日別途記事でまとめたいと考えています。

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)