3.例文をマークアップしてみよう(発展編)

HTMLで示せる節

最終更新
更新はありません

HTMLで示せる節(ふし)、つまり文書構成節は、heading要素p要素だけではありません。

  • li要素(リスト項目の節)
  • dt要素(定義用語の節)
  • dd要素(定義用語を説明している節)
  • address要素(連絡先情報に関する節)

もし、前章の2.見出し以外の文書構成節をpタグで括りましょうにてマークアップした節が、上で挙げた4つのうちいづれかの意味をもっていたのなら、p要素ではなく、これらの要素としてマークアップすると、その役割をもっとはっきりと示すことが出来ます。

重要な注意点

もし、この4つの要素として明示する場合、ただ単にpタグを置き換えるだけではいけません。

必ずグループ化という作業が必要になる、と覚えておいて下さい。グループ化については、例文をマークアップしながら解説いたします。

リスト項目をliタグで括りましょう

最終更新
更新はありません

さて、例文における、「詞、コラム、読後感、映画レポ」等の節は、「リスト項目」という特徴をもっていると考えられます。これは、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つの方法でグループ化を行うことが許されています。

  1. 順不同型リストグループ(ul要素)としてグループ化する
  2. 順序型リストグループ(ol要素)としてグループ化する

例文では、特に出現順序に意味はなさそうです。つまり、「詞」と「コラム」を入れ替えると意味が変わってしまう、ということはありません。このような場合、順不同型リストとして、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の略です。

連絡先などを示している節は、addressタグで括りましょう

最終更新
更新はありません
<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属性を付けたからといって、著者が識別する以外の意味は何も持たないことに注意して下さい。

属性の付け方
開始タグの中に、属性名="属性値"のように記述します。
footerという値を持ったclass属性を付けたい場合、開始タグの中に、class="footer"と記述します。
<div class="footer"></div>
class属性値の決め方
class属性の値は適当で構いませんが、ちゃんとした意味を持っていたほうが覚えやすいでしょう。

ここでは、例として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要素に含めなければなりません。

仕上げ - 文書型宣言 -

最終更新
2003-10-07T15:27:47+09:00

これで、全てののマークアップが完了したことになります。

さて、ここまでのマークアップは、現在最も一般的な、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. 文書型を選択しようを参照してください。

まとめ

最終更新
更新はありません
  1. リスト項目はliタグで括ってli要素とする
    • li要素が順序を持っていないなら、それらをulタグで括ってグループ化し、ul要素とする
    • li要素が順序を持っているなら、それらをolタグで括ってグループ化し、ol要素とする
  2. 連絡先を記述している節はaddressタグで括る
    • address要素はdivタグで括ってグループ化する
  3. 文書型宣言を文書の先頭に記述する

つづく

最終更新
2003-01-17T18:57:30+09:00