XHTMLについて ３

無資格ながら、パソコンの補助講師めいたことを４〜５年やっています。MOS検定、日商検定の受験も考えて、４〜５０位の 関数の勉強などもしましたが、後期高齢者で今さら就職する訳でもありませんので、高い受験料を払って何回も受験する気 にもなりません。
しかし、無料のレッテルがありました。それは、ホームページ作成について、W3C(The World Wide Web Consortium)が判定する「手書きによるHTMLの検証」です。
今回、トップページ目次にある「XHTMLのテーブル」について、検証を受けてどうやら「レッテル貼り付け」の許可をもらうことができました。(参照：こちらをどうぞ) 以下、その経過と問題点などを記載します。

「XHTMLのテーブル」を最も厳格な、XHTML 1.0　Strict で検証

HTMLの変遷

1. 1995年11月　　HTML 2.0を策定
2. 1997年 1月　　HTML 3.2を勸告 (W3C)
3. 1997年12月　　HTML 4.0を勸告 (W3C)
4. 1998年 5月　　CSS 2を勸告 (W3C)
5. 1999年12月　　HTML 4.01を勸告(W3C)ーHTML 4.0を破棄
   　(内訳)　　　　　 HTML 4.01　Transitional
   　　　　　　　　　 HTML 4.01　Frameset
   　　　　　　　　　 HTML 4.01　Strict
6. 2000年1月　　XHTML 1.0を勧告 (W3C)
   　(内訳)　　　　　 XHTML 1.0　Transitional
   　　　　　　　　　 XHTML 1.0　Frameset
   　　　　　　　　　 XHTML 1.0　Strict
7. 2001年5月　　XHTML 1.1を勧告 (W3C)
   　　　　　＊[XHTML 1.0]では、Transitional、Frameset、Strict の3つのDTDが有りましたが
   　　　　　　[XHTML 1.1]では、DTDが１つに纏められた。

１．文書の Markup の検証　　２．CSS(カスケーデング スタイルシート)の検証

問題点１：HTML 4.01で物理タグの非推奨とされたタグ類と HTML 4.01で繰り入れられた読み仮名(ルビ)関係タグの使用禁止

物理タグとして挙げられるタグ(要素)
ユーザのハード環境に依存する傾向があり、アクセシビリティの上からも物理タグの使用を避け、文字装飾はスタイルシートで行う。

• i (斜体にする) CSSで代替━[font-style:italic;]
• b (太字にする) CSSで代替━[font-weight:bolder;]
• u (アンダーライン) CSSで代替━[text-decoration:line-through;]
• font (色,サイズ,書体などの指定) CSSで代替━例えば[color:red; font-size: 12pt; font-family: ＭＳ 明朝；]等
• center (水平位置のセンタリング)CSSで代替━セレクタdivに[　div{text-align:center;}　として中央に置きたい要素を<div></div>タグで囲む]
• s (抹消線付き文字)CSSで代替━[text-decoration:line-through;]
• tt (等幅フォントにする)CSSで代替━[font-family:monospace;]

その他 「フレーム」,「読み仮名」関係タグ

• frame (フレーム内のファイルを指定)
• frameset (フレームに分割)
• iframe (インラインフレーム)
• noframes (フレームが利用出来ない場合に適用)
• rb (読み仮名をつけるテキストを指定)
• rp (読み仮名内の記号を指定)
• rt (読み仮名内のテキスト)
• ruby (読み仮名)

XHTML 1.0　Strict では、完全に使用禁止。

問題点２：[hnタグ]には、使用順序、指定席がある。

例えば、[h1]→[h2]→[h3]→[h4]と来て[h3]が許されるか？、[h2]→[h１]は論外。

問題点３：[address]の後には[進む]、[戻る]等のナビゲーション以外のテキストは不可

問題点４：[終了タグ]と[開始タグ]間の<br />の使用禁止

