こんにちは！
今日はHTMLの改行に関する小ネタです。
HTMLでテキストに改行を入れたい場合、一般的には以下のタグを利用します。
<br> ... HTML系 = OK
<br /> ... XHTML系 = OK
では……
</br> ... この書き方は？
ペアタグでもなく自己終了タグでもなく、いきなり終了タグで br が書かれています。
違和感しかないこちらの書き方も、なんと改行として動きます。
■ 確認環境
Chrome バージョン 137.0.7151.69（Official Build） （64 ビット）
■ コード
<p>①改行される？<br />②改行される？<br>③改行される？</br>④改行される？</p>
■ 結果
①改行される？
②改行される？
③改行される？
④改行される？
ブラウザ側で適切に解釈して補完してくれるのでしょうか。
不思議ですね。
そして、この結果を生成AIに聞いてみましょう。
Q ：この書き方はどう？
<p>①改行される？<br>②改行される？<br />③改行される？</br>④改行される？</p>
A ：以下のように記述された場合、<br>と<br />は正しく改行を行いますが、</br>は無効なタグであるため、改行は行われません。
<p>①改行される？<br>②改行される？<br />③改行される？</br>④改行される？</p>
この場合の動作は以下の通りです：
①改行される？<br>②改行される？
<br>は有効な自己終了タグであり、改行が行われます。
②改行される？<br />③改行される？
<br />も有効な自己終了タグであり、改行が行われます。
③改行される？</br>④改行される？
</br>は無効なタグであり、ブラウザはこれを無視するため、改行は行われません。
したがって、正しい改行を行うためには、<br>または<br />を使用する必要があります。</br>は無効なタグであり、使用しないようにしてください。
修正例：
<p>①改行される？<br>②改行される？<br />③改行される？<br>④改行される？</p>
このように記述することで、すべての箇所で正しく改行が行われます。
……だそうです。
</br>は無効なタグであり、ブラウザはこれを無視するため、改行は行われません。
そうであれば良かったのですが、表示上は改行されます。
生成AIモデルによって異なる回答が出るかもしれませんが、AIの回答をそのまま鵜吞みにしてはいけないということですね。
動きはしますが正しくはないので、このような謎のコードが運用上に出ていかないようにしていきましょう。
③改行される？と④改行される？のタグと表示結果にご注目
