文字列のマークアップ2

今回は、前回までに続きフレージング・コンテンツを紹介します。

img要素

まず、img要素は、画像です。画像も、前回のbr要素と同じく、範囲ではなく「そこにあるもの」ですから空要素です。

また、どの画像を表示するかを指定するのにsrc属性を使います。つまり、src属性にはURLということになります。

<img src="hoge.png">

さらに、alt属性をつけましょう。このalt属性は、その画像がどういう画像かを説明するものです。

というのも、画像が何らかの原因で表示できない場合、その画像が何を表しているかわからないと困るからです。そのため、説明文をalt属性に書きます。

<p>これが我が家の猫です。<img src="cat.jpg" alt="かわいい黒猫"></p>

alt属性が無ければ、「言葉では表せないような画像」ということになるのですが、alt属性があるものの空（alt=""）のとき、少し違った振る舞いをします。というのも、その場合その画像は「補助的で、なくてもいい画像」ということになります。つまり、画像があれば表示されますが、画像がない場合完全に無視されるかもしれないということです。alt属性に何か書いてある、もしくはそもそもalt属性がない場合は、画像がなくても何か表示してくれます。

文字の横にアクセントで入れるような画像の場合などに、alt=""が適切な場合があることでしょう。

また、width属性・height属性は、画像の横・縦の大きさ（ピクセル単位）を表します。大きさが分かる場合は指定してあげるとよいでしょう。

small要素

small要素は、注訳です。その他、著作権表示などにも使うことができます。

<p>電話越しの友人の声は大きかった<small>（しかし怒っていたわけではない）</small>。</p>

他にもまだまだありますが、ここでは紹介しません。興味があれば調べてみるとよいでしょう。現に、このページのソース（どういうHTMLで書いてあるか）を調べると、紹介していないフレージング・コンテンツも使用しています。