« エントリーの投稿画面 | MTタグ予備知識 »

XHTML予備知識

Movable Typeなどのブログツールが用意しているデフォルトのテンプレートの冒頭には、下記のように書かれています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

これは、「DOCTYPE宣言」と呼ばれているものです。

さて、ホームページビルダーなどのツールを使ってしか商用サイトを作成できない場合、これから述べることはチンプンカンプンかもしれませんが、Movable TypeはHTML 4.01ではなく、XHTML 1.0で書かれるようになります。

ここでは、商用サイトがXHTML 1.0でコーディングする際の注意点だけ述べてみます。

XML宣言

XHTMLの解説書によると、ファイルの冒頭にXML宣言を記述することが推奨されています。

<?xml version="1.0" encording="Shift_JIS"?>

特に、文字コードがUTFでない場合は、必ずXML宣言をしなければならないように言われています。

ところが、ブラウザには互換モードと標準モードがあって、Windows版のInternet Explorer 6では、このXML宣言があった場合に互換モードになってしまいます。

結論として、IE6Win版とそれ以外の表示の相違を避けるために、ブログ塾ではXML宣言は書かないことを推奨します。

DOCTYPE宣言とhtml要素の属性

難しい専門用語が続きますが、ブログ塾で配布しているテンプレートのように、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

DOCTYPE宣言は、XHTML 1.0 Transitionalで限りなくおなじみのHTML 4.01に近づきますし、html要素の属性に日本語を指定することによって、検索エンジンなどの言語別検索に配慮しておきます。

タグの小文字化

XHTMLでは、タグの要素名や属性名は、すべて小文字にする必要があります。

他人様のソースを流用する場合は、要注意です。

終了タグは必須

よくあるパターンは、<p>のみで</p>を書かないこと。
そのほか、私はよく、<td>や<li>を閉じタグなしにしていました。

これが許されません。

空要素

<br>は、<br />、<img src="～">は<img src="～" />、<input type="radio">は<input type="radio" />などと書く必要があります。

属性値の引用符

無料配布のCGIなどのソースにもよく見受けられますが、<table border=0 cellspacing=0 cellpadding=0>などのように、はだかの「0」は絶対ダメです。
「"0"」としなければなりません。<table border="0" cellspacing="0" cellpadding="0">

属性値の「&」

スクリプトや検索エンジンの検索結果などで「&」が含まれている場合は、「&amp;」と記述することを心掛けてください。

ツールを使う

エントリーの投稿でテキストフォーマットを「なし」にしたために、記事はこちらでマークアップしなければなりません。
その時に、上記のように少し厳密にコーディングする必要が出てきます。

私は、エントリーの投稿や編集は、Dreamweaverを使っています。
このDreamweaverには、XHTMLへの変換機能があります。

また、The W3C Markup Validation Serviceでチェックしてみることをお勧めします。

Firefox + Web Developer Extension

さて、ブラウザの表示確認は、Internet Explorer 6 Windows版をベースに、今ブレイク中のFirefoxで自ブログを確認しておきましょう。

入手は、Firefox - Web の再発見で。

そして、Firefox用の便利な機能拡張が、「Web Developer Extension」です。Firefoxを立ち上げて、Web Developer Extension on chrispederick.comのページの右上の「Web Developer for Firefox」をクリックしましょう。

Web Developer Extension

詳しい解説は省きますが、ページを表示した状態で、Validationボタンを押し、HTMLやCSSをチェックしてみましょう。

[ 管理人編集 ]

« エントリーの投稿画面 | MTタグ予備知識 »

株式会社アルゴリズムのSEO塾セミナーは、東京新宿・大阪梅田で開催

検索エンジンのアルゴリズムを深く掘り下げ、ペナルティを速く発見。SEO塾セミナーは費用対効果バツグン

Yahoo!で突然、順位がダウンした！　トップページが消えた！！
Googleで、何をやっても順位が上がらない！　ディレクトリ丸ごとページが検索されなくなった！！

東京新宿、大阪梅田で、最高最強最新のSEO塾セミナーを随時開催いたします。

上位表示とリカバリー策は業界オンリーワン。よその「SEO対策」に失望したならSEO塾セミナーへ