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

カスタマイズ HTML, CSS, JavaScript

2023/03/29

2023/03/29 0

vanillaice (Akira)

中級者向け Tips Education LivingStandard

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

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

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		metadata
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		metadata	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		metadata	flow (itemprop属性が有る場合)			phrasing (itemprop属性が有る場合)
meter			flow			phrasing			palpable
nav			flow	sectioning					palpable
noscript		metadata	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		metadata	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		metadata
sub			flow			phrasing			palpable
summary	none
sup			flow			phrasing			palpable
svg			flow			phrasing	embeded		palpable
table			flow						palpable
tbody	none
td	none
template		metadata	flow			phrasing				script- supporting
textarea			flow			phrasing		interactive	palpable
tfoot	none
th	none
thead	none
time			flow			phrasing			palpable
title		metadata
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.; 連絡・問い合わせ先情報を表す; 不可

<address>
  <a href="mailto:xxx@mail.com">xxx@mail.com</a><br>
  <a href="tel:+1234567890">(123) 456-7890</a>
</address>

area (えぁりあ): area えぁりあ
(エリア); 地域[名], 場所[名], etc.; map要素に於いてクリック可能な範囲を指定; map

<map name="infographic">
  <area shape="poly" coords="129,0,260,95,129,138">
  <area shape="poly" coords="260,96,209,249,130,138">
  <area shape="poly" coords="209,249,49,249,130,139">
  <area shape="poly" coords="48,249,0,96,129,138">
  <area shape="poly" coords="0,95,128,0,128,137">
</map>
<img usemap="#infographic" src="https://sample.png" alt="sample">

article (あーてぃこー): article あーてぃこー
(アーティクル); 記事[名]; 独立したひとつのコンテンツを表す
ブログ記事など; 不可

aside (あさいどぅ): aside あさいどぅ
(アサイド); 余談[名], 外れて[副], etc.; メインコンテンツに対し補足的なセクションを表す
サイドメニューなど

audio (あーでぃおぅ): audio あーでぃおぅ
(オーディオ); 音声[名]; 音声コンテンツを埋め込む; 不可

b (びー): 旧HTMLでは bold
定義変更のため対応単語無し; -; 特別なテキスト(他テキストとの区別)
製品名など; 不可

base (べいす): base べいす
(ベース); 土台[名], 根元[名], etc.; 文書内におけるすべての相対URLの基点を指定

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <base href="https://xxx.com/index.html"><!-- link要素よりも前に -->
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>テスト</title>
  </head>

  <body>
  内容
  </body>

</html>

bdi (びーでぃーあい): bi-directional isolation ばいでぃれくしょなる(or だいれくしょなる)
あいそれいしょん
(バイディレクショナルアイソレーション); bi-directional = 双方向の[形]
isolation = 隔離[名]; 文章の方向を独立させる
(書き出しの左右が異なる言語内で、向きの依存を無くす); 不可

<p>受賞者一覧</p>

<ul>
  <li>John Dow: 1位
  <li><bdi>عَلَاء الدِّينِ مُحَمَّد أَحْمَد</bdi>: 2位</li><!-- bdiが無いと コロン(orセミコロン)+数字 で記述順序が入れ替わってしまう -->
</ul>

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を用いる); 不可

<canvas width="300" height="300">キャンバスの表示内容を説明する代替テキストです。</canvas>

  <script>
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 100, 100);
</script>

caption (きゃぷしょん): caption きゃぷしょん
(キャプション); (画などにつける)短い説明文[名]; 表のタイトル; table; 終了タグのみ条件つき可
終了直後に空白文字・コメントが無い場合

<table>
<caption>この表のタイトルです</caption>
<tr>
  <th>縦セルヘッダー1</th>
  <th>縦セルヘッダー2</th>
</tr>
<tr>
  <td>セル</td>
  <td>セル</td>
</tr>
<tr>
  <td>セル</td>
  <td>セル</td>
</tr>
</table>

cite (さいとぅ): cite さいとぅ
(サイト); 引用する[動]; 引用元タイトル及び参照元URLがある場合はそれを示す; 不可

code (こうどぅ): code こうどぅ
(コード); (文章や記号などの)コード[名]; コンピュータコードの文字列であることを示す; 不可

col (かる, からむ): column からむ
(カラム); 柱[名]; 表の垂直方向の列に共通の意味を持たせる

<style>
.titan {
  background: #ffe0e0;
}
.slayer {
  background: #e5ffcc
}
</style>

