» xhtmlの勉強のブログ記事

マークアップ順序のまとめ

これまでの手順をまとめてみましょう。

1. 　文章を書く

2.　title要素をマークアップし、それをhead要素でマークアップする

3.　見出し要素をh1～h6要素でマークアップする

4.　見出し以外の部分をブロックレベル要素でマークアップする

5.　各ブロックレベル要素の中をインラインレベル要素でマークアップする

6.　title要素以外のhead要素内の部分をマークアップする

7.　DOCTYPE宣言をする

8.　(XHTMLの場合のみ)必要に応じてXML宣言をする

このように、最初に書かれるのは、文章そのもので、その後は、土台(title要素、見出し要素)からマークアップしていき、骨組み(ブロックレベル要素)をマークアップして細かいところをマークアップ、最後にメタデータなどをhead要素内に記述し、適合するDTDを調べてDOCTYPE宣言を(状況に応じてXML宣言も)行うのが効率的なマークアップ手順です。

スクリーンショットでは、マークアップの段階がわかりやすいようにOperaの｢要素のアウトラインを表示｣および｢要素の構造を表示｣(どちらも[表示]メニュー→[スタイル]から選択することができます)を適用していますが、1～5の手順では段階的にマークアップしているのがよくわかるのではないでしょうか。また、6から8はブラウザ上に直接反映されない部分ではありますが、どれもWeb Standardsの実践には重要なマークアップ手順です。

慣れてきたら、最初にDTDを決め打ちして文章を書きながら同時にマークアップしていってもよいのですが、文書構造をしっかりとイメージしながら書いていかないと、どこかでほころびが出たり、DTDに従えなくなったりします。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

XML宣言におけるIE7のバグ

XML 1.0(Fourth Edition)の2.6 Processing Instructionsでは、

<?xml　バージョン宣言　文字エンコーディング宣言　スタンドアロン宣言?>

という記述において、｢最初の<?xmlと宣言の間、および各宣言の区切りは空白文字(スペース文字、タブ文字、改行、復帰)を使用する｣とされています。

しかし、IE7においてその区切りを半角スペース文字以外で記述してしまうと、XML宣言と認識されず、結果として、｢DOCTYPE宣言の前にXML宣言以外の記述がある｣と解釈され、後方互換モードでレンダリングするというバグが確認されます。

IE7において、標準準拠モードでレンダリングされることを期待する場合は、XML宣言中の区切り文字は半角スペース文字を使うようにしましょう。IE6と違い、IE7は半角スペース文字で宣言が区切られたXML宣言を記述した上で、条件に合致するDOCTYPE宣言をしていれば、標準準拠モードでレンダリングしてくれます(もっともIE6もIE7も、意図的に後方互換モードでレンダリングさせたいのなら、このバグを逆手に取るということもできるかもしれませんが)。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

XML宣言の省略

ただし、XHTML文書単体ではなくCSSとのコンビネーションも考えると、省略したほうがメリットを得られる場合があります。XHTMLの場合、UAのレンダリングにおいて、CSSを標準準拠モードで解釈するか、後方互換モードで解釈するかの切り替え(｢Appendix2. DOCTYPEスイッチの一覧表｣)があるのですが、IE6には｢DOCTYPE宣言より前に何らかの文字があると(要するに、本来出現すべきXML宣言であっても)、後方互換モードで解釈する｣というバグがあります。また、Mac版のIE4.5ではXML宣言の記述があるとHTMLとしてレンダリングせず、ソースをそのまま表示してしまうバグもあります。そのため、これらの古いUAをターゲットにする場合は、条件を満たした上でXML宣言を省略することも考慮する必要があります。

DOCTYPEスイッチの一覧表

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

前回までの話を整理すると、｢XMLのバージョンが1.0で、その文書外で参照するDTDがあり、文字エンコーディングがUTF-8またはUTF-16であるか、それ以外の文字エンコーディングでもサーバから明示的に指定されている｣場合は、XML宣言を省略できるということになります。

しかし、XML　1.0の仕様においてXML宣言はすべきとされているので、わざわざ条件に合致するかどうかを考えてまで省略しなくても、必ずXML宣言を指定するようにしたほうがよいように思えます。

