ひびのログ

日々ではないけどログを出力していくブログ

トップ > HTML > HTML には自己終了タグがない

HTML には自己終了タグがない

HTML 仕様

自己終了タグとは、<タグ名 /> のように、/> で終わっているタグのこと。 ……だと思っていた。

ふとしたタイミングで「自己終了タグが書けるのはどの 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:

  1. The first character of a start tag must be a U+003C LESS-THAN SIGN character (<).
  2. The next few characters of a start tag must be the element's tag name.
  3. If there are to be any attributes in the next step, there must first be one or more ASCII whitespace.
  4. 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.
  5. 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.)
  6. 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.
  7. 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.

「省略できないものは省略してはいけない」
せやな。