<table>
  <colgroup>
    <col>
    <col span="2" class="titan"><!-- 進撃の巨人グループ -->
    <col span="2" class="slayer"><!-- 鬼滅の刃グループ -->
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">エレン・イェーガー</th><!-- 進撃 -->
    <th scope="col">テオ・マガト</th><!-- 進撃 -->
    <th scope="col">竈門炭治郎</th><!-- 鬼滅 -->
    <th scope="col">鬼舞辻無惨</th><!-- 鬼滅 -->
  </tr>
  <tr>
    <th scope="row">人種</th>
    <td>エルディア人</td><!-- 進撃 -->
    <td>マーレ人</td><!-- 進撃 -->
    <td>日本人</td><!-- 鬼滅 -->
    <td>日本人</td><!-- 鬼滅 -->
  </tr>
</table>

colgroup (かるぐるーぷ, からむぐるーぷ): column + group からむぐるーぷ
(カラムグループ); column = 柱[名]
group = 集まり[名]; 表の垂直方向の列をグループ化する; table; 条件つき可
開始最初の子がcol要素、かつ先行に
終了タグ省略したcolgroup要素が無い場合
終了直後に空白文字・コメントが無い場合

<style>
.titan {
  background: #ffe0e0;
}
.slayer {
  background: #e5ffcc
}
</style>

<table>
  <colgroup>
    <col>
    <col span="2" class="titan"><!-- 進撃の巨人グループ -->
    <col span="2" class="slayer"><!-- 鬼滅の刃グループ -->
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">エレン・イェーガー</th><!-- 進撃 -->
    <th scope="col">テオ・マガト</th><!-- 進撃 -->
    <th scope="col">竈門炭治郎</th><!-- 鬼滅 -->
    <th scope="col">鬼舞辻無惨</th><!-- 鬼滅 -->
  </tr>
  <tr>
    <th scope="row">人種</th>
    <td>エルディア人</td><!-- 進撃 -->
    <td>マーレ人</td><!-- 進撃 -->
    <td>日本人</td><!-- 鬼滅 -->
    <td>日本人</td><!-- 鬼滅 -->
  </tr>
</table>

data (でいた or だーた): data でいた or だーた
(データ); 資料[名], 情報[名], etc.; コンピュータが理解可能な形式で情報を記す; 不可

<p>出荷リスト</p>

<dl>
  <dt>りんご</dt>
  <dd><data value="1200">1200箱</data></dd>
  <dt>みかん</dt>
  <dd><data value="1168">1168箱</data></dd>
</dl>

datalist (でいたりすとぅ): data + listでいたりすとぅ
(データリスト); data = 資料[名], 情報[名], etc.
list = 一覧[名]; 選択と同時に入力も可能にする
(select要素とinput要素が合体したような感じ); 不可

<label for="choices">好きな色を選んでください。</label>
<input list="flavorite-color" id="color-choice" name="color-choice">

<datalist id="flavorite-color"><!-- 選択肢に該当が無い場合は入力できる -->
  <option value="white">
  <option value="black">
  <option value="green">
  <option value="blue">
</datalist>

dd (でぃーでぃー): definition description でふぃにしょんでぃすくりぷしょん
(デフィニションデスクリプション); definition = 定義[名]
description = 説明[名]
list = 一覧[名]; 用語(dt要素)に対する説明を示す; dl またはdl要素の子要素のdiv要素; 終了タグのみ条件付き可
終了直後に他のddまたはdtが有る場合

<dl>
  <dt>定義される名称</dt>
  <dd>名称に対する定義1</dd>
  <dd>
    <div>名称に対する定義2</div>
  </dd>
</dl>

del (でる, でぃりーとぅ): delete でぃりーとぅ
(デリート); 削除する[動]; 文書から削除された範囲を示す
誤情報訂正や情報更新時など軌跡を残すために用いる; 不可

<p><del>音楽イベントが2000年4月に開催されます。</del><ins>このイベントは終了しました。</ins></p>

details (でぃーているず): detail(s) でぃーているず
(ディテール(ズ)); 詳細[名]; 折りたたみ要素; 不可

<details>
  <summary>展開する</summary>
  <p>この文章は詳細内容です。</p>
</details>

dfn (でふぃにしょん): definition でふぃにしょん
(デフィニション); 定義[名]; 文章内で定義される用語を示す; 不可

<p><dfn>モジョ・ジョジョ</dfn>とは、アニメ『パワーパフガールズ』のキャラクターである。</p>

dialog (だいあろぐ): dialog だいあろぐ
(ダイアログ); セリフ[名], 会話[名], etc.; ユーザーが操作可能なダイアログボックス
モーダルウィンドウやアラートなど任意で閉じられる; 不可

<dialog id="alert">
  <p>これはダイアログです。</p>
  <button type="button" onclick="document.getElementById('alert').close();">ダイアログを閉じる</button>
</dialog>

<button type="button" onclick="document.getElementById('alert').show();">ダイアログを表示</button>

