HTMLでの画像の追加

画像はウェブページをより魅力的にします。<img> タグを使用して画像を挿入できます。

主な属性:

• src: 必須。画像ファイルへのパス（絶対パスまたは相対パス）；
• alt: 必須。画像が読み込めない場合に表示されるテキスト、スクリーンリーダーでも使用される；
• width / height: ピクセル単位のサイズ。指定しない場合、画像は元のサイズで表示される。

alt属性

altテキストは画像を明確に説明し、有用なコンテキストを提供する必要があります。

次の例を考えてみましょう。競馬に関する情報源があり、競技者がレースの準備をする様子を表示したい場合です。

不適切な alt テキスト：

適切な alt テキスト：

改良版は実際のコンテキストを提供し、視覚障害のあるユーザーが画像の内容を理解できるようにする。

src属性

src属性は、画像ファイルの場所を指定するために絶対パスと相対パスの両方を使用できる。

絶対パス

オンライン画像への完全なURL。

誰でもこの完全なリンクを通じて画像にアクセス可能。

次の実際の例を確認。

• View the Code
• Open the Live Page

相対パス

プロジェクトフォルダー内の画像を指す。

これは、image.jpg がHTMLファイルの近くにある images ディレクトリに保存されていることを意味します。

以下の実際の例を確認してください。images フォルダー内に sun.png ファイルが含まれています。

• View the Code
• Open the Live Page