HTMLタグと要素｜HTML5｜HTML－havin' a coffee break

＃

“HTMLタグ”とは？

HTMLで記述された文書は“タグ”によってマークアップされるマークアップ言語の一種です。“タグ(tag)”は本来は荷札やふせんといった意味をもつ単語で、タグによってテキストに目印をつけることによってその部分の文書構造上の役割や機能を指定することができます。

＃

HTMLタグの書き方の基本

HTMLタグは文書の構造や何らかの機能を表す“要素(Elements)”をマークアップするために使用されます。

HTMLタグには要素のはじまりを区切る“開始タグ(Start tags)”と終わりを区切る“終了タグ(End tags)”があり、その中身は要素の“内容”、もしくは“コンテンツ(Contents)”と呼ばれます。

いくつかの要素のタグは省略することができますが、省略可能と定義されている要素以外のタグは省略してはいけません。

要素の内容は開始タグの直後に始まり、終了タグの直前に終わります。要素が含むことができる内容は“コンテンツ・モデル(Content models)”によって定義されています。コンテンツ・モデルによって定義されているもの以外にも要素の種類によって内容が制約されます。

外来要素を含めてすべての要素のタグ名は大文字と小文字が区別されませんが、一般的には小文字に揃えて記述されます。



大文字

<IMG SRC="sample.png" ALT="サンプル画像">





小文字

<img src="sample.png" alt="サンプル画像">





混合

<Img Src="sample.png" Alt="サンプル画像">

＃

開始タグ

開始タグの構文は以下の通りです。

1個目の文字は小なり記号(U+003C、“<”)です。
2個目以降のいくつかの文字は要素のタグ名です。
属性がある場合、属性の前には1個以上のASCII空白文字が必要です。
複数の属性がある場合、それぞれの属性の間には1個以上のASCII空白文字が必要です。
属性の後、もしくは属性がなければタグ名の後には任意で1個以上のASCII空白文字を含むことができます。
要素が空要素もしくは外来要素であって終了タグがない場合、続いて任意で1個のスラッシュ(U+002F、“/”)を含むことができます。スラッシュを含んだタグは空要素タグ(後述)と呼ばれます。
開始タグは大なり記号(U+003E、“>”)で閉じます。



属性がない

<b>...</b>





属性が1個

<a href="sample.html">...</a>





属性が複数

<a href="sample.html" hreflang="en">...</a>





空要素

<meta charset="utf-8">

終了タグのない空要素や外来要素はスラッシュ(“/”)を最後に含むことで自己閉鎖(“Self-closing”)することを示すことができます。このようなタグは“空要素タグ”と呼ばれます。



“空要素タグ”

<meta charset="utf-8"/>

＃

終了タグ

終了タグの構文は以下の通りです。

1個目の文字は小なり記号(U+003C、“<”)です。
2個目の文字はスラッシュ(U+002F、“/”)です。
3個目以降のいくつかの文字は要素のタグ名です。
属性がある場合、属性の前には1個以上のASCII空白文字が必要です。
タグ名の後には任意で1個以上のASCII空白文字を含むことができます。
終了タグは大なり記号(U+003E、“>”)で閉じます。

＃

要素の種類

要素は以下の6種類のいずれかに分類されます。

空要素(“Void elements”)
テンプレート要素
生テキスト要素(“Raw text elements”)
エスケープ可能生テキスト要素(“Escapable raw text elements”)
外来要素(“Foreign elements”)
普通要素(“Normal elements”)

また、ほとんどの要素は同時に以下の7つの“コンテンツ・カテゴリー”にも分類されています。

空要素

“area”要素、“base”要素、“br”要素、“col”要素、“embed”要素、“hr”要素、“img”要素、“input”要素、“link”要素、“meta”要素、“param”要素、“source”要素、“track”要素、“wbr”要素は“空要素(Void elements)”に分類されます。

空要素は終了タグがないので内容を持つことはできません。

テンプレート要素

“template”要素は単独で“テンプレート要素”に分類されます。

“template”要素はスクリプトによって複製して文書に挿入されるHTMLの断片(テンプレート)を内容に含むことができますが、その内容は“template”要素の子要素とはみなされません。

生テキスト要素

“script”要素と“style”要素は“生テキスト要素(Raw text elements)”に分類されます。

生テキスト要素は内容としてテキストを含むことができます。ただし、小なり記号とスラッシュ(U+003CU+002F、“</”)と要素のタグ名と同じ文字列の後にASCII空白文字、大なり記号(U+003E、“>”)、スラッシュ(U+002F、“/”)のいずれかの文字が続くテキストは含むことができません。

エスケープ可能生テキスト要素

“textarea”要素と“title”要素は“エスケープ可能生テキスト要素(Escapable raw text elements)”に分類されます。

生テキスト要素が内容として含むことができるテキストに加えて文字参照を含むことができます。ただし、文字参照と混同されるアンパサンドを含むことはできません。

外来要素

“外来要素(Foreign elements)”はHTMLではないマークアップ言語の要素です。HTML文書ではMathMLとSVGの要素を使用することができます。

空要素タグとして記述された外来要素は終了タグがないので内容を持つことはできません。