div (でぃゔ): division でぃゔぃじょん
(ディビジョン); 分割[名], 区分[名], etc.; 意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることができる; 不可

dl (でぃーえる): definition list でふぃにしょんりすと
(デフィニションリスト); definition = 定義[名]
list = 一覧[名]; 説明リストを示す; dt dd; 不可

<dl>
  <dt>定義される名称</dt>
  <dd>名称に対する定義1</dd>
  <dd>
    <div>名称に対する定義2</div>
  </dd>
</dl>

dt (でぃーてぃー): definition term でふぃにしょんたぁむ
(デフィニションターム); definition = 定義[名]
term = 用語, 専門用語[名]; 説明対象となる用語を示す; dl またはdl要素の子要素のdiv要素; 終了タグのみ条件つき可
終了後続にdt要素あるいはdd要素があるか、
または何も無い場合

<dl>
  <dt>定義される名称</dt>
  <dd>名称に対する定義1</dd>
  <dd>
    <div>名称に対する定義2</div>
  </dd>
</dl>

em (えむ, えんふぁしす): emphasis えんふぁしす
(エンファシス); 強調[名]; 周囲の内容と比較し、強調すべき範囲を示す; 不可

embed (えんべっどぅ): embedえんべっどぅ
(エンベッド); 埋め込む[動]; 外部コンテンツを所定の位置に埋め込み表示させる

fieldset (ふぃーるどせっとぅ): field + set ふぃーるどせっとぅ
(フィールドセット); field = 領域[名]; フォーム(form要素)の入力項目をグループ化する; 不可

<form>
  <fieldset>
    <legend>あなたが行きたい国は？</legend>

    <input type="radio" id="america" name="country" value="A">
    <label for="america">America</label><br>

    <input type="radio" id="england" name="country" value="E">
    <label for="england">England</label><br>

    <input type="radio" id="italy" name="country" value="I">
    <label for="italy">Italy</label>
  </fieldset>
</form>

figcaption (ふぃぐきゃぷしょん): figure + caption ふぃぎゅあきゃぷしょん
(フィギュアキャプション); figure = 挿絵, 図式[名]
caption = 短い説明文[名]; figure要素に対する短文説明を記す; figure; 不可

<figure>
  <img src="https://sample.png" width="900" height="599" alt>
  <figcaption>森の小径</figcaption>
</figure>

figure (ふぃぎゅあ): figure ふぃぎゅあ
(フィギュア); 挿絵, 図式[名]; 写真, 挿絵, コードなどのまとまりを表す; 不可

<figure>
  <img src="https://sample.png" width="900" height="599" alt>
  <figcaption>森の小径</figcaption>
</figure>

footer (ふったー): footer ふったー
(フッター); 文書の下部[名]; 文書やセクションの下部に配置され、補足情報を示す; 不可

form (ふぉーむ): form ふぉーむ
(フォーム); 構造[名], 形式[名], etc.; ウェブサーバーに情報を送信するための文書の区間; 不可

<form action="" method="get">
  <div>
    <label for="name">お名前: </label>
    <input type="text" name="name" id="name" required>
  </div>

  <div>
    <label for="email">メール: </label>
    <input type="email" name="email" id="email" required>
  </div>

  <div style="margin-top: 20px;">
    <input type="submit" value="送信">
  </div>
</form>

hx (へでぃんぐ): heading へでぃんぐ
(ヘッディング); 見出し[名], 表題[名], etc.; セクションの見出しを示す; 不可

<article>
  <!-- 以下のインデントは通常の入れ子状態を表すのではなくhレベルをわかりやすくするためのものです -->
  <h1>宮沢 賢治</h1>
    <h2>代表作</h2>

      <h3>童話</h3>
        <h4>注文の多い料理店</h4>
        <h4>銀河鉄道の夜</h4>

      <h3>詩</h3>
        <h4>雨ニモマケズ</h4>
</article>

head (へっどぅ): head へっどぅ
(ヘッド); 頭[名], 上席[名], etc.; 文書に関しコンピュータが理解可能な情報を記す; 条件つき可
開始最初が要素である場合
終了直後が空白文字・コメントではない場合

header (へだー): header へだー
(ヘッダー); 文書の上部[名]; 文書やセクションの上部に配置され、導入情報を示す; 不可

<header>
  <a href="https://xxx.com">XYZ Architect</a>
</header>

<article>
  <header>
    <h1>内覧会開催について</h1>
    <time>2022.10.10</time>
  </header>
  <p>竹内様邸が完工致しました。内装のご紹介及び内覧会のお知らせです。</p>
</article>

hgroup (えいちぐるーぷ, へだーぐるーぷ): header + group へだーぐるーぷ
(ヘッダーグループ); header = 文書の上部[名]
group = 集まり[名]; 見出しとその関連内容をグループ化する; hx p; 不可