XML宣言についての記述はXHTMLの仕様ではなくXMLの記述を参照する必要があります。そこで、このブログを書いている時点でのSMLの最新の勧告であるXML　1.1の仕様の該当部分である

2.8　Prolog　and　Document　Type　Declaration　を見てみると、｢XML　1.1文書は、そのバージョンを指定するXML宣言の記述から始まらなければならない｣と示されています。

しかし、XHTML　1.0は｢XML　1.0でHTML　4を再定義したもの｣であるので、参照すべきはXML　1.0の仕様となります。XML　1.0の該当部分である2.8　Prolog　and　Document　Type　Declaration　を見てみると、｢XML文書(この場合はXML　1.0文書)は、そのバージョンを指定するXML宣言の記述から始まるべきである｣と示されています。

つまりXHTML　1.xにおいては、省略できる条件が満たされていれば、XML宣言は省略することもできるということです(ただし、XML宣言で始まることは可能(MAY)ではなく推奨(SHOULD)であるため、XML宣言の省略を行う場合も｢XML宣言を書くことができる｣ではなく、｢XML宣言を書くべきである｣と、推奨のレベルであることに注意して省略するようにしてください)。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

XML宣言の記述

まずはXML宣言の書き方について考えてみます。構文的には、次のような書き方になります。

<?xml　バージョン宣言　文字エンコーディング宣言　スタンドアロン宣言?>

宣言というのは、(X)HTMLでの属性のようなもので、｢擬似属性｣と呼ばれることもあります。このうち、バージョン宣言は必ず記述する必要があり、文字エンコーディング宣言とスタンドアロン宣言は必要に応じて記述すればよいことになっています。

バージョン宣言

このブログを書いている時点で勧告になっているXMLのバージョンは1.0あるいは1.1です。このどちらかを指定します。ただし、XHTML 1.xの場合はXML 1.0をベースにしていますので、バージョン宣言は1.0を宣言することになります。なお、XML宣言自体を省略したXML文書はXML 1.0文書として扱われるようになっています。そのため、XHTMLにおいては、XML宣言を省略できる場合があるのです。

文字エンコーディング宣言

XML文書の文字エンコーディングを指定しますが、XMLの文書のデフォルトはUnicode(UTF-8あるいはUTF-16)であり、それ以外の文字エンコーディングである場合で、かつサーバから文字エンコーディングが明示されない場合に書くようになっています。しかし、UTF-8あるいはUTF-16の場合でも、省略せず記述したほうがよいでしょう。

スタンドアロン宣言

これはその文書以外に参照すべきDTDが存在するかどうかを指定します。standalone=”yes”であれば外部のDTDを参照することなく、その文書のみで処理を完結するということになります。XHTMLではどのバージョンにおいても外部のDTDを参照するため、standalone=”no”という指定になります。なお、この宣言を省略した場合はstandalone=”no”として扱われます。

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”>

という記述になります。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

今回は、XHTMLで文書を公開しようとしている人のみが対象です。今後もずっとHTML4.01による文書公開を行うつもりであれば読み飛ばしてもかまいません。

HTML文書であればDOCTYPE宣言まで行ってしまえば文書のマークアップはすべて終了ですが、XHTML文書であればさらにもう1つ宣言が必要です。そればXML宣言というもので、XML文書において必要になる宣言のため、XMLベースであるXHTML文書でもこの宣言をする必要があります。なお、この宣言を省略できる場合もありますが、その条件および省略する場合のメリットについては、また後日。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

DOCTYPEは最終的に宣言する

 いよいよ文書のマークアップが終わりました。(X)HTML文書の全体を見返して、それがどのDTDに適合しているかを検証し、適合しているDTDを宣言しましょう。

1つひとつDTDや仕様と照らし合わせて検証してもかまわないのですが、それでは効率が悪すぎます。The W3C Markup Validation Serviceという、機械的に検証してくれるサービスがありますので、それを使うようにしましょう。

なお、検証が終わってから適合したDTDを宣言するというのが本来の手順だと考えられますが、残念ながらThe W3C Markup Serviceでは、DOCTYPE宣言がない(X)HTML文書はエラーとなってしまいます。そこで暫定的に、HTMLであればHTML 4.01 Strict、XHTMLであればXHTML 1.1あるいはXHTML 1.0 StrictのDOCTYPEを宣言してW3C Markup Validation Serviceにかけてみましょう。

｢This Page Is Valid XHTML 1.0 Strict!｣のようにDTDに適合している旨が表示されれば、後述するDOCTYPE宣言を文書の先頭(<html>よりも前)に書き加えてWeb Standardsに則った(X)HTML文書の完成です。

もし｢This page is not Valid XHTML 1.0 Strict!｣のように、DTDに適合していない箇所があると示された場合は、同時にその箇所と内容が表示されていますので、それを修正して再度検証するようにしてください。

各DTDにおけるDOCTYPE宣言

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

body要素の後にhead要素、html要素をマークアップする

インラインレベル要素のマークアップまで終わったら、body要素内のマークアップは終了です。
title要素をマークアップした際に、同時にhead要素のマークアップをしていますので、</head>の直後に<body>を記述し、文章の最後に</body>を記述しましょう。

その後に、head要素内にメタデータを記述していきます。メタデータの記述についてはまた別で解説しますが、文書情報や作成者情報、関連する文書へのリンクなどを記述します(この例ではまだメタデータは記述しません)。

head要素の内部の記述が終われば、全体をhtml要素でマークアップします。まだDOCTYPE宣言やXML宣言などが残っていますが、これでHTML文書としては一応完成しました。なお、html要素にはlang属性やxml:lang属性、(XHTMLの場合のみ)xmlns属性を指定することが推奨されていますので、同時にマークアップしておきます。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

インラインレベル要素でマークアップする

ここまででbody要素内のマークアップの大部分は終わりました。最後に、各ブロックレベル要素内でさらに細かく意味付けを行いたい部分をインラインレベル要素でマークアップしましょう。

今回の例では、マークアップへのリンクや、お問い合わせ用のメールアドレスへのリンク、および強調して伝えたい部分をマークアップしています。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

ブロックレベル要素でマークアップする

xhtmlの勉強　[xhtmlはまず文章ありき_4]までで見出しおよび共通情報のマークアップが終わりました。この時点でまだマークアップが終わっていない部分を、何かしらのブロックレベル要素(%Block)でマークアップしましょう。というのも、body要素はXHTML 1.0 Strict DTDでは<!ELEMENT body %Block>と、直接の子要素には

%block

form

%misc

しか配置できないようになっているためです。
これらのグループに含まれる要素を羅列すると、

p、h1～h6、div、ul、ol、dl、pre、blockquote、address、fieldset、table、form、noscript
ins、del、script

があり、このいずれかがbody要素の直下に現れることになります。

ブロックレベル要素とは

ブロックレベル要素の定義は、HTMLの使用にもCSSの使用にも登場しますが、それらの定義はまったく同じではありません。
HTMLにおけるブロックレベル要素は、HTML 4.01の7.5.3 Block-level and inline elementsにてbody要素内に、(直接の子要素として)現れる要素と示されており、CSSにおけるブロックレベル要素は、CSS 2.1の9.2.1 Block-level elements and block boxesにて｢ソース文書の要素のうち、ブロックとして視覚的にフォーマットされる要素と示されています。｣
つまり、HTMLにおけるブロックレベル要素はdisplayプロパティの値がblock、list-item、run-in、tableを取り得る要素群となります。

これらは同じような定義に見えますが、実際は違います。たとえば、CSSの定義に従えば、body要素は｢Default style sheet for HTML 4｣においてdisplay blockと示されているのでブロックレベル要素といえますが、HTMLの定義ではbody要素は%Blockに含まれないのでブロックレベル要素とはいえません。

今回の例ではすでに見出しや共通情報はマークアップが終わっていますが、すべての文書をこれらのうちのいずれかの要素でマークアップするということが重要となります。しかし、%Blockに含まれる要素の数はそう多くありません。マークアップする文書が、これらのどの要素を用いるのが適切かを考えるのはあまり難しくないでしょう。

