戯れ言葉

XHTMLやHTML4など混在するFC2ブログ< />を吐き出すFC2ブログ?!

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

WEB上の記事、FC2ブログといった記事をHTMLとかで記述するのですが、HTMLの規則に従って正しく記述されているのかという判定をしたい時、HTMLのバリデーター「WHATWG - HTML Conformance Checkers (Nu Html Checker)」というサイトを利用します。(最近はHTMLと云えばHTML5というHTMLの最新バージョンのことを指します。 これはHTML5か参照)

でFC2ブログでコメントのある記事をこのチェッカーにかけると、最新のHTMLに従ってブログを記述しているのにコメント欄にHTMLで変更された<br />がFC2ブログ側が何か自動的に書き出していて、WHATWG - HTML Conformance Checkers=W3C Validator が一杯警告を出してきた!!とかで、それも最近になって

とかの話でちょっと調べてみました。

この記事は*Essence/aki氏のブログに投稿した私=higeのコメントXHTMLを基に加筆訂正したものです

XHTML

この旧HTMLの歴史から引き継がれてきた問題。 私なりに整理してみました。

HTMLのバリデーター 「WHATWG - HTML Conformance Checkers」で吐き出される評価にはエラーとWarningがあります。

このバリデータでは、エラーは赤文字で表示されその部分はHTMLとして機能しない部分です。この様な箇所があると表示がどうなるのかが保証されないという致命的なエラーです。

Warning(警告)は推奨されていないか不要な部分で、他の部分に影響が出るかも知れないので止めましょう、という部分です。

今回の<br />に対するHTMLバリデータで吐き出された評価は

Warning: Self-closing tag syntax in text/html documents is widely discouraged; it’s unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you’re using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.

警告 text/html文書における自己閉鎖タグ構文は広く推奨されていません。不要であり、他のHTML機能(例えば引用されない属性値)と悪い相互作用があります。もし、すべてのvoid要素に自己閉鎖タグ構文を注入するツールを使っていて、それを防ぐオプションがない場合は、別のツールに切り替えることを検討してください。

(DeepLによる翻訳)

という警告ですね。

で<br />というタグはHTML(HTML5)では<br>と記述する改行を、XHTMLという別のマークアップ言語で記述したものです。このXHTMLではbr要素やmeta要素、img要素の最後にスペース+スラッシュ「 /」は必須でした。


テキストの改行には
    <br />
metaタグ
    <meta http-equiv="Content-Style-Type" content="text/css" />
imgタグ
      <img src="https ・・・・・・ " alt="" etc />

と言った具合です。

最近主流のHTML(HTML5)ではこのタグの最後のスペース+スラッシュ「 /」は廃止されています。ですが禁止はされていませんでした。やめてください、という強いお願い。でした。

WEB上に記事を表示するには記事のトップにWEB規則の、どの規則に従って記述しているかの宣言が必要です。 例えば私のブログでは <!DOCTYPE html>と宣言しています。(HTMLのトップに書きます)なので私の記事はHTML基準の表記に従って記述しています。なので改行は<br>ですしimgタグの最後やmetaタグの最後のスペース+スラッシュも判る限り訂正しています。(アフィリエート部分で訂正できる部分も含めて)

最新のHTML(HTML5)ではないHTML4とか件のXHTMLの場合でもバージョンに従ってDOCTYPEの宣言をしなくてはいけません。 !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法(potepanstyle氏)の記事が参考になると思います。<br />という記述はXHTMLでは必須ですからこう書かないとエラーです。

html5ではそう書くとエラーとまでは言われませんが非推奨の指摘を受けます。と指摘されているのは The other way roundのhtml5よくある間違い勘違いの(Akira氏の)記事です。

ですが、こんなweb上の記事を表示する大手のChrome、Firefox等は独自に解釈してくれて、XHTMLやHTMLが混在する記述もちゃんと障害なくほぼ旨く表示してくれてる様です。

ところで、FC2ブログのテンプレートやプラグインには、HTML5に至る迄のHTML4とかXHTMLの文法で記述されたものが過去から沢山残されており、例えば共有テンプレートでは2004年頃のものが一番古いようです。そのテンプレートのバージョンは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">となっていてこのテンプレートではHTML4の文法で記述すると宣言しています。

公式テンプレートでよく見かけるのはgrey_3columnと言うテンプレートです。なんかこのテンプレートは人気がありますね。でこのテンプレートは<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">とXHTMLが宣言されています。

この様にFC2から提供されているテンプレートには様々なバージョンのテンプレートが混在しており、XHTMLでは必須でHTMLでは許容されている< />という記述をコメント欄というFC2側で自動処理されるプログラムで採用しているのだと推察されます。なので< />は止めてくれとは言えないのではと。FC2側でHTMLトップのDOCTYPEを判断して正規のタグを吐き出してくれれば良いのですが。

また、FC2ブログに関しては以前Akira氏の記事かコメントにFC2ブログは中国でも使われておりそのテンプレートがXHTMLなのがあるのでXHTMLの記述を残さざるを得ないのではと、おっしゃってました。