<hgroup>
  <h1>メイドインアビス</h1>
  <p>第一話 大穴の街オース</p>
</hgroup>

<blockquote>
  <p>巨大な大穴『アビス』の縁に築かれた街、『オース』で暮らす探窟家見習いの少女・リコ。ある日、探窟中に孤児院の仲間の少年・ナットが巨大な蛇状の生物「ベニクチナワ」に襲われているところに遭遇する。とっさの機転で注意を逸らしたリコだったが、今度は自分がベニクチナワに襲われてしまう。絶体絶命のその瞬間、突然辺りが閃光と轟音に包まれて・・・。</p>
</blockquote>

hr (えいちあーる): horizontal + rule ほりぞんたるるーる
(ホリゾンタルルール); horizontal = 水平の[形]
rule = 罫線[名]; 段落要素(p要素)間で意味的区切りを示すための
水平方向線を引く

<h1>スポーツマンシップ</h1>

<p>Respect: 相手、仲間、ルール、審判などに対する尊重</p>

<hr>

<p>Challenge: リスクを恐れず、責任を持って決断する勇気</p>

<hr>

<p>Enjoy: 勝利をめざし、自ら全力を尽くして愉しみぬく覚悟</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 いんさぁとぅ
(インサート); 挿入する[動]; 文書に追加されたテキストの範囲を表す; 不可

<p><del>音楽イベントが2000年4月に開催されます。</del><ins>このイベントは終了しました。</ins></p>

kbd (きーぼぉどぅ): keyboard きーぼぉどぅ
(キーボード); 鍵盤[名]; ユーザーがキーボードで入力するテキストを表す; 不可

<p><kbd><kbd class="keyboard">Ctrl</kbd> + <kbd class="keyboard">F</kbd></kbd> キーでページ内検索できます。</p>

label (れぃぼぉ): label れぃぼぉ
(ラベル); 貼り紙[名]; フォーム部品のラベル(端的説明)を表す; 不可

legend (れじぇんどぅ): legend れじぇんどぅ
(レジェンド); 説明[名], 凡例[名], etc.; fieldset要素のキャプションを表す; fieldset; 不可

<form>
  <fieldset>
    <legend>あなたが行きたい国は？</legend>

    <input type="radio" id="america" name="country" value="A">
    <label for="america">America</label><br>

    <input type="radio" id="england" name="country" value="E">
    <label for="england">England</label><br>

    <input type="radio" id="italy" name="country" value="I">
    <label for="italy">Italy</label>
  </fieldset>
</form>

li (えるあい, りすとぅ): list りすとぅ
(リスト); 目録[名], 一覧[名]; 箇条書きリスト項目; ul ol menu; 終了タグのみ条件つき可
終了直後に別のli要素が続くか、何も無しの場合

link (りんく): link りんく
(リンク); 結びつき[名], 鎖[名], etc.; HTML文書と外部のファイルやページを関連付ける

<!DOCTYPE html>
<html lang="ja">

  <head>
  <link href="main_style.css" rel="stylesheet">
  内容
  </head>

  <body>
    <link href="sub_style.css" rel="stylesheet">
    <p>link要素はbodyの子要素にもできます。</p>
  </body>

</html>

main (めいん): main めいん
(メイン); 主要な[形]; 文書内の主要なコンテンツを表す; 不可

map (まぁぷ): map まぁぷ
(マップ); 地図[名]; 画像上にクリック可能な領域を指定する; 不可

<map name="infographic">
  <area shape="poly" coords="129,0,260,95,129,138">
  <area shape="poly" coords="260,96,209,249,130,138">
  <area shape="poly" coords="209,249,49,249,130,139">
  <area shape="poly" coords="48,249,0,96,129,138">
  <area shape="poly" coords="0,95,128,0,128,137">
</map>
<img usemap="#infographic" src="https://sample.png" alt="sample">

mark (まぁく): mark まぁく
(マーク); 記しを付ける[動]; 周囲のテキストと差別して目立たせる; 不可

math (まぁす): math まぁす
(マス); 数学[名]; XMLで記述された数式MathMLを文章中に埋め込む; 不可

<!DOCTYPE html>
<html>
<head>
  <title>MathML in HTML5</title>
</head>
<body>

<math>
  <mrow>
    <mrow>
      <msup>
        <mi>a</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mi>b</mi>
        <mn>2</mn>
      </msup>
    </mrow>
    <mo>=</mo>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

</body>
</html>

menu (めにゅー): menu めにゅー
(メニュー); 献立表[名], コンピュータメニュー[名]; ユーザーが実行またはアクティブ化できるコマンドグループ; 不可

