🦴

HTMLで閉じタグを省略していいのは決められたタグのみだった

2023/02/19に公開

はまったこと

Web Components で新しいタグを使っていた。ただ、

<my-tag></my-tag>

と、書くのは冗長なのでずっと

<my-tag/>

と書いていた
そしてこれは普通に動いていた

が、あるとき2つ続けて書くと1つしか出ないことに気づいた
次のように書いて

<my-tag/>
<my-tag/>

デベロッパーツールで確認すると <my-tag></my-tag> が一つあるだけだった
エラーが出ることもなく片方は消えていた

試しに下のように変更すると問題なく2つ表示された

<my-tag></my-tag>
<my-tag></my-tag>

わかったこと

  • <xxx></xxx> になってたら、なんでも <xxx/> に置き換えていいのではなかった
    • ちなみに <div/><div/> とすると兄弟ではなく親子になる(どういう仕様!?)
  • <xxx/> と書いていいのは決められたタグのみだった

https://html.spec.whatwg.org/multipage/syntax.html#void-elements

Discussion

ログインするとコメントできます