HTMLで示せる節(ふし)、つまり文書構成節は、heading要素とp要素だけではありません。
もし、前章の2.見出し以外の文書構成節をpタグで括りましょうにてマークアップした節が、上で挙げた4つのうちいづれかの意味をもっていたのなら、p要素ではなく、これらの要素としてマークアップすると、その役割をもっとはっきりと示すことが出来ます。
もし、この4つの要素として明示する場合、ただ単にpタグを置き換えるだけではいけません。
必ずグループ化という作業が必要になる、と覚えておいて下さい。グループ化については、例文をマークアップしながら解説いたします。
さて、例文における、「詞、コラム、読後感、映画レポ」等の節は、「リスト項目」という特徴をもっていると考えられます。これは、HTMLではli要素ですから、liタグで括り直しましょう。
<title>シンプルウェブ - HOME PAGE -</title><h1>シンプルウェブ</h1><p>シンプルウェブにようこそ。</p><p>まだほとんど何もありませんが、これから私の作った 詞やコラムなどをどんどん公開していく予定です。</p><h2>メインコンテンツ</h2><li>詞</li><li>コラム</li><li>読後感</li><li>映画レポ</li><h2>コミュニケーション</h2><li>掲示板</li><li>チャット</li><li>自己紹介</li><p>AYUKAWA Hiroko xxx@yyy.co.jp</p>
ここで、基礎編で説明した、heading要素、p要素以外の節は、必ずグループ化という作業を行わなければならないと覚えて下さい。
グループ化とはマークアップの一種で、複数の節をそれ専用のタグで括ることによって一つの節にまとめ上げること、と定義します。
li要素は、2つの方法でグループ化を行うことが許されています。
例文では、特に出現順序に意味はなさそうです。つまり、「詞」と「コラム」を入れ替えると意味が変わってしまう、ということはありません。このような場合、順不同型リストとして、ulタグでグループ化します。箇条書き等もこの方法でマークアップします。
<title>シンプルウェブ - HOME PAGE -</title><h1>シンプルウェブ</h1><p>シンプルウェブにようこそ。</p><p>まだほとんど何もありませんが、これから私の作った 詞やコラムなどをどんどん公開していく予定です。</p><h2>メインコンテンツ</h2><ul><li>詞</li><li>コラム</li><li>読後感</li><li>映画レポ</li></ul><h2>コミュニケーション</h2><ul><li>掲示板</li><li>チャット</li><li>自己紹介</li></ul><p>AYUKAWA Hiroko xxx@yyy.co.jp</p>
ulとは、Un-ordered Listの略です。
これが例えば、次のような文書であった場合、順序型リストになります。
詞 コラム 読後感 映画レポ 私はこの順に好きなんです。
順序型リストは、ol要素と呼び、olタグでグループ化します。従ってマークアップはこのようになります。
<ol><li>詞</li><li>コラム</li><li>読後感</li><li>映画レポ</li></ol><p>私はこの順に好きなんです。</p>
olとは、Ordered Listの略です。
<p>AYUKAWA Hiroko xxx@yyy.co.jp</p>
この節は、ウェブページの著者の問い合わせ先に関する情報を示しています。このとき、節を明示するだけのpタグで括るよりも、問い合わせ先に関する情報を明示するaddressタグ(<address></address>)で括った方が、よりその性質をはっきりさせることが出来ます。
<address>AYUKAWA Hiroko xxx@yyy.co.jp</address>
この場合、節はたった一つしかありませんが、heading要素、p要素以外の節は、節の数にかかわらずグループ化を行います。
さて、HTMLでは、この「連絡先に関する情報」を、どのようなタイプのグループとして扱うか、特に定めていません。先の「順序型リスト」や「順不同リスト」のようなはっきりとした意味を持った要素は明示できません。
このような場合、何の意味も持たない、divタグ(<div></div>)を用います。
このタグで括られたグループは何の意味も与えられませんが、class属性を付けてやることによって、ウェブページ著者にだけ分かる範囲の意味的な識別を与えてやることが出来ます。divタグにclass属性を付けたからといって、著者が識別する以外の意味は何も持たないことに注意して下さい。
属性名="属性値"のように記述します。class="footer"と記述します。
<div class="footer"></div>
ここでは、例としてclass属性をinformationとします。
<div class="information"><address>AYUKAWA Hiroko xxx@yyy.co.jp</address></div>
HTMLのバージョンによっては、address要素のグループ化は必須ではありません。しかし、HTMLの基本的な要素であるheading(h1〜h6)要素とp要素以外は、ほとんどの場合グループ化が必須です。address要素だけ例外扱いするのは一貫性に欠ける、という理由から、この講座では敢えてaddress要素をグループ化しています。
尚、ISO-HTMLにおいてはaddress要素は必ずdiv要素に含めなければなりません。
これで、全ての節のマークアップが完了したことになります。
さて、ここまでのマークアップは、現在最も一般的な、HTML4.01の仕様に適合しています。ある仕様に適合したHTML文書には、その仕様の文書型宣言をつけねばなりません。HTML4.01の文書型宣言は、次のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
これを、文書の先頭に記述して、HTML文書は完成します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><title>シンプルウェブ - HOME PAGE -</title><h1>シンプルウェブ</h1><p>シンプルウェブにようこそ。</p><p>まだほとんど何もありませんが、これから私の作った 詞やコラムなどをどんどん公開していく予定です。</p><h2>メインコンテンツ</h2><ul><li>詞</li><li>コラム</li><li>読後感</li><li>映画レポ</li></ul><h2>コミュニケーション</h2><ul><li>掲示板</li><li>チャット</li><li>自己紹介</li></ul><div class="information"><address>AYUKAWA Hiroko xxx@yyy.co.jp</address></div>
文書型宣言は、そのHTML文書が、どのバージョンの文法に従って記述されているかを知る、唯一の手段です。これがないと、User Agentは文法に基づいた解釈を行えなくなります。
ただ、2002年現在は、文法に基づいた厳密な解釈を行うUAがないため、文書型宣言は不必要、という神話ができあがってしまっています。しかしこのような考え方は、今後、多数のHTMLのバージョンが登場すると通用しなくなる恐れがあります。文書型宣言は必ず記述しましょう。
文書型宣言の詳細は、6. 文書型を選択しようを参照してください。