楽の出来るホームページの書き方

このページは、XHTML 文書での強調や引用などの書き方を説明したものです。このページで説明している要素を使ったサンプルを見ながら説明を読むと分かりやすいと思います。

言いたい事ははっきりと

文章を書いていると、強調したい部分が出てくると思います。普通の文書では、色を変えたり、下線を引いたりするのですが、XHTML 文書では、em 要素や strong 要素を使って表します。次の例を見てください。

<p>

    あなたの健康を損なうおそれがありますので、

    <em>吸いすぎに注意しましょう</em>。

    <strong>喫煙マナーを守りましょう</strong>。

</p>

「吸いすぎに注意しましょう」と「喫煙マナーを守りましょう」の部分が、違う表示になっていると思います。強調には2段階あり、strong 要素は最も重要、em 要素は重要な部分を表します。

例文についてですが、私はタバコを吸う人なので、喫煙家へのあてつけではないですよ。

正しく文章を引用する

ホームページを書いているときにも、文章を引用することがあると思います。XHTML 文書で文章を引用する時には、blockquote 要素を使います。

例として、Yahoo!のサイト推薦のヘルプから、登録基準についての文章を引用してみます。

<blockquote cite="http://help.yahoo.co.jp/help/jp/url/url-11.html">

    <p>

        単にいくつかのリンクを集めただけ、簡単な内容と

        連絡先が書かれただけ、既に他のサイトから容易に

        得ることができる情報しかない……といったもの

        ではなく、十分な量のオリジナルの情報を提供して

        くれる。

    </p>

</blockquote>

blockquate 要素には、cite 属性があります。ここには引用先の URL を指定することで、どこからの引用かを表します。

多くのブラウザは、引用部分をインデントして表示するようになっていますが、blockquote 要素をインデントして表示するなんて決まりはありません。インデントに blockquote 要素を使わない方がいいと思います。

勝手に整形させない

本来、XHTML 文書ではブラウザに表示の仕方を任せるため、自由に改行、空白でのインデントなどをすることが難しくなっています。自分で書いたように改行、空白を表示させたい場合、pre 要素を使うことで解決できます。

pre 要素に含まれる文章は、すでに整形済み扱いになるため、ブラウザはそのまま表示します。次の例を見てください。

このように自分で思うように

改行したり

     空白     を入れたり出来ます。

<pre>

このように自分で思うように

改行したり

     空白     を入れたり出来ます。

</pre>

pre 要素を使うと、自由にインデントなどをすることが出来ますが、ブラウザによる自動改行などが行われないので、長い文章には注意が必要です。

修正の跡を残す

XHTML 文書では、後から修正を加える時に、どこを修正して、どのように直したのかという目印を残すことが出来ます。ここで使われるのが、del 要素と ins 要素です。次の例を見てください。

<p>

    <del>修正前の文章です。</del>

    <ins>修正後の文章です。</ins>

</p>

del 要素の内容が修正する時に削除した文章、ins 要素の内容が修正するときに追加した文章を表します。