<menu>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">カット</button></li>
  <li><button onclick="paste()">ペースト</button></li>
</menu>

meta (めた): metadata めたでいた
(メタデータ); データに関する属性情報を記述するデータ[名]; Webページのメタデータを検索エンジンや
ブラウザに認識させる

meter (みーたぁ): meter みーたぁ
(メーター); 計器[名]; 下限や上限など規定範囲内の測定値を示す; 不可

<div>
  <meter id="userA" min="0" max="100" high="80" optimum="100" value="90">90/100</meter>
  <label for="userA"> user A</label>
</div>

<div>
  <meter id="userB" min="0" max="100" high="80" optimum="100" value="70">70/100</meter>
  <label for="userB"> user B</label>
</div>

<div>
  <meter id="userC" min="0" max="100" high="80" optimum="100" value="30">30/100</meter>
  <label for="userC"> user C</label>
</div>

nav (なゔ): navigation なゔぃげぃしょん
(ナビゲーション); 航海[名], 走行指示[名], etc.; 文書内の他部位や他の文書へのリンクの集合体; 不可

<nav>
  <ul>
    <li><a href="https://index.html">TOPへ</a></li>
    <li><a href="https://category.html">カテゴリ一覧へ</a></li>
    <li><a href="https://contact.html">お問い合わせ</a></li>
  </ul>
</nav>

noscript (のぅすくりぷとぅ): no + script のぅすくりぷとぅ
(ノースクリプト); no = 無い[形]
script = 可読性の高いプログラミング言語; スクリプト(script要素)が諸事情により
実行されない場合の代替情報を示す; 不可

<script>
let hoo = document.createElement('p');
hoo.innerHTML = 'Hello world';
document.body.appendChild(hoo);
</script>

<noscript>
  <p>注意) JavaScriptを有効にしてください</p>
</noscript>

object (あぶじぇくとぅ): object あぶじぇくとぅ
(オブジェクト); 物体[名]; HTML文書内に埋め込まれる外部リソース; 不可

<object data="https://sample.jpg" width="400" height="266">画像を表示できません</object>

ol (おーえる): ordered + list おぅだどぅりすとぅ
(オーダードリスト); ordered = 順序の有る[形]
list = 一覧[名]; 順序・序列を持つリスト; li script template; 不可

<p>人口の多い国TOP3</p>

<ol>
  <li>中華人民共和国</li>
  <li>インド</li>
  <li>アメリカ合衆国</li>
</ol>

optgroup (あぷしょんぐるーぷ): option + group あぷしょんぐるーぷ
(オプショングループ); option = 選択肢[形]
group = 集合体[名]; select要素内でoption要素をグループ化する; select; option; 不可

<label for="try-living">住みたい場所は？</label>
<select id="try-living">
  <optgroup label="アジア">
    <option>日本</option>
    <option>中国</option>
    <option>タイ</option>
  </optgroup>
  <optgroup label="ヨーロッパ">
    <option>イギリス</option>
    <option>イタリア</option>
    <option>ドイツ</option>
  </optgroup>
</select>

option (あぷしょん): option あぷしょん
(オプション); 選択肢[形]; select要素内の選択肢; select optgroup; 不可

<label for="pet-select">ペット</label>

<select id="pet-select">
  <option value="">オプションを選択</option>
  <option value="dog">犬</option>
  <option value="cat">猫</option>
  <option value="hamster">その他</option>
</select>

output (あうとぅぷっとぅ): output あうとぅぷっとぅ
(アウトプット); 生産[名]; 計算結果やユーザー操作の結果を挿入する; 不可

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50"> +
  <input type="number" id="a" name="a" value="10"> =
  <output name="result" for="a b">60</output>
</form>

p (ぴー): paragraph ぱらぐらふ
(パラグラフ); 段落[名]; 文章段落を構成する; 不可

picture (ぴくちゃ): picture ぴくちゃ
(ピクチャー); 写真[名], 絵画[名], グラフ[名], etc.; ユーザーの閲覧環境に応じて最適な画像を表示させる; source img; 不可

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>


<picture>
  <source srcset="タブレット・PC用画像アドレス" width="900" height="600" media="(min-width: 768px)"><!-- 768px以上 -->
  <img src="スマホ用画像アドレス" width="300" height="200" alt="代替テキスト"><!-- 0から767pxまで(スマホ) -->
</picture>

pre (ぷりぃ): preformatted text ぷりぃふぉーまてぃどぅてくすとぅ
(プレフォーマットテキスト); preformatted = 整形済みの[形]
text = 文書[名]; 改行文字や空白文字によって整形されているテキスト
ソースコードなどの見た目をそのまま表示させる; 不可