ところが調べている内に気づいたのは、FC2が用意してくれている記事編集用のeditorにも絡んできて、新編集画面のeditorは見たまま編集では改行に<br>とスラッシュなしのタグを書き出していますねぇ。

自分でどうにか出来るパワーユーザーは90%ぐらいまでどうにか出来るんでしょうが、HTMLやCSSとかをそれって何?と思うであろう殆どのブログユーザーにとってはなんの意味も無い話でしょうねぇ。

WEB上のテクニックは素晴らしいものになってきています。今まではこういったマークアップ言語はPCが判定するので一語一句間違ってはならないというのが専門家達側の常識でしたが、googleがそんな意地の悪い判定をしないで< />と</>の違いぐらいブラウザ側で判定しろよと思う訳で。

それにもつけて、こんなweb上の記事を表示する大手のChrome、Firefox等は独自に解釈してくれて、XHTMLやHTMLが混在する記述もちゃんと障害なくほぼ旨く表示してくれてる様です。

追記:2022 10 07 現在<br />の評価はwarningからinfoに変更になり、void要素の末尾のスラッシュは何の効果もなく、引用符で囲まれていない属性値と悪い相互作用があります。というメッセージになっています。

スポンサーサイト



Comments 4

There are no comments yet.

aki  

記事、有難うございます。

早速リンクを貼らせて頂きました。(^-^)

FC2もそうなのですが、世の中にあるwebページってHTML4やら5やらXHTMLやら…色々有るので、ブラウザ側で「良きに計らう」しかないですよね。
それまでの策定や勧告をしていた「W3C」のツケを「WHATWG」が取り敢えず良しなにしてくれているだけであって、「でもそろそろ XHTML やめよーよ」と言っているのが今回の【警告】なのかなと。
結局すぐには止められないので、この形が続くような気がします。^^;

改めまして、記事有難うございました。m(__)m

2022/10/03 (Mon) 21:56 | 再編集 | 返信を書く |   
hige

hige  

To akiさん

リンクを貼って戴き恐縮でございます。
何かのお役に立てばと


>「でもそろそろ XHTML やめよーよ」と言っている

まさにそうだと思います。が、WHATWGの動きだけでブラウザ側は動いてませんねぇ。Chromeなどは記事を「検証」で確認すると<br />部分は<br>と表示されて完全に読み替えているようです。

コメントありがとうございました。

2022/10/04 (Tue) 09:21 | 再編集 | 返信を書く |   

風仙  

FC2 ブログの問題

1週間ほど前、知人のブログが未だに SSL 化されていないので、知人にメールして SSL 化を勧めました。また、HTML のバージョンが2017年に主役の座を降りた XHTML 1.0 が基本で、もっと古い HTML 4.01 等の align 属性(XHTML 1.0 でも非推奨)が見られることを指摘しました。

ただ、SSL 化をとっても、
・プラグインがそのまま動作するかどうか不安
・トップページのイメージ画像にも http://~~ と URL を記述しているのをどうするか
・過去の記事をどうするか
が課題になりますね。

私のサイトは、私自身が古い人間なので、WordPress やブログさえも使わずに HTML/CSS の手打ちです。2020年の夏にそれまでの XHTML 1.0 から HTML5 にリニューアルし、曲がりなりにレスポンシブ・デザインにしました。今年になって新規作成したページは、モバイル向けにはページの全体的な横幅を calc(100vw - 16px) と記述しています。HTML エディタとして Visual Studio Code を使い、いくつか拡張機能をインストールして、Emmet 省略記法も使ってページを書いています。

2023/11/09 (Thu) 12:51 | 再編集 | 返信を書く |   
hige

hige  

To 風仙さん

 コメントありがとうございます。

 SSL化。
 FC2ブログでは数年前にSSL化の移行があり、それまでにアップロードしてあった画像はFC2側が自動的にSSL化してくれました。多少の不具合は出たのですが、大量の画像を使用している私のようなユーザーは大変助かりました。
 ただブログ自体のSSL化は個人に任されており、WEBの動向に無関心か、解らない方はそのまま非SSLのままだと思います。
 ツイッター(X)上で発信している通信社の一部に非SSLのものがあるのは戴けませんです。

 画像のSSL化は再アップロードしてリンクを張り直すしかないのでは。
 過去記事に関しては画像のような直リンクは張り直すしか無いですが、単なるリンクは自分のサイトのSSL化とは関係ないので無視ですかね。記事にバナーとかを貼ってあるとちょっとめんどい。暇に任せて書き換えるしか無いようで。バナーとか拍手などの画像は記事の中では無くて、それを避ける形でのテンプレート内HTMLに書くのがいいと思いそうしています。

 VSCodeはほんと使い勝手いいですね。「Emmet 省略記法」ってVSCodeのスニペットと同じ事なんでしょうか。私はVSCodeのスニペットの登録でやってます。

 私はAkira氏提供のテンプレートをかなり変更したものですからスマホ向けには結構苦労しました。おかげでHTMLに関してはかなり勉強させてもらいました。

 今後ともよろしくお付き合いくださいませ。

2023/11/09 (Thu) 21:13 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

 お名前とか
 ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます