自己終了タグとは、<タグ名 />
のように、/>
で終わっているタグのこと。
……だと思っていた。
ふとしたタイミングで「自己終了タグが書けるのはどの HTML タグなんだろう」と疑問に思ったので調べてみた。
仕様を調べてみる
HTML のシンタックスはこちらに記載されている。
https://html.spec.whatwg.org/multipage/syntax.html
記述時点の仕様は「HTML Living Standard — Last Updated 15 August 2022」
開始タグについて記載されている文章中に、自己終了についても言及されている。
https://html.spec.whatwg.org/multipage/syntax.html#start-tags
Start tags must have the following format:
- The first character of a start tag must be a U+003C LESS-THAN SIGN character (<).
- The next few characters of a start tag must be the element's tag name.
- If there are to be any attributes in the next step, there must first be one or more ASCII whitespace.
- Then, the start tag may have a number of attributes, the syntax for which is described below. Attributes must be separated from each other by one or more ASCII whitespace.
- After the attributes, or after the tag name if there are no attributes, there may be one or more ASCII whitespace. (Some attributes are required to be followed by a space. See the attributes section below.)
- Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
- Finally, start tags must be closed by a U+003E GREATER-THAN SIGN character (>).
雑に訳すとこんな感じ。
「<
で始まって、タグ名が来て、スペースで区切られた属性が来て、「void elements か foreign element なら /
が来る可能性がある」、最後に >
で閉じる」
「void elements か foreign element なら /
が来る可能性がある」と書いた 6 の部分を正しく訳すと次のとおり。
「void elements か foreign element なら、/
が存在するかもしれない。
void elements の場合は影響を与えないが、foreign element の場合は開始タグを自己終了としてマークする」
void elements の定義
これらのタグのこと。
area
, base
, br
, col
, embed
, hr
, img
, input
, link
, meta
, source
, track
, wbr
https://html.spec.whatwg.org/multipage/syntax.html#void-elements
foreign element の定義
Elements from the MathML namespace and the SVG namespace.
MathML namespace か SVG namespace の要素がこちらに該当する模様。
つまり、HTML namespace に属している要素は外部要素ではないので、自己終了としてマークされない。
https://html.spec.whatwg.org/multipage/syntax.html#foreign-elements
ところで namespace って何?
あまり聞き馴染みがなかったのでちょっとだけ調べてみた。
MDN にわかりやすい記事があった。感謝。
https://developer.mozilla.org/ja/docs/Web/SVG/Namespaces_Crash_Course
簡単に言うと、「事前にタグの名前を定義しておいて、「それを使うよー」と宣言したらそのタグが使えるようになる」というもの……と理解した。
<svg xmlns="http://www.w3.org/2000/svg"> <!-- ここは SVG 名前空間なので、そこで定義されている SVG タグが書ける --> </svg>
ちなみに
xmlns
属性の値は文字列なら何でもいいらしい。
慣習的に URI になっているっぽい。
xmlns
は XML NameSpace の略らしい。
href
と似た何かを感じる。
補足
別のところにこんなことも書いてあった。
Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.
訳した。
「void element は開始タグだけ持つ。終了タグは書いてはいけない。
foreign elements は「開始タグと終了タグの両方」もしくは「自己終了の開始タグ」が必要。この場合は終了タグを書いてはいけない」
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tags
結論
- HTML(名前空間)には自己終了タグがない。
- 一部のタグには開始タグしか存在しない。
>
の直前に/
を書いていたとしても無視される。 - ただし、SVG 名前空間などでは書ける。
感想
分かった気になってたけど、いざ調べてみると違うじゃん! となるのが本当によくある。
日本語ですらあるんだから、こういった技術的な用語はもっとあるんだろうなぁ。
仕様を読み込むというのは大切だと、改めて実感した。
また気になる単語があったら調べてみたい。
おまけ
面白かった一文。
Those that cannot be omitted must not be omitted.
「省略できないものは省略してはいけない」
せやな。