マークアップのヒント

はしがき

前ページまで、HTMLの基本を紹介させていただいたわけですが、いわゆる「解説」というのは読んでもなかなか頭に入らないものです。そこで、実際に私自身がHTML文書を作成する時に考えていること、注意していることなどを書いてみたいと思います。それが皆さんにとって、何らかのヒントになるんじゃないかと考えるからです。

リストの重要性

トップページを作成する場合

さあ、ウェブサイトを作成しよう！と思ったらまず、トップページを作成してみようと考える方が多いでしょう（本当はある程度コンテンツができてからでいいんですけどね）。このトップページというのはいわゆるサイトの入口ですから、訪問者が各コンテンツにうまく辿りつけるようにわかりやすいものにしなければなりません。

概ね、トップページ（のbody要素）というのは下のような構造になっているケースが多いと思われます。（見た目がわかりやすいようにインデントをとってあります）

見出し
    見出し
        見出し
            （コンテンツへの）リンク
            （コンテンツへの）リンク
        見出し
            （コンテンツへの）リンク
            （コンテンツへの）リンク
    見出し
        見出し
            （他サイトへの）リンク
            （他サイトへの）リンク
        見出し
            （コンテンツへの）リンク
            （他サイトへの）リンク
…

見出しは当然h1～h6要素として示すわけですが、リンクの部分はどうしたらいいでしょう？段落と見なしてp要素としますか？でも段落というのは普通は文章ですからね。p要素とはちょっと違いますよね。

私はこういう場合はすべてul要素としてマークアップしています。リンクのリストである、と考えるわけです。だからこういうマークアップになります。

<h1>見出し</h1>
    <h2>見出し</h2>
        <h3>見出し</h3>
            <ul>
                <li>（コンテンツへの）リンク</li>
                <li>（コンテンツへの）リンク</li>
            </ul>
        <h3>見出し</h3>
            <ul>
                <li>（コンテンツへの）リンク</li>
                <li>（コンテンツへの）リンク</li>
            </ul>
    <h2>見出し</h2>
        <h3>見出し</h3>
            <ul>
                <li>（他サイトへの）リンク</li>
                <li>（他サイトへの）リンク</li>
            </ul>
        <h3>見出し</h3>
            <ul>
                <li>（コンテンツへの）リンク</li>
                <li>（他サイトへの）リンク</li>
            </ul>
…

またサイト様によっては、上記のh3要素である「見出し」と「リンク」を「テーマ」と「その中身」と捉えて、同じリストでもdl要素としてマークアップされているケースもあります。こういう考え方ももちろんあると思います。

<h1>見出し</h1>
    <h2>見出し</h2>
        <dl>
            <dt>見出し</dt>
                <dd>（コンテンツへの）リンク</dd>
                <dd>（コンテンツへの）リンク</dd>
            <dt>見出し</dt>
                <dd>（コンテンツへの）リンク</dd>
                <dd>（コンテンツへの）リンク</dd>
        </dl>
    <h2>見出し</h2>
        <dl>
            <dt>見出し</dt>
                <dd>（他サイトへの）リンク</dd>
                <dd>（他サイトへの）リンク</dd>
            <dt>見出し</dt>
                <dd>（コンテンツへの）リンク</dd>
                <dd>（他サイトへの）リンク</dd>
        </dl>
…

このように考えるとトップページも作りやすくなるのではないでしょうか？この時点では、ブラウザで見た時の「見映え」は無視しておいてください。見映えは後ほど説明するCSSですべて指定します。

画像表示について

ウェブサイトにテキストだけでなく画像も表示させたい、と思うのが人情というものです(^O^)。画像を表示させたい時は、img要素として示すことは説明しました。ただimg要素はインライン要素です。body要素直下にそのまま置くことはできません。あくまでブロック要素内に置くことになります。

そうは言うものの「画像表示には論理的な意味なんかない、ただ表示させたいだけなんだ」という場合は往々にしてあるでしょう。そういう時はどうすればいいのでしょうか？

ここでもul要素が活躍します。ただ表示させたいのですから、見出しや段落ではなく、ただのリストとして示してあげればいいのです。リストは複数ある必要はありません。１つでもリストです。画像をただ表示させたい時のマークアップ例を示します。

<ul>
<li><img src="image/sn-noriya.gif" width="88" height="31" alt="バナー"></li>
</ul>

このマークアップを施すと、大概のブラウザではul要素特有のリストマーク（黒い丸印が一般的）が画像の左横に表示されてしまいますが、気にする必要はありません。CSSでどうにでもなります。今はどういうマークアップが適切なのか、それだけを考えましょう。

見出しに画像を使う

見出しに画像を使いたい、というケースがあると思います。例えばトップページにおいて、テキストではなく画像を使ってサイト名を表示したい、という場合です。

こういう時も難しく考える必要はありません。トップページでのサイト名、というのはまず「最重要見出し」になるはずです。最重要見出しなのですから当然h1要素になる訳です。ということは、サイト名が書かれている画像をimg要素で示し、そのimg要素をh1要素として示してあげればいいのです。

<h1><img src="./image/pasokon_yugi.gif" width="250" height="46" alt="パソコン遊戯"></h1>

Information