progress (ぷろぐれす): progress ぷろぐれす
(プログレス); 進歩[名]; タスクの進捗状況を表示する; 不可

q (くぉうとぅ): quoteくぉうとぅ
(クオート); 引用[名]; 比較的短い引用文を示す; 不可

<p>当社の質問に対しA氏は<q cite="引用元URL">事態の打開には時間が必要</q>と答えている。</p>

rp (あーるぴー): ruby parentheses るーびーぱぁれんさしぃず
(ルビパレンセシス); ruby = 振り仮名[名]
parentheses = 括弧[名]; ルビテキストを囲む括弧を示す
(ルビ非対応ブラウザのためのフォールバック); 終了タグのみ条件つき可
終了直後にrtまたは別のrpが続くか、何も無しの場合

<ruby>
薔<rp>(</rp><rt>ば</rt><rp>)</rp>
薇<rp>(</rp><rt>ら</rt><rp>)</rp>
</ruby><!-- この位置でソース改行すると隙間ができます -->
の<!-- この位置でソース改行すると隙間ができます -->
<ruby>
蕾<rp>(</rp><rt>つぼみ</rt><rp>)</rp>
</ruby>

rt (あーるてぃー): ruby text るーびーてくすとぅ
(ルビテキスト); ruby = 振り仮名[名]
text = 文章[名]; ルビテキスト(ルビにあたる文字列)を示す; 終了タグのみ条件つき可
終了直後にrpまたは別のrtが続くか、何も無しの場合

<ruby>
薔<rp>(</rp><rt>ば</rt><rp>)</rp>
薇<rp>(</rp><rt>ら</rt><rp>)</rp>
</ruby><!-- この位置でソース改行すると隙間ができます -->
の<!-- この位置でソース改行すると隙間ができます -->
<ruby>
蕾<rp>(</rp><rt>つぼみ</rt><rp>)</rp>
</ruby>

ruby (るーびー): ruby るーびー
(ルビ); 振り仮名[名]; ルビテキスト(テキストに振り仮名を振る)を示す; ruby; 不可

<ruby>
薔<rp>(</rp><rt>ば</rt><rp>)</rp>
薇<rp>(</rp><rt>ら</rt><rp>)</rp>
</ruby><!-- この位置でソース改行すると隙間ができます -->
の<!-- この位置でソース改行すると隙間ができます -->
<ruby>
蕾<rp>(</rp><rt>つぼみ</rt><rp>)</rp>
</ruby>

s (えす): 旧HTMLでは strike
定義変更のため対応単語無し; -; 既に正確でなくなった情報を示す
(訂正や削除せず情報として残しておく); 不可

samp (さんぽぉ): sample さんぽぉ
(サンプル); 見本[名]; コンピュータープログラムからのサンプル出力を表す
確認・エラーメッセージなど; 不可

script (すくりぷとぅ): script すくりぷとぅ
(スクリプト); 可読性の高いプログラミング言語[名]; 実行できるコードやデータを埋め込む
JavaScriptなど; 不可

<script>
  let hoo = document.createElement('p');
  hoo.innerHTML = 'Hello world';
  document.body.appendChild(hoo);
</script>

section (せくしょん): section せくしょん
(セクション); 節[名], 区間[名], etc.; 文書の自立した意味的な1つのまとまり; 不可

<h1>GAFAM</h1>

<section>
  <h2>Google</h2>
  <p>インターネット関連サービスを行っているアメリカの企業。検索エンジンを主とし、様々なサービスを展開している。</p>
</section>

<section>
  <h2>Apple</h2>
  <p>MacやiPhoneなどハードウェアを始め、関連ソフトウェア開発も行っている。</p>
</section>

select (せれくとぅ): select せれくとぅ
(セレクト); 選択する[動]; フォームの選択式メニューを表す; option optgroup; 不可

<label for="pet-select">ペット</label>

<select id="pet-select">
  <option value="">オプションを選択</option>
  <option value="dog">犬</option>
  <option value="cat">猫</option>
  <option value="hamster">その他</option>
</select>

slot (すらぁとぅ): slot すらぁとぅ
(スロット); 差し込み口[名]; 親コンポーネントから子コンポーネントの
DOMツリーを差し込む
component = 構成要素; 主に template; 不可

<div id="dom">
  <span slot="name">John Doe</span>
  <img slot="image" src="https://profile.jpg" width="80" height="80">
</div>

<template id="dom-shadow" style="border: 1px solid rgb(51,51,51); padding: 20px;">
  <div>
    <slot name="name"></slot>
  </div>
  <div>
    <slot name="image"></slot>
  </div>
</template>

<script>
  let cliant = document.getElementById('dom-shadow').content.cloneNode(true);// クライアント(テンプレート)取得
  let host = document.getElementById('dom');// ホスト取得
  let attach = host.attachShadow({mode:'open'});// ホストをクライアントに差し込む
  attach.appendChild(cliant);