空要素タグでない外来要素(開始タグと終了タグがある)はテキスト、文字参照、CDATAセクション(“<![CDATA[”で始まり、“]]>”で終わる)、他の要素、コメントを含むことができます。ただし、文字参照と混同されるアンパサンドを含むことはできません。

普通要素

ほかの5つの分類のいずれにも属さないHTMLの要素は“普通要素(Normal elements)”に分類されます。

普通要素はテキスト、文字参照、他の要素、コメントを含むことができます。ただし、小なり記号(U+003C、“<”)と文字参照と混同されるアンパサンドを含むことはできません。

＃

タグの省略

いくつかの要素は開始タグか終了タグ、もしくはその両方の記述を省略することができます。

記述を省略されたタグは完全に不在になるのではなく、記述されていなくても暗黙的にそこに存在するものとみなされます。

タグの記述を省略しても良い条件については要素ごとに定義されており、その条件を満たしていない場合は省略することはできません。また、すべての要素は属性がある場合には開始タグを省略することはできません。

＃

属性と値

開始タグは要素の細かい性質や設定を指定する“属性(Attributes)”を含むことができます。

属性は何を指定するのかを表す“属性名(Attribute names)”と具体的な指定内容を示す“属性値(Attribute values)”からなります。

属性名と属性値にはそれぞれ含むことが許されている文字が決められています。

属性名が含むことができる文字
制御文字、半角スペース(U+0020)、二重引用符(U+0022、“"”)、単一引用符(U+0027、“'”)、大なり記号(U+003E、“>”)、スラッシュ(U+002F、“/”)、イコール(U+003D、“=”)、非文字のいずれでもない1文字以上の文字からなります。属性名は大文字と小文字が区別されません。また、同じ開始タグの中に同じ名前の属性を複数含むことはできません。: 属性値が含むことができる文字
テキストと文字参照を含むことができます。ただし、文字参照と混同されるアンパサンドを含むことはできません。また、属性の記述方法によって追加の制約があります。

ほとんどの場合は要素ごとにあらかじめ定義されている属性を使用します。ほとんどの属性は指定が任意ですが、一部の要素には指定が必須である属性が定義されています。

＃

属性の記述方法

属性の記述方法は以下の4通りがあります。

空属性構文(“Empty attribute syntax”)
引用符なし構文(“Unquoted attribute value syntax”)
単一引用符構文(“Single-quoted attribute value syntax”)
二重引用符構文(“Double-quoted attribute value syntax”)

空属性構文

属性名のみです。値は暗黙的に空文字列であることが示されます。

空属性構文で記述された属性の後に別の属性が続く場合は1個以上のASCII空白文字で区切られなければなりません。

引用符なし構文

引用符なし構文は以下の通りです。

属性名
続いて0個以上のASCII空白文字
続いて1個のイコール(U+003D、“=”)
続いて0個以上のASCII空白文字
続いて属性値

引用符なし構文で記述された属性の値にはそのまま記述された(文字参照でない)ASCII空白文字、二重引用符(U+0022、“"”)、単一引用符(U+0027、“'”)、イコール(U+003D、“=”)、小なり記号(U+003C、“<”)、大なり記号(U+003E、“>”)、抑音符(U+0060、“`”)、を含むことができません。また、値が空文字列であってはいけません。

引用符なし構文で記述された属性の後に別の属性が続く場合は1個以上のASCII空白文字で区切られなければなりません。また、属性の後に空要素タグを表すスラッシュ(U+002F、“/”)が続く場合も間に1個以上のASCII空白文字を挿入しなければなりません。

単一引用符構文

単一引用符構文は以下の通りです。

属性名
続いて0個以上のASCII空白文字
続いて1個のイコール(U+003D、“=”)
続いて0個以上のASCII空白文字
続いて1個の単一引用符(U+0027、“'”)
続いて属性値
続いて1個の単一引用符(U+0027、“'”)

単一引用符構文で記述された属性の値にはそのまま記述された(文字参照でない)単一引用符(U+0027、“'”)を含むことができません。

単一引用符構文で記述された属性の後に別の属性が続く場合は1個以上のASCII空白文字で区切られなければなりません。

二重引用符構文

二重引用符構文は以下の通りです。

属性名
続いて0個以上のASCII空白文字
続いて1個のイコール(U+003D、“=”)
続いて0個以上のASCII空白文字
続いて1個の二重引用符(U+0022、“"”)
続いて属性値
続いて1個の二重引用符(U+0022、“"”)

二重引用符構文で記述された属性の値にはそのまま記述された(文字参照でない)二重引用符(U+0022、“"”)を含むことができません。

二重引用符構文で記述された属性の後に別の属性が続く場合は1個以上のASCII空白文字で区切られなければなりません。

＃

属性の種類

真偽属性

いくつかの属性は属性の存在自体が値が真、属性の不在が値が偽であることを示す“真偽属性(Boolean attributes)”です。

真偽属性の値は前後にASCII空白文字を含まない空文字列、もしくは属性名と大文字と小文字を区別せずに一致する文字列でなければなりません。



属性値に属性名を記述

<input type="radio" checked="checked" disabled="disabled">





属性値を空文字列として記述

<input type="radio" checked="" disabled="">





引用符なし構文で記述

<input type="radio" checked disabled>