
本記事では 属性 については触れていません。あくまでも 要素 (タグ) のみの言及です。属性については別途まとめ記事を書きたいと思います。
コンテンツモデルカテゴリー
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属性で到達点を指定
- 不可
<a href="遷移先">表示テキスト</a>

-
abbr
(あばー,
あぶりーゔぃ
えぃしょん) -
abbreviation
あぶりーゔぃえぃしょん
(アブリビエーション) - 略[名], 短縮[動], etc.
- 略語を示す
- 不可
<p><abbr title="HyperText Markup Language">HTML</abbr>を楽しく学ぼう。</p>

- 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
あーてぃこー
(アーティクル) - 記事[名]
- 独立したひとつのコンテンツを表す
ブログ記事など - 不可
<article>
<h2>記事タイトル</h2>
<p>記事内容</p>
</article>

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

- audio (あーでぃおぅ)
-
audio
あーでぃおぅ
(オーディオ) - 音声[名]
- 音声コンテンツを埋め込む
- 不可
<audio controls src="https://xxx.mp3"></audio>

- b (びー)
-
旧HTMLでは bold
定義変更のため対応単語無し - -
- 特別なテキスト(他テキストとの区別)
製品名など - 不可
<p>先日新しい<b>iPhone</b>を購入しました。</p>

- 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 = 優先する[動] - 文章の方向を独立させる
(書き出しの左右が異なる言語内で、向きの依存を無くす) - 不可
<p><bdo dir="rtl">この文字は右から左に読み書きします。</bdo></p>

- blockquote (ぶろっくくぉうとぅ)
-
block + quote
ぶろっく くぉうとぅ
(ブロッククオート) - block = かたまり[名]
quote = 引用[名] - 比較的長い引用文を示す
- 不可
<blockquote cite="引用元アドレス">
<p>引用文</p>
</blockquote>

- body (ばでぃ)
-
body
ばでぃ
(ボディ) - 身体[名], 胴体[名], etc.
- HTML文書の内容を表す
-
条件つき可開始先頭がコメント・script要素・style要素でない場合
終了body要素に内容があり、直後がコメントでない場合
<html>
<head>文書ヘッダ内容</head>
<body>文書本体</body>
</html>
- br (ぶれいく)
-
(line) break
ぶれいく
(ブレイク) - 改行[名]
- 任意改行(行替え)
<p>行を替えたい場合に<br>利用します。</p>

- 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がある場合はそれを示す
- 不可
<p><cite>出典先のサイト</cite>ではこのように説明されていました。</p>

- code (こうどぅ)
-
code
こうどぅ
(コード) - (文章や記号などの)コード[名]
- コンピュータコードの文字列であることを示す
- 不可
<p><code>function(name)</code>の中にコードを記載する。</p>

- 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.
- 意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることができる - 不可
<div>この文章に特別なHTML定義はありません。</div>

- 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
えんふぁしす
(エンファシス) - 強調[名]
- 周囲の内容と比較し、強調すべき範囲を示す
- 不可
<p>君のことが<em>大好き</em>です。</p>

- embed (えんべっどぅ)
-
embedえんべっどぅ
(エンベッド) - 埋め込む[動]
- 外部コンテンツを所定の位置に埋め込み表示させる
<embed type="video/webm" src="https://xxx.mp4" width="300" height="200">

- 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.
- 文書に関しコンピュータが理解可能な情報を記す
- 条件つき可開始最初が要素である場合
終了直後が空白文字・コメントではない場合
<!doctype html>
<html>
<head>
<title>文書タイトル</title>
</head>
</html>
- 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文書の起点となる
- 条件つき可開始最初がコメントではない場合
終了直後がコメントではない場合
<!DOCTYPE html>
<html lang="ja">
<head>
内容
</head>
<body>
内容
</body>
</html>
- i (あい)
-
旧HTMLでは italic
定義変更のため対応単語無し - -
- 他のテキストと区別されるテキストの範囲を表す
慣用句, 呼称, 用語, 思考など - 不可
<p>それを聞いたとき、<i>これは大変だ!</i>と一瞬思いました。</p>

-
iframe
(あいふれぃむ,
いんらいんふれぃむ) -
inline + frame
いんらいん ふれぃむ
(インラインフレーム) - inline = 文書中の[形]
frame = 枠[名] - HTML内に別のHTMLを入れ子する
- 不可
<iframe src="ページアドレス" width="400" height="225"></iframe>

- img (いめーじ)
-
image
いめーじ
(イメージ) - 画像[名]
- 画像を示す
<img src="https://sample.jpg" width="400" height="266" alt="ヘルシーな朝食">

- input (いんぷっとぅ)
-
input
いんぷっとぅ
(インプット) - 入力[名]
- ウェブサーバーに情報を送信するための
ユーザーが操作可能なコントロール作成
<label for="name">お名前: </label>
<input type="text" id="name" name="name" size="10" required>

- 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
れぃぼぉ
(ラベル) - 貼り紙[名]
- フォーム部品のラベル(端的説明)を表す
- 不可
<label for="name">お名前: </label>
<input type="text" id="name" name="name" size="10" required>

- 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要素が続くか、何も無しの場合
<p>今日やること
<ul>
<li>掃除</li>
<li>洗濯</li>
<li>買い物</li>
</ul>

-
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
めいん
(メイン) - 主要な[形]
- 文書内の主要なコンテンツを表す
- 不可
<main>
<article>
<h1>見出し</h1>
<p>文章</p>
<p>文章</p>
</article>
</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
まぁく
(マーク) - 記しを付ける[動]
- 周囲のテキストと差別して目立たせる
- 不可
<p><mark>この文章に注目してください。</mark></p>

