htmlで終了タグがないときの挙動を説明する情報がない

Question

<div>
  <h1>本日の天気<h1>
  <p>全国的に晴れでしょう</p>
</div>

上記のhtmlは以下のようになります。

<div>
  <h1>本日の天気
  <p>全国的に晴れでしょう</p>
</div>

私は上記のように<h1>の終了タグを入れ忘れるとエラーになると思っていました
しかし、以下のようになりました。

なかなか調べてもなぜこういう挙動になるのかの説明がでてきません。
理由を教えていただけないでしょうか？

Comments

[maisumakun]

> なぜこういう挙動になるのかの説明がでてきません。

この「挙動」を積極的に使いたいのでもなければ、正しくないHTMLのレンダリング結果など気にする必要もないのではないでしょうか？

Answer 1

<h1>の終了タグを入れ忘れるとエラーになると思っていました

HTML,CSSについてはその手のエラーはないです。
画面レイアウトが崩れる云々はhtml、CSS側からすると「動かなくなる致命的なもの」ではないため、
ブラウザは書かれたとおりに画面描画します。
（想定のレイアウトになるかどうかはあくまで書いた人の都合）

よって、自身で発見できない場合は、構文チェック機能・開始タグを打つと終了タグを補完してくれる機能のあるエディタを利用し、発見してもらいます。

中には終了タグを省略できるもの、省略してはいけないもの、終了タグがないもの
があるので、そのあたりも実装時には注意と考慮が必要です。
提示のh1は「省略してはいけないもの」ですが、終了タグを書いていないため、以下がh１仕様で描画されます。

Comments

[m.ts10806]

やはり、無言で低評価がつくのは嫌がらせ目的でしょうね。
運営相談します。

[thesnowman]

ご回答ありがとうございます！低評価は私ではないです！

[m.ts10806]

たぶんそうだと思います。
ずっと付け狙ってる迷惑な人がいるんですよ。
運営には相談済みです。

Answer 2

htmlの仕様ではparse errorなのですがブラウザの実装を見る限りparse errorになっても何もしないので
後続のpタグもh1の子ノードとしてレンダリングされるのだと思います。
以下に仕様が書いてあります。
https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody

Answer 3

閉じタグはブラウザの解釈によって自動的に補完されます。
開発者ツールを使って確認してみてください。
例えば、このようになります。

<div>
  <h1>本日の天気
  <p>全国的に晴れでしょう</p>
</h1></div>