The essential ‘src‘ attribute determines the image’s path or URL.
Keep in mind, it is during the webpage loading process that the browser retrieves the image from a server to display it on the page. Hence, it’s crucial to maintain the image’s location consistent relative to the webpage to prevent the appearance of a broken link symbol to your visitors. If the browser fails to locate the image, it will display a broken link icon along with the ‘alt’ text, which serves as an alternative description.
| <img src=”your image source/image.jpg” alt=”image name”> |
When an image cannot be located by a browser, it will show the text specified in the ‘alt’ attribute instead.
The required alt attribute provides alternate text for an image if the user cannot view it for some reason, such as a slow connection, an error in the src attribute, or the use of a screen reader.
The alt attribute’s value should describe the image:
| <img src=”img_chania.jpg” alt=”Flowers in Chania”> |
| <img src=”wrongname.gif” alt=”Flowers in Chania”> |
| Tip: A screen reader is a software program that interprets the HTML code, enabling users to “listen” to the content. Screen readers are particularly helpful for individuals who are visually impaired or have learning disabilities. |