- 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
めにゅー
(メニュー) - 献立表[名], コンピュータメニュー[名]
- ユーザーが実行またはアクティブ化できるコマンドグループ
- 不可
- meta (めた)
-
metadata
めたでいた
(メタデータ) - データに関する属性情報を記述するデータ[名]
- Webページのメタデータを検索エンジンや
ブラウザに認識させる
<head>
<meta charset="utf-8">
</head>
- 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.
- 文書内の他部位や他の文書へのリンクの集合体
- 不可
- 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
ぱらぐらふ
(パラグラフ) - 段落[名]
- 文章段落を構成する
- 不可
<p>この文章は第一段落です。</p>
<p>この文章は第二段落です。</p>

- 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 = 文書[名] - 改行文字や空白文字によって整形されているテキスト
ソースコードなどの見た目をそのまま表示させる - 不可
<pre><code><p>Hello World</p></code></pre>

- progress (ぷろぐれす)
-
progress
ぷろぐれす
(プログレス) - 進歩[名]
- タスクの進捗状況を表示する
- 不可
<progress id="shipment" max="100" value="60">60%</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
定義変更のため対応単語無し - -
- 既に正確でなくなった情報を示す
(訂正や削除せず情報として残しておく) - 不可
<p><s>2000年に核戦争が起きるという予言があります。</s></p>

- samp (さんぽぉ)
-
sample
さんぽぉ
(サンプル) - 見本[名]
- コンピュータープログラムからのサンプル出力を表す
確認・エラーメッセージなど - 不可
<p>入力ミスが有る場合は<samp>エラーメッセージ001</samp>と表示されます。</p>

- 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
すもーる
(スモール) - 小さな[形]
- 著作権表示や法的表記など注釈など
一般的に小さく表示される文を表す - 不可
<footer>
<small>Copyright © XYZ All Rights Reserved.</small>
</footer>

- 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. - 意味を持たせず、特定範囲の分割・グループ化
任意の横幅・高さを持たせることはできない - 不可
<p>りんごの色は<span style="color: red;">赤い</span></p>

- strong (すとぅろんぐ)
-
strong
すとぅろんぐ
(ストロング) - 強い[形], 強固な[形], etc.
- 重要性・重大・緊急性が高いテキストを示す
- 不可
<p>火事や地震などで<strong>緊急避難する際は<strong>慌てず、走らず</strong>落ち着いて行動する</strong>ことが大事です。</p>

- style (すたいる)
-
style
すたいる
(スタイル) - 様式[名]
- 文書あるいは文書の一部分のスタイル情報を記す
- 不可
<p>りんごの色は<span style="color: red;">赤い</span></p>

- sub (さぶ)
-
subscript
さぶすくりぷとぅ
(サブスクリプト) - 下付き文字[名]
- 下付き文字を示す
- 不可
<p>炭酸を化学式で表すと H<sub>2</sub>CO<sub>3</sub> です。</p>

- 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
すーぱーすくりぷとぅ
(サマリー) - 上付き文字[名]
- 上付き文字を示す
- 不可
<p>1立方メートルは1m<sup>3</sup>です。</p>

- 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. - フォーム内で複数行の入力ができるエリアを作成する
- 不可
<textarea id="comment" name="comment" rows="5" cols="30" placeholder="コメント本文"></textarea>

- 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
たいむ
(タイム) - 時間[名]
- 日付や時刻を表す
- 不可
<time datetime="2000-03-01T20:30:00+09:00">2000年3月1日 20時30分00秒</time>

- title (たいとる)
-
title
たいとる
(タイトル) - 題名[名]
- そのページのタイトルを表す
タイトルバーやタブに表記される - head
- 不可
<head>
<title>動物カテゴリ - 1ページ目</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
定義変更のため対応単語無し - -
- 伝わりづらいテキストやスペルミスのあるテキストなどを示す
- 不可
<p>40の正しい綴りは <u>fourty</u> ではなく forty です。</p>

- ul (ゆぅえる)
- unordered list
あんおぅだどぅ りすとぅ
(アンオーダードリスト) - unordered = 順序の無い[形]
list = 一覧[名] - 順序・序列を持たないリスト
- li
- 不可
<p>今日やること
<ul>
<li>掃除</li>
<li>洗濯</li>
<li>買い物</li>
</ul>

- var (ゔぁー, ゔぇりあぼぉ)
- variable
ゔぇりあぼぉ
(バリアブル) - 可変の[形], 変数[名], etc.
- プログラムや数学などの変数や定数を示す
- 不可
<p>一般的に <var>w</var> は幅、<var>h</var> は高さを表します。</p>

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

- wbr (わぁどぅぶれいく)
- word + break
わぉどぅ ぶれいく
(ワードブレイク) - 改行[名]
- ブラウザに任意改行を許可する位置を指定する
<div style="width: 300px; border: 1px solid; padding: .5em;">
<p>1234567890abcdefghijklmnopqrstuvwxyz</p>
<p>1234567890abcdefghijklmnopq<wbr>rstuvwxyz</p>
</div>

入れ子で間違えやすいもの
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時代になんとなく覚えた書き方について自身でチェックする機会になれば良いかな、と思います。
というわけで本記事では 要素 とそれぞれのカテゴライズについてまとめました。属性 については後日別途記事でまとめたいと考えています。
There are no comments yet.