サイトには情報の構造とスタイルの2要素が必要なことが分かった。ではさっそく、情報の構造を記述するための(X)HTMLコードを、テキストエディターを使って記述し、ブラウザに読み込ませてみよう。今回は(X)HTMLとして整理する書き方の理解を中心に考える。正しい(X)HTMLをブラウザに読み込ませることだけを実現する目的なので、例に使うテキストは単なる長文で、とくに構造化は必要ないものを選んだ。

情報にタグ付けする

　Webページに掲載するテキストなどの情報は、半角英数字でタグという記述を使ってその用途を決めていく。まず、ブラウザに文字を表示させることだけを考えて、前半部分のメタ情報は割愛し、BODY部だけをもたせたコードを書いてみよう【図１】。どんな種類のHTMLであってもこのデータがHTMLであることをまず明確にするため、HTMLというタグを最初に入れる。次に情報の「本文」あるいは「中身」を流し込むためのBODYタグを入れる。BODYタグでマークアップした部分が、視覚情報としてブラウザに表示される部分になる。
図1 最も単純なコードの例。HTMlとBODYタグでマークアップしたテキストファイルに、HTMLの拡張子を付けて保存すればブラウザは文字を表示してくれる

　タグは一部例外を除いて開始タグと、開始タグの頭にスラッシュを追加した終了タグの２つを1セットにして使い、セットの間に情報を挟む形で記述するのが基本形だ。記述例の場合HTMLコードとして正式な体裁ではないが、文字を表示するだけならこの構成でもブラウザは認識してくれる。ただし、ブラウザからファイルを開くコマンドで読み込むときに半角英数字で（text.html）のようにHTMLの拡張子を持たせたファイル名を付けておく必要がある。

　記述例ではHTMLタグの中にBODYタグを抱き込む形、つまりタグの入れ子関係が見た目にすぐわかるように、中のBODYタグの記述とその中身に対してタブで余白を入れる（頭下げ）を行っている。これは編集しやすさに配慮しただけなので、なくてもよい。極端な話、これらの記述を改行なしの1行におさめて書いたとしても何ら問題は発生しない。ただそうすると、タグを直接編集しにくいうえに、後々文書構造をタグから把握しようと試みるのも難しくなってしまう。タグはできるだけタグ同士の関係性が分かるような、整理した記述を心がけるほうが良いだろう。作例の表示結果は【図２】のようになった。コードの記述時、便宜上入れていた本文内の改行は、ブラウザ上には反映されない。
図2 図１のコードの表示結果。コード上では改行がなされていたが、ブラウザ上で改行は反映されていない。文字をレイアウトする領域をタグなどで示さない限り、テキストはブラウザの幅で折り返す形で表示される

情報をXHTMLにする

　HTMLを宣言してファイル名を付けてしまえば表示は可能だというところまで来たが、コードの前半部分に適切な記述を追加するまでは正しいHTMLとは言えない。そこで作例ではコードをXHTMLにする記述を追加する。HTMLとXHTMLはデータのタイプという切り口で比較するとどちらも単なるテキスト（アスキー）データだ。しかし、フォーマットで考えると、HTMLはHTMLだがXHTMLはXMLの仲間である。本当であれば拡張子もXMLとすべきなのだが、今現在普及しているHTMLとうまく混在させるのは難しいため、とりあえずはHTMLと同じ拡張子があてがわれている。XHTMLの場合、コードの1行目「このファイルはXMLですよ」という意味の宣言文から始める【図３】。
図3 図２のコードにメタ部分の記述を増やし、正しい体裁のXHTMLコードとした例。図２はどちらかというとHTMLとして正しくない書き方

　ここがHTMLとXHTMLを分けるポイントにもなる。こうした記述は、体裁を作るためでも、データ形式をXHTMLに変換するためでもなく、このデータに対してXHTML特有の機能を与えるために必要なものだ。しかしながらこの部分に関しては、レンダリング結果としてブラウザ上に表れないので、ページデザインの作業上その重要性がひしひしと感じられない点でもある【図４】。極端な話、XML宣言文のどこかにタイプミスがあったとしても、ブラウザは平然とページを読み込んでくれることだろう。
図4 図３の表示例。タグで改行指示を追加した

　メタ情報部分の読み解き方は次に譲るとして、標準的なXHTMLと呼ばれるに足るデータは作例のような記述を含んだページだということだけ、今の段階で意識しておいて欲しい。また、表層的な意味における「Webページデザイン」は、実装面でこれらのメタ情報に基盤を支えてもらうことによって、はじめて「Webサイトデザイン」になるのだということについても念を押しておきたい。