ワープロ感覚で作業を捉えると、画面に画像をペタッと貼ることなんて簡単じゃないか？と思えるし、実際簡単だ。しかし、より使い勝手の良いサイトをデザインするためにはちょっと突っ込んだタグの意味を分かっていないといけない。

■インライン要素とブロックレベル要素

　画像をページにレイアウトする目的でよく使うのはimgタグである【図1】。これで画像の所在地をURL(I)で参照して写真などを反映させる。このimgタグは(X)HTMLの定義上、文字情報と同等の要素に区別されている。見た目に図と字では大違いだが、その存在意義を考えるとどちらも情報そのもの、つまり材料であることに変わりはない。これらの材料はウェブページ上で横の組み方向に流し込まれることになる。この組みの方向に流し込むべき材料に関するするタグのことを、HTMLではインライン要素という。文字を部分的に強調する時に使うstrongタグなどが、インライン要素としてすぐ思い当たるところだ。imgタグもまた、インライン要素なのだ。

　一方ブロックレベル要素のほうは、テキストやインライン要素を含む範囲を示す方法となる。視覚的にはタグ付けした範囲にボックス領域を伴って表示される。リスト群を作るulタグや見出し用のh1タグなどがブロックレベル要素に分けられる。

■インライン要素はブロックレベルの中

　HTMLは大きく２つの要素に分かれることがはっきりしたが、本題の画像用imgタグ（インライン要素）は、必ずHTML内のブロックレベル要素の中に宣言してやらなければいけないことを知っておこう*。文字要素の場合も同様だが、これらの材料は、段落や見出しという範囲を定義した中に挿入する必要がある。たとえそうしなかったとしても即表示エラーなどは起こらないのだが、妥当なコードとは判断されない【図2】。

　また、画像が実のある材料として見なされるためにも代替テキストの指定は必須である。端的に画像の内容を説明するような文章を用意しておこう。

*XHTMLでは、コンテナ化した要素の中に入れる、となり、必ずしもブロックレベル要素内にインライン要素を含めるべきとはなっていない。