HTML Worksheet: Images and Alt Text

HTML and CSS lesson 7: Images with img, src and alt · Set 881 · 40 questions

Code tip (File and words): <img src="file.jpg" alt="what it shows" width="200"> — no closing tag. src = which file to load; alt = words describing it; width / height = size in pixels. If the picture fails, the browser shows the alt text; screen readers read it aloud.

1. 1.🖼️ Which picture file does the browser load?
   <img src="tiger.jpg" alt="A tiger asleep" width="150"> (a) kite.png (b) map.png (c) A tiger asleep (d) tiger.jpg
2. 2.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="fort.jpg" alt="An old fort" width="200"> (a) An old fort (b) A tiger asleep (c) fort.jpg (d) width
3. 3.True or false: in <img>, alt is read by screen readers. (a) False (b) True
4. 4.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <a> (c) <img> (d) <p>
5. 5.🖼️ Which attribute of <img> is read by screen readers? (a) height (b) src (c) width (d) alt
6. 6.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="fort.jpg" alt="An old fort" width="150"> (a) An old fort (b) fort.jpg (c) width (d) A tiger asleep
7. 7.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="cake.jpg" alt="Birthday cake" width="100"> (a) width (b) A happy dog (c) Birthday cake (d) cake.jpg
8. 8.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="tiger.jpg" alt="A tiger asleep" width="100"> (a) width (b) A tiger asleep (c) A red kite (d) tiger.jpg
9. 9.🖼️ Which attribute of <img> names the picture file? (a) alt (b) src (c) width (d) height
10. 10.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="350"> (a) A tiger asleep (b) width (c) fort.jpg (d) An old fort
11. 11.🖼️ Does <img> need a closing tag? (a) No (b) Yes
12. 12.🖼️ Which attribute of <img> describes the picture? (a) height (b) src (c) alt (d) width
13. 13.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="250"> (a) kite.png (b) An old fort (c) fort.jpg (d) tiger.jpg
14. 14.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="300"> (a) bus.jpg (b) Our school bus (c) width (d) An old fort
15. 15.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="250">
16. 16.True or false: in <img>, width names the picture file. (a) False (b) True
17. 17.True or false: in <img>, src tells which image to load. (a) False (b) True
18. 18.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="100"> (a) map.png (b) Map of India (c) Birthday cake (d) width
19. 19.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="250"> (a) A tiger asleep (b) width (c) An old fort (d) fort.jpg
20. 20.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="150"> (a) dog.jpg (b) width (c) A happy dog (d) The full moon
21. 21.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="150"> (a) An old fort (b) fort.jpg (c) tiger.jpg (d) kite.png
22. 22.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="300">
23. 23.True or false: in <img>, width sets how wide it is. (a) True (b) False
24. 24.🖼️ Which attribute of <img> tells which image to load? (a) height (b) alt (c) width (d) src
25. 25.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="150"> (a) Map of India (b) map.png (c) Birthday cake (d) width
26. 26.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="250"> (a) cake.jpg (b) Birthday cake (c) A happy dog (d) width
27. 27.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="200"> (a) cake.jpg (b) map.png (c) Map of India (d) dog.jpg
28. 28.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="map.png" alt="Map of India" width="350"> (a) Birthday cake (b) width (c) map.png (d) Map of India
29. 29.🖼️ Which attribute of <img> sets how tall it is? (a) width (b) height (c) alt (d) src
30. 30.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="150">
31. 31.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="100">
32. 32.🖼️ Which picture file does the browser load?
    <img src="dog.jpg" alt="A happy dog" width="100"> (a) dog.jpg (b) A happy dog (c) bus.jpg (d) moon.png
33. 33.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="200"> (a) dog.jpg (b) A happy dog (c) The full moon (d) width
34. 34.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="50">
35. 35.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="50"> (a) map.png (b) kite.png (c) tiger.jpg (d) A tiger asleep
36. 36.🖼️ Why do we add alt text to an image? (a) to colour it (b) to load it faster (c) to make it bigger (d) to describe the image
37. 37.True or false: in <img>, alt describes the picture. (a) False (b) True
38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="150"> (a) width (b) cake.jpg (c) A happy dog (d) Birthday cake
39. 39.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="50">
40. 40.True or false: in <img>, src is read by screen readers. (a) True (b) False

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids