【HTML Living Standard】img要素の使い方
img要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
imgオブジェクトは、ウェブページに画像コンテンツを埋め込むためのオブジェクトです。この要素を用いることで、JPEG、PNG、GIF、SVGといった様々な画像形式を文書内に表示することが可能になります。<img>要素は、ウェブサイトのデザインを豊かにし、情報を視覚的に伝える上で不可欠な存在です。
この要素には、主に二つの重要な属性があります。一つはsrc属性で、これは表示したい画像のURLを指定します。このURLは、インターネット上の画像への絶対パスでも、ウェブサイト内の画像ファイルへの相対パスでも指定できます。もう一つはalt属性で、これは画像の内容を簡潔に説明する代替テキストを提供します。alt属性は、画像ファイルが見つからない場合や、ネットワークエラーによって画像が読み込めなかった場合に、そのテキストが代わりに表示されます。さらに重要な点として、視覚障がいを持つユーザーがスクリーンリーダーを利用する際に、画像の内容を音声で伝えるために不可欠であり、ウェブアクセシビリティの確保に大きく貢献しますので、常に設定することが強く推奨されます。
また、width属性とheight属性を用いて、画像の表示幅と高さをピクセル単位で指定することもできます。これらの属性を事前に指定することで、ブラウザは画像を読み込む前に表示領域を確保し、ページのレイアウトが急に変動するのを防ぎ、ユーザー体験の向上に寄与します。<img>要素は、インライン要素として扱われ、文書の流れの中で自然に画像を配置できます。適切にalt属性を設定し、画像のサイズを最適化することは、ウェブサイトのパフォーマンスとSEOにも良い影響を与えます。
構文(syntax)
1<img src="path/to/image.jpg" alt="Description of the image">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません