body要素内のマークアップ

見出しを表すh1～h6要素

これまで「文書の構造を示すためのマークアップ」に焦点をあてて説明してきました。ですからbody要素内で示す要素としましては、見出しを表すh1～h6要素と段落を表すp要素しかご紹介しておりません。しかしながら普通に文章を書くだけでしたら、ほとんどこれだけで用が足りてしまうんですよね。

ここでちょっとおさらいの意味も含めて、「文書の構造」という考え方をより理解するために、日本で最も普遍的（？）な文書である「日本国憲法」を例にとってお話しましょう。

日本国憲法は、まず「日本国憲法」という大見出しがあり、前文があり、第１章→第１条と続きます。第４条ではさらに第１～２項があります。

この日本国憲法を（簡略的に）マークアップしてみましょう。すると下のようになります（body要素内のみ表示しています）。

<h1>日本国憲法</h1>
<p>前文の内容</p>
・・・（中略）・・・
    <h2>第一章</h2>
        <h3>第一条</h3>
        <p>第一条の内容</p>
        ・・・（中略）・・・
        <h3>第四条</h3>
            <h4>第一項</h4>
            <p>第一項の内容</p>
            <h4>第二項</h4>
            <p>第二項の内容</p>
        <h3>第五条</h3>
        <p>第五条の内容</p>
        ・・・（中略）・・・
    <h2>第二章</h2>
        <h3>第九条</h3>
・・・（以下略）

h1～h6要素タグにおける、hの後の数字に注目してください。h1～h6の数字は、見出しが現れる順番ではなく、見出しの役割（重要度）を表していることがわかると思います。このあたりのマークアップをきちんと行うことで文書全体にわかりやすい階層構造を持たせることができるので、結果として章・節・項などを暗に示すことができます。

その他要素の紹介

リスト

定義リスト

ある語句を書き次にその語句の説明を加えている場合、このマークアップが文書構造上適しています。例えば用語集や、リンク集のページなんかにこのタグを使うとぴったりハマリます。マークアップ方法は次のとおり。

<dl>
<dt>語句</dt>
<dd>語句の説明</dd>
</dl>

例として、「パソコン遊戯」をあなたのサイトで紹介していただくとすると、

<dl>
<dt>パソコン遊戯</dt>
<dd>パソコンを使いこなすことによって、パソコンを大好きになり楽しくなれることを目指すウェブサイト</dd>
</dl>

と書いていただければＯＫです。（笑）

dt要素とdd要素の組み合わせは幾つでも連続させることができます。（正確には、dl要素内において、dt要素あるいはdd要素が最低１回以上出現する、のがルールです）

<dl>
<dt>Yahoo! Japan</dt>
<dd>誰もが知ってるポータルサイト</dd>
<dt>Google</dt>
<dd>誰もが知ってる検索エンジンの代表格</dd>
<dt>MSN</dt>
<dd>ご存知Microsoftが運営するポータルサイト</dd>
</dl>

順不同リスト

箇条書きの部分にマークアップするといいでしょう。マークアップ方法は次のとおり。

<ul>
<li>何かの文章</li>
<li>何かの文章</li>
<li>何かの文章</li>
</ul>

li要素を増やせば幾つでも箇条書きできます。

序列リスト

順不同の箇条書きではなく、上から下への順序に意味がある場合、このマークアップが適しています。例えば、レシピなんかがそうですね。マークアップ方法は次のとおり。

<ol>
<li>１つ目の文章</li>
<li>２つ目の文章</li>
<li>３つ目の文章</li>
</ol>

順不同リストと同じく、li要素を増やせば幾つでも箇条書きを増やせます。簡単なレシピを作ってみましょう。

<ol>
<li>フタを矢印まではがします。</li>
<li>粉末スープを麺の上にあけます。</li>
<li>熱湯を内側の線まで注ぎます。</li>
<li>フタをして３分間待ちます。</li>
<li>できあがりです(^O^)。</li>
</ol>

罫線

いわゆる「区切り」を入れたい時にマークアップします。これは文章や語句に対しマークアップするものではありません。あくまで１つの区切りを入れたい場所に挿入します。<hr>と目印をつけます。このhr要素は内容を持たないので空要素と呼ばれ、HTML4.01 Strictでは終了タグを省略しなければなりません。

マークアップ例は次のとおり。

<p>とある段落</p>
<hr>
<p>とある段落</p>

問い合わせ先情報

ページの最下部（最上部の場合もありますが）に、サイト管理人名やメールアドレスが記されているのを見たことがあるでしょう。あの部分にはこのマークアップが最適です。マークアップ例は次のとおり。

<hr>
<address> Noriya@パソコン遊戯 / e-mail : pasokon-yugi@syd.odn.ne.jp </address>

上で紹介した要素はあくまで「文書構造上の意味」を表すものです。それぞれに「ブラウザでの表示結果」を示しましたが、皆さんが見た表示結果はあくまで皆さんがお使いのブラウザで表示された結果でしかありません。「どんな人でもこう見える」ということではありませんので注意しましょう。以降も「ブラウザでの表示結果」を示す場合がありますが、その場合でも同じことです。

さらにHTMLの根幹の部分に入っていきましょう。

Information