小さなデバッグの記録タグの綴り誤り

 このブログで記事を縦書き表示にするときは、articleタグで記事本文を囲み、class=”vert”(縦書きのためのcssの私製のセット)を指定している(縦書き用CSS)。
 今回、新しい縦書き記事を書いた。それ表示すると、記事は縦書き表示になるのだが、本来なら記事の下にくるべきぺージ送りのブロックが、記事の右側に記事と横並びに表示されてしまった。そのエラー潰しのてんやわんやの顛末。 
 初めは、その記事が最新の記事なので、ページ送りの[前]はあるが[次]がない場合のページ送りブロック表示ロジックにバグがあるのかと疑ったが、別段従来の設定から変更した箇所はないはずだし、これまで最後の記事だからページ送りのブロック表示が変に崩れるという現象に出くわしたこともない。念のために本番サイト(まだ問題の記事を載せていないサイト)を見ると、最後の記事でもページ送りブロックは正しく記事本文の下に表示されている。
 試しに、この記事をコピーペーストしてダミーの記事を作り、最新記事として登録してみたら、なんとそちらでも同じ現象が生じて、ページ送りブロックが記事の右側に横並びになってしまう。そこで、さらにもう一つのダミー記事を、今度は一から書き下ろして追加してみた。すると、ページ送りブロックは正常に記事の下に配置される。ブラウザがHTML/cssを解釈する癖というか実装の差の問題かも、と、普段は使わないChromeで試してみると、こちらでもページ送りブロックの配置が狂う。とここに至ってようやくarticleの綴りを疑い、しげしげ確認してやっと誤りに気づいた。iが、キーボードのiの隣のuに間違っていて、artucleとなっているではないか。でも綴りが誤っているにも関わらず、class=”vert”の指定は効いていて記事は縦書き表示になっているのが解せぬまま、綴りを正す。あら不思議、というか当たり前なのだが、配置は正常にもどり、ページ送りブロックは記事の下に表示された。この間、丸二日が経過。この問題に専念してた訳ではないにしろ、間抜けすぎだろう。それにしても、SafariもChromeもarticle/artucleの綴り間違いを同じように中途半端に補正してしまうなんて、有りうべきこととは思えない、タグが無効で横書き表示のままならすぐタイポに気づいたかもしれないのに。自分を罵る他ないのが情けなくも口惜しくて、ブラウザに八つ当たりしてしまう。
 意図通りの表示に戻せたものの、釈然としない点はいくつかある。artucleという未定義のタグが解釈不能の文字列として本文の中に出現しなかったのはなぜか、未定義のタグに指定された縦書き指示がなぜ有効に働いたのか、タグの接尾辞は正しく/articleと綴ってあったので接頭辞とペアをなせないはずなのに、縦書き指定が本文だけに適用されたのはなぜか、ページ送りのブロックが本文の右横に並んでしまったのはなぜか、などなど。ブラウザが受け取ったHTMLソースの当該タグは、接頭辞も接尾辞もartucleと誤記されていることがブラウザのデバッガーでわかる。Wordpressが大きなお世話の自動補正をかけた可能性が高そうだが、これ以上はもう素人の手には負えない、と追求を諦めた。

[補足]
Bing Chat(MicrosoftEdgeに組み込まれたChatGPT)に、この現象について質問してみた。結構頑固で、自説を曲げない。賢いのだか賢ぶった馬鹿なんだか。

Q1.
HTMLでarticleタグの綴りをartucleと間違えたが、タグ内で指定していたclassは有効に機能していた。このようなことがどうして生じるのか?
A1.
articleタグはHTMLで独立した記事セクションを示す要素です. このタグの綴りをartucleと間違えた場合でも、指定していたclassは有効に機能します. ただし、正しい綴りを使用することが推奨されます。タグの綴りが間違っている場合、ブラウザはそのタグを認識せず、意図したスタイルや機能が適用されない可能性があります。また、他の開発者がコードを読む際にも混乱を招く可能性があります。そのため、正しい綴りを使用することで、コードの可読性や保守性を高めることができます.

Q2.
ブラウザはHTML/CSSの綴り誤りを自動補正するのか
A2.
ブラウザはHTML/CSSの綴り誤りを自動補正することはありません。もし、ブラウザが綴り誤りを検出した場合、そのタグやプロパティは無視され、意図したスタイルや機能が適用されない可能性があります. ただし、ブラウザはエラーを検出すると、コンソールにエラーメッセージを表示することがあります。このメッセージには、エラーの種類や発生場所などの情報が含まれています。この情報を参照することで、開発者は問題を特定し、修正することができます.

Q3
綴誤りのタグの中に指定していたclassが有効になるということは、タグは無視されずに自動補正されたということではないのか
A3.
articleタグはHTMLで独立した記事セクションを示す要素です. このタグの綴をartucleと間違えた場合でも、指定していたclassは有効に機能します. ただし、正しい綴りを使用することが推奨されます。タグの綴りが間違っている場合、ブラウザはそのタグを認識せず、意図したスタイルや機能が適用されない可能性があります。また、他の開発者がコードを読む際にも混乱を招く可能性があります。そのため、正しい綴りを使用することで、コードの可読性や保守性を高めることができます.

Q4.
A1,2とA3は矛盾しているが、どちらが正しいのか
A4.
A1,2とA3は矛盾しているように見えますが、実際には矛盾していません。A1では、articleタグの綴りが間違っていても、指定したclassは有効に機能することを説明しました。一方、A2では、ブラウザはHTML/CSSの綴り誤りを自動補正しないことを説明しました。つまり、ブラウザは綴り誤りを検出すると、そのタグやプロパティを無視し、意図したスタイルや機能が適用されない可能性があります。ただし、ブラウザはエラーメッセージを表示することがあります。このメッセージには、エラーの種類や発生場所などの情報が含まれており、開発者が問題を特定し修正するのに役立ちます 。
A1,2とA3はそれぞれ異なる側面を説明しており、矛盾しているわけではありません。articleタグの綴りが間違っている場合でも、指定したclassは有効に機能しますが、ブラウザはエラーメッセージを表示することがあります。このような場合、開発者はエラーメッセージを参照して問題を特定し修正することができます 。