個人的な見解で見栄えを良くしたつもりの[br]タグ濫用は禁止。段落タグ類は既に上下に空行をとっている。[h]タグは空行幅が大き目になっている。 (ただし、欧米人感覚-英文感覚と思えないでもないが？)

問題点５：</html>の後の記述禁止

無料の「ホームページ レンタルスペース」にありがちな、</html>後のタグ記述が有れば絶対に合格しない。

問題点６：ブラウザの独自タグ使用禁止

マイクロソフトの[marquee]（トップページで列車を走らしています。）や、ネットスケープの[blink]なども不合格です。

問題点７：非推奨タグ[center]、[embed]も使えません。

[marquee]、[center]、[brink]など、超便利なタグですが、残念ながら使用禁止です。また、このページで音楽の操作盤に[embedタグ]を使用しているので、 このページは不合格がハッキリしています。

問題点８：CSS検証で、要素名をセレクタに記述した場合、「セレクタ、プロパテイー、値」までを記述する

「セレクタの種類」にもよると思いますが[colorの値],[font-sizeの値],[font-familyの値]を忘れないよう。たとえば[font-size: ;]は不可。

問題点９：[frameタグ][target属性]の使用禁止

トップページではフレームを使用しています。また。別窓表示の[target]属性を使用しています。 どちらも、[xhtml 1.0 strict]では使用不可です。故に「W3C」の検証は受けません。「HTML 4.01 Transitional」仕様に変えれば、 ことは済むのですが、敢えて勉強のため[xhtml 1.0 strict]で記述しております。IE等ブラウザが適当に(また、勝手に)表示して呉れています。

いよいよ本家本元の「W3C Markup & CSS Validation Service」の検証

</html>の後にヤフーのコマーシャル タグが表示されたり、されなかったりしますが、それを削除して、表示されない状態で検証しました。

W3C CSS Validation Service」の検証

W3C Markup Validation Service」の検証

XHTML+CSSの役割分担

益子貴寛氏より引用
CSS2のエラーを訂正し、一部の内容を修正したCSS2.1という仕様もある。

シリコンカフェ代表の森川眞行氏は、(X)HTML+CSSを家の建設になぞらえて、 「HTMLとCSSってのは、ビルを組み立てる鉄骨（HTML）と内装（CSS）みたいなもの」と述べている （文末のリンクリスト参照）。言い得て妙なたとえであり、XHTMLを鉄骨や壁、CSSを内装や外装と考え、両者の役割をきちんと分離することで、 見た目 (CSS) はあとからいくらでも変更することができることになる。たとえば、サイドバーの位置を変更するのに、 テーブルレイアウトではすべてのページのコードをひとつひとつ書き変える必要があるが、CSSレイアウトであれば、 CSSコードの一部をちょっとだけ修正することで、すべてのページのサイドバーの位置が変更できる。 このように、CSSレイアウトには、SEOやアクセシビリティといったメリットのほかにも、「メンテナンス性の向上」という大きな利点があるのだ。 blockquoteタグに囲まれた内容は、一般的なブラウザでは上下左右にスペースが入ります。

「XHTMLの時代へ」もXHTML 1.0　Strict で検証

「XHTMLについて２」の検証もどうやら通過したので、ついでに使用タグ数の少ない、平凡な文書の「XHTMLの時代へ」も検証し、無事通過しました。

下記２点がその文書です。

第１点：「W3C Markup Validation Service」の検証

Congratulations
The document located at <http://www.geocities.jp/cxnpp630/xhtml1.html> was successfully checked as
XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and 
that we successfully performed a formal validation using an SGML or XML Parser (depending on the 
markup language used). 

"valid" Icon(s) on your Web page

To show your readers that you have taken the care to create an interoperable Web page, you may display 
this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page: 

「 [W3C XHTML 1.0]のロゴ図」
  <p>
    <a href="http://validator.w3.org/check?uri=referer"<img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>

第２点：「W3C CSS Validation Service」の検証