</script>

small (すもーる): small すもーる
(スモール); 小さな[形]; 著作権表示や法的表記など注釈など
一般的に小さく表示される文を表す; 不可

source (そーす): source そーす
(ソース); 源[名], 情報元[名], etc.; メディアまたは画像の情報元; audio video picture

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>


<picture>
  <source srcset="タブレット・PC用画像アドレス" width="900" height="600" media="(min-width: 768px)"><!-- 768px以上 -->
  <img src="スマホ用画像アドレス" width="300" height="200" alt="代替テキスト"><!-- 0から767pxまで(スマホ) -->
</picture>

span (すぱん): span すぱん
(スパン); AからBまでの距離[名],
長さ[名], etc.; 意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることはできない; 不可

strong (すとぅろんぐ): strong すとぅろんぐ
(ストロング); 強い[形], 強固な[形], etc.; 重要性・重大・緊急性が高いテキストを示す; 不可

<p>火事や地震などで<strong>緊急避難する際は<strong>慌てず、走らず</strong>落ち着いて行動する</strong>ことが大事です。</p>

style (すたいる): style すたいる
(スタイル); 様式[名]; 文書あるいは文書の一部分のスタイル情報を記す; 不可

sub (さぶ): subscript さぶすくりぷとぅ
(サブスクリプト); 下付き文字[名]; 下付き文字を示す; 不可

summary (さまりぃ): summary さまりぃ
(サマリー); 要約[名]; 開閉式ウィジェット(details要素)の
キャプション, 要約, 説明文などを表す; details; 不可

<details class="acmenu">
  <summary class="actitle" aria-expanded="false">答えを見る</summary>
  <p>胡椒 <span style="font-size: .9em;">(故障とかけている)</span></p>
</details>

sup (さぷ): superscript すーぱーすくりぷとぅ
(サマリー); 上付き文字[名]; 上付き文字を示す; 不可

svg (えすゔぃーじー): scalable vector graphics すけいらぼぉゔぇくたーぐらふぃくす
(スケーラブルベクターグラフィック(ス)); scalable = 伸縮可能な[形]
vector = ベクター形式[名]
graphics = 図形[名]; SVGをHTMLにインラインで埋め込む; 不可

<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
  <path d="M31 57L1 24l8-13h44l8 13-30 33z" fill="#c2eaff"></path>
  <path d="M44 24L31 57 18 24h26zM31 11L18 24 9 11h22z" opacity=".5" fill="#fff"></path>
  <path d="M31 11L18 24h26L31 11zm0 46L1 24h17l13 33z" opacity=".2"></path>
  <path d="M44 24l9-13 8 13H44z" opacity=".5" fill="#fff"></path>
  <path d="M1 24h60M9 11l9 13 13-13 13 13 9-13M18 24l13 33 13-33" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="#2e4369" fill="none"></path>
  <path d="M31 57L1 24l8-13h44l8 13-30 33z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="#2e4369" fill="none"></path>
</svg>

table (ていぼぉ): table ていぼぉ
(テーブル); 表[名], 目録[名], etc.; 表全体を表す; caption colgroup thead tbody tr tfoot; 不可

<table>
  <caption>この表のタイトルです</caption>
  <tr>
    <th>縦セルヘッダー1</th>
    <th>縦セルヘッダー2</th>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

tbody (てぃーぼでぃ): table body ていぼぉばでぃ
(テーブルボディ); table = 表[名], 目録[名], etc.
body = 本体[名], etc.; 表の中身, 本体を示す; table; tr; 条件つき可
開始終了同table内にtheadが無い場合

<table>
  <caption>この表のタイトルです</caption>
  <thead>
    <tr>
      <th>縦セルヘッダー1</th>
      <th>縦セルヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
  </tbody>
</table>

td (てぃーでぃー): table data ていぼぉでいた
(テーブルデータ); table = 表[名], 目録[名], etc.
data = 情報[名]; 情報を記すセルを定義; tr; 終了タグのみ条件つき可
終了直後にtrかtdが有るか、何も無しの場合

<table>
  <caption>この表のタイトルです</caption>
  <thead>
    <tr>
      <th>縦セルヘッダー1</th>
      <th>縦セルヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
  </tbody>
</table>

template (てんぷれぃとぅ): template てんぷれぃとぅ
(テンプレート); 定形書式[名], 指針[名], etc.; 後からJavaScriptで挿入したいコンテンツ領域を保持する; 不可

<div id="dom">
  <span slot="name">John Doe</span>
  <img slot="image" src="https://profile.jpg" width="80" height="80">
</div>

<template id="dom-shadow" style="border: 1px solid rgb(51,51,51); padding: 20px;">
  <div>
    <slot name="name"></slot>
  </div>
  <div>
    <slot name="image"></slot>
  </div>
</template>

<script>
  let cliant = document.getElementById('dom-shadow').content.cloneNode(true);// クライアント(テンプレート)取得
  let host = document.getElementById('dom');// ホスト取得
  let attach = host.attachShadow({mode:'open'});// ホストをクライアントに差し込む
  attach.appendChild(cliant);
</script>

textarea (てくすとぅえぁりあ): text + area てくすとぅえぁりあ
(テキストエリア); text = 文章[名]
area = 地域[名], 場所[名], etc.; フォーム内で複数行の入力ができるエリアを作成する; 不可

tfoot (てぃーふっとぅ): table + footer てぃぼぉふったー
(テーブルフッター); table = 表[名]
footer = 脚注[名], 最下部[名], etc.; データの下部にあり補足情報などを記す; table; tr; 終了タグのみ条件つき可
終了後続に何も無い場合

<table>
  <caption>売上</caption>
  <thead>
    <tr>
      <th>商品</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>化粧水</td>
      <td>6,500円</td>
    </tr>
    <tr>
      <td>美容液</td>
      <td>12,000円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>18,500円</td>
    </tr>
  </tfoot>
</table>

th (てぃーえいち): table + header ( + cell) ていぼぉへっだーせる
(テーブルヘッダーセル); table = 表[名], 目録[名], etc.
header = 見出し[名]
cell = 小部屋, 小区画[名]; 各セル見出し; tr; 終了タグのみ条件つき可
終了直後にthかtdがあるか、何も無しの場合

<table>
  <caption>この表のタイトルです</caption>
  <tr>
    <th>縦セルヘッダー1</th>
    <th>縦セルヘッダー2</th>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

thead (てぃーへっどぅ): table + header (+ group) ていぼぉへっだーぐるーぷ
(テーブルヘッダーグループ); table = 表[名]
header = 見出し[名]
group = 集合体[名]; データの先頭情報を示す
(水平方向グループ化); table; tr; 終了タグのみ条件つき可
終了直後にtbodyかtfootがある場合

<table>
  <caption>この表のタイトルです</caption>
  <thead>
    <tr>
      <th>縦セルヘッダー1</th>
      <th>縦セルヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
  </tbody>
</table>

time (たいむ): time たいむ
(タイム); 時間[名]; 日付や時刻を表す; 不可

title (たいとる): title たいとる
(タイトル); 題名[名]; そのページのタイトルを表す
タイトルバーやタブに表記される; head; 不可

tr (てぃーあーる): table row
ていぼぉろぅ
(テーブルロウ); table = 表[名]
row = 並び[名]; 表の水平方向の列を定義; table; td th; 終了タグのみ条件つき可
終了直後にtrがある場合、または何も無い場合

<table>
  <caption>この表のタイトルです</caption>
  <tr>
    <th>縦セルヘッダー1</th>
    <th>縦セルヘッダー2</th>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
  <tr>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

track (とぅらく): text + track てくすとぅとぅらく
(トラック); text = 文章[名]
track = 軌跡[名]; 音声・動画ファイルに字幕などのテキストトラックを埋め込む; audio video

<video controls src="https://sample.mp4">
  <track default kind="captions" srclang="en" src="https://caption.vtt">
</video>

u (ゆぅ): 旧HTMLでは underlined text
定義変更のため対応単語無し; -; 伝わりづらいテキストやスペルミスのあるテキストなどを示す; 不可

ul (ゆぅえる): unordered list あんおぅだどぅりすとぅ
(アンオーダードリスト); unordered = 順序の無い[形]
list = 一覧[名]; 順序・序列を持たないリスト; li; 不可

var (ゔぁー, ゔぇりあぼぉ): variable ゔぇりあぼぉ
(バリアブル); 可変の[形], 変数[名], etc.; プログラムや数学などの変数や定数を示す; 不可

video (ゔぃでぃおぅ): video ゔぃでぃおぅ
(ビデオ); 映像[名], 動画[名], etc.; 動画再生に対応するメディアプレイヤーを埋め込む; source track; 不可

wbr (わぁどぅぶれいく): word + break わぉどぅぶれいく
(ワードブレイク); 改行[名]; ブラウザに任意改行を許可する位置を指定する

<div style="width: 300px; border: 1px solid; padding: .5em;">
  <p>1234567890abcdefghijklmnopqrstuvwxyz</p>
  <p>1234567890abcdefghijklmnopq<wbr>rstuvwxyz</p>
</div>

目次へ戻る↑a>

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

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>

目次へ戻る↑a>

最後に

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

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

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