# âš¡ Learn how to use <img> tag img tag ?# The <img> tag defines an image in an HTML page
https://www.w3schools.com/tags/tag_img.asp
img tag# Googling: "public domain cats image wiki commons"
And then, please "copy image address"
In test1.html
test1.html
Copy <!DOCTYPE html>
< html lang = " en " >
< head >
< meta charset = " UTF-8 " />
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " />
< title > Document </ title >
</ head >
< body >
< h1 > Here is a title. </ h1 >
< h2 > Here is a subtitle. </ h2 >
< ul >
< li > Coffee </ li >
< li > Tea </ li >
< li > Milk </ li >
</ ul >
< img
src = " https://upload.wikimedia.org/wikipedia/commons/2/28/Tortoiseshell_she-cat.JPG "
alt = " "
/>
</ body >
</ html >
# Image size is too big...
width and height attributes# Add width and height attributes to adjust image size.
test1.html
Copy <!DOCTYPE html>
< html lang = " en " >
< head >
< meta charset = " UTF-8 " />
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " />
< title > Document </ title >
</ head >
< body >
< h1 > Here is a title. </ h1 >
< h2 > Here is a subtitle. </ h2 >
< ul >
< li > Coffee </ li >
< li > Tea </ li >
< li > Milk </ li >
</ ul >
< img
src = " https://upload.wikimedia.org/wikipedia/commons/2/28/Tortoiseshell_she-cat.JPG "
alt = " "
width = " 320 "
height = " 320 "
/>
</ body >
</ html >
#
alt attribute?# The required alt attribute specifies an alternate text for an image, if the image cannot be displayed .
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
https://www.w3schools.com/tags/att_img_alt.asp
alt attributes# Add alt="Hello this is cat image" to img tag.
test1.html
Copy <!DOCTYPE html>
< html lang = " en " >
< head >
< meta charset = " UTF-8 " />
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " />
< title > Document </ title >
</ head >
< body >
< h1 > Here is a title. </ h1 >
< h2 > Here is a subtitle. </ h2 >
< ul >
< li > Coffee </ li >
< li > Tea </ li >
< li > Milk </ li >
</ ul >
< img
src = " https://upload.wikimedia.org/wikipedia/commons/2/28/Tortoiseshell_she-cat.JPG "
alt = " Hello this is cat image "
width = " 320 "
height = " 320 "
/>
</ body >
</ html >
# This is for making the situation when you cannot access image.
# Even though you are offline, you can access image because image cache remains.
To disable cache, open test1.html file in incognito window.
And then, you see the effect of alt attribute.
