画像を張り付けるタグとその仲間
HTMLに画像を張り付けるときはimgタグ
HTMLファイルに直接画像を張り付けるにはimgタグを使う必要があります。
imgタグは閉じタグがなく、src属性に読み込む画像までのパスを記述して使います。
さらに、画像の代替テキストを記述するalt属性。
width属性やheight属性を使って大きさの指定もできます。
ただ、必須項目はsrc属性とalt属性だけなのでこの二つの属性だけはしっかり記述してください。
|
1 |
<img src="書き込んだHTMLファイルから画像までのパス" alt="画像の代替テキスト"> |
alt属性に入れるべき代替テキスト
- 画像が読み込めないとき
- ユーザーがスクリーンリーダーを使っている
- どんな画像かを識別できない検索エンジンのクローラーがサイトに来た
上記の全ての場合で同じ意味として伝えるためのものになります。
画像があっても、なくても意味が通じるようにしっかりと指定しましょう。
稀に特に意味もない飾り的な画像を使うときがありますが、そんな時はalt属性の中身は空にしてもいいといわれています。
因みにalt属性自体を指定しないとファイル名もしくは画像と読み上げられるそうです。
使い分けが難しい・・・
figureタグとfigcaptionタグ
figureタグは図表の範囲を、figcaptionタグは図表のキャプションを囲むタグです。 img要素を使うときにfigure要素とfigcaption要素を使うとより正確な文書構造になるといわれていますが、あまり使われていないような気がします。 基本的な使い方はfigure要素の中にimg要素とfigcaption要素を書き込む形で使います|
1 2 3 4 |
<figure> <img src="sample.jpg" alt="サンプル画像"> <figcaption>サンプル画像についてのキャプション</figcaption> </figure> |