この例では、残りのテキストはすべてp要素でマークアップすることにしました。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

見出しだけを抜き出して正しい目次になるか

[xhtmlはまず文章ありき_3]で見出しのマークアップを行いましたが、なぜあのような見出しレベルになっているのかをもう少し詳しく考えてみましょう。[xhtmlはまず文章ありき_3]でマークアップした見出しだけを抜き出すと、次のようになります。

これを、たとえば次のようにマークアップするというのも1つの正解ではないかと思われる方もいらっしゃるかもしれません。

しかし、後者の見出し抽出例では、プレスリリースとそれぞれの日付におけるお知らせは、同一のレベルの見出しとなります。そのため、実際はそれぞれの日付におけるお知らせは、すべて｢プレスリリース｣に包含されるので、h2要素ではなく、h3要素でマークアップするほうがより適切といえます。

では、｢お問い合わせ･ユーザサポート｣はどこに包含されるのか？
この例では｢株式会社test｣に包含されるので、h2要素でマークアップするのが妥当かもしれません。しかし、サイト内の文書すべてに登場するような問い合わせ先や作成者情報などは、突き詰めればhead要素内のmeta要素やlink要素などで表すのが最も適切だといえます。

しかし、現在ではそういった情報(メタデータと表すこともあります)を扱うUAはそう多くはないため、暫定的にbody要素内に書くのがまだまだ主流です。そのため、共通の情報は見出しを割り振ってアウトラインに含めるのではなく、逆に見出しを振らずにマークアップするほうがよいでしょう。

この例では、見出しを振らずに、dl要素(定義リスト)を使って共通の情報をマークアップすることにしました。なお、文書に対する問い合わせ先をマークアップする要素としてaddress要素がありますので、併せてマークアップしています。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

その文章の中で見出しにすべき部分は何か

 タイトルを付けたら、次に文章内で見出しにすべき部分を探しましょう。見出し要素(h1～h6要素)は、その章や節の内容を短く要約して記述します。UAによっては、見出しのみを抽出して文章の目次を自動生成する(アウトライン化)機能を持っているものもありますので、title要素同様に見出し要素のみを抜き出しても、

ある程度の内容の把握ができるようにしましょう。

サンプルの文書では、会社名および全体の内容と各日付のリリース内容を見出しとしてマークアップします。たとえば、業務再開のお知らせ部分の見出しを順に見てみると｢株式会社test｣の｢プレスリリース｣の｢2009年1月9日付けの業務再開のお知らせ｣となり、見出しだけでも大まかな内容を把握することができます。

この例ではh1～h3要素を用いていますが、それぞれをどのような根拠で割り当てたのか、また｢お問い合わせ･ユーザサポート｣はなぜ見出しとしなかったのかは、次回解説します。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

その文章のタイトルは何か

xhtml文書において、最もその内容に気を遣うべきなのがtitle要素です。これはUAではウィンドゥのタイトルとして、あるいは何かしら別の手段で常にユーザーに提供するようにしなければならないとされています。

また、文書作成者の観点から見ても、HTML4.01の7.4.2 The TITLE elementでは、｢すべてのHTML文書は、head要素内に1つのtitle要素を持たなければならない｣と示されており、title要素は必ず提供するべきであることがわかります。

title要素は、その文書の内容を識別するために用いられるため、title要素だけを見ても文書の内容がある程度読み取ることができるようにしなければなりません。まれにサイト内のすべての文書に同じtitle要素を付けているケースが見られますが、これは仕様に従っていないだけでなく、閲覧者にとっても不親切ということになりますので、

すべて同じタイトルということはしないようにしましょう。

さて、[xhtmlはまず文章ありき_1]の文書にタイトルを付けてみます。｢株式会社testのプレスリリース｣がこの場合の適切なタイトルの一例だと思いますので、そのテキストをtitle要素でマークアップして文書内に挿入しましょう。そして、title要素はhead要素内に1つだけ配置されなければならないので、title要素自体をhead要素でマークアップすることになります。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

xhtml文書のマークアップについてです。

注意してほしい点は、マークアップというのはあくまで文章への｢印付け｣であり、文章が完成してから行うものであるという点です。xhtml文書の作成に慣れてくれば、文章を書きながら同時にマークアップを行っていくということも不可能ではありませんが、まずは正しい手順で一通りやることです。

ここでは、とある企業サイトにおけるオフィス移転に関するプレスリリースのxhtml文書を作成するという仮定で実際に作業を進めながら説明します。
まずは、通常の紙媒体に書くようなイメージでプレスリリースの文章を書いてみましょう。

文章を書いた後は、会社パンフレット等の紙媒体であれば、会社名を大きく目立たせたり、各見出しなどをバランスよく配置したりするところですが、xhtml文書の場合は見た目のことを考えずに、文書構造のことを考えていきます。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

見出しレベルは適切に指定しましょう。h1レベルから開始し、途中のレベルをスキップしないように心がけてください。

HTML 4.xおよびXHTML 1.xでは、見出しをマークアップするためにh1要素、h2要素、h3要素、h4要素、h5要素、h6要素(以降、これらを総称してhn要素と表記します)が用意されています。これらの見出しレベルは、マークアップする際にどのように割り当てていくべきでしょうか

HTML 4.01の7.5.5 Headings: The H1, H2,H3,H4,H5,H6 elementsに、｢HTMLのみでは見出しから章･節の生成することはないがUAの機能によってそれが実現するという可能性や、スタイルシートによるコントロールができるようになる可能性がある｣と示されています。

実際に、ブラウザによってはマウスやキーボード操作などで｢次の見出し｣へスキップしたり、見出しのみを抽出してアウトラインを生成し、その見出しをクリックすることで該当セクションをすばやく表示したりする機能が実装されているものがあります。

見出しを適切に割り振ることで文書の構造を明確にするだけでなく、実際の閲覧場面における利便性の確保もできるのです。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

xhtmlにおけるid属性とclass属性の使い分けは難しいところです。どちらもxhtmlの要素に対して指定し、xhtml文書の文章構造を示すのですが、cssのセレクタとしても利用できるため、ついついcssありきでどちらの属性をするか、またはどちらの属性も指定しないかを決めてしまいがちです。class属性やid属性を指定する要素が、xhtml文書の構造をどう担っているかをよく考える必要があります。

－↓－　id属性の特徴　－↓－

■　xhtml文書中で一意でなければならない
■　要素の識別子として利用される
■　cssのセレクタの固有性の点数が高い

といったことが挙げられます。その要素に対してid属性という｢固有の名前｣を指定します。

 －↓－　class属性の特徴　－↓－

■　文書中で同じ値を何回指定してもよい。
■　属性の値を空白文字で区切ることで、1つの要素に対して複数のclassを指定することができる。

といったことが挙げられます。すなわち、その要素に対してclass属性という｢分類｣を指定します。

■　id属性とclass属性

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。

htmlでは、要素名を書く際に大文字･小文字のどちらを使ってもよかったです。

これは要素名がCase Insensitive(大文字･小文字を区別しない)とされている為です。

なので<HTML><html><Html>と書いてもすべてhtml要素の開始タグとして認識されてました。

それに対しxhtmlでは大文字と小文字が区別されます。というより、要素名に関しては大文字の使用は認められていません。

それはxhtmlのベースとなるxmlにおいてCase Insensitiveとされていることに起因しているためで、かつxhtmlのDTDdocument type definition (文書型定義。SGMLやXMLなどのマークアップ言語で文書を記述する場合、タグや属性などの要素をどのような役割で用いるかを定義したもの。)]では要素名はすべて小文字で定義されていることによります。

これからxhtmlを用いて文書を作成する人はもちろん、htmlを用いて文書を作成している人も、将来的にxhtmlへ移行する可能性を視野に入れて、要素名はすべて<html>のように小文字で記述するように心がけましょう。

研修・会議のご利用は
名古屋の会議室・研修施設のゼミナールプラザを是非ご利用くださいませ。

名古屋のご宿泊にはゼミナールプラザすぐ隣り
名古屋のビジネスホテル・金山プラザホテルをどうぞ。