img は src と alt を1行に書く
src に画像の場所、alt に画像の内容を書きます。今回は自己紹介の見出しの直後へプロフィール画像を置きます。
<img src="https://yumesaku.tech/course-assets/profile-sample.svg" alt="山田 太郎のプロフィール写真">
srcどこの画像かalt何が写っているか<img src="https://yumesaku.tech/course-assets/profile-sample.svg" alt="山田 太郎のプロフィール写真">
どこの画像か
何が写っているか
img は文字をはさまない空要素なので、終了タグ </img> は書きません。
1 / 3
HTML入門 - 画像が出ないときに見えるもの
画像が届かないとき、alt が内容を伝える
srcを正しい名前・綴り違い・空に切り替え、altが画面と読み上げにどう残るか確かめましょう。
- srcが正しければ画像が表示される
- srcが壊れてもaltの言葉が内容を伝える
- 内容のある画像でaltを空にすると情報が失われる
2 / 3
考えてみよう外しても進めます
内容のあるプロフィール写真の alt を空にしました。いちばん情報を受け取れなくなるのは誰ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3