Used to insert an image in an HTML document, the <img> tag doesn't have a closing tag but contains only attributes and values that allows firstly to find the image to add but also to resize this as we want.
The src attribute identify the image location, this exactly as per hyperlinks can be absolute or relative. It is absolute when we specify the location of the file on the web i.e. https://www.codeisland.it/img/photo.jpg and it is relative when we do not add an url but only the path to follow relative to the webpage i.e. ../img/photo.jpg that identify a photo.jpg in an inner folder of the website called img. In this case the two points and slash (../) identify the need to come back of one folder to be able to enter img folder.
The most common format used are JPG, GIF, PNG, SVG but the tag allows to add also the animated APNG, the old uncompressed BMP (too large size for the web), the Microsoft Icon standard ICO and more less used formats.
When both HTML and image are in the same folder
<img src="photo.jpg">
When image is in an inner folder
<img src="../img/photo.jpg">
Absolute location
<img src="https://www.codeisland.it/img/photo.jpg">
There are several attributes for the img tag alongside the src one that we have seen is used to identify the image location.
The ALT attribute in particular has been used in SEO to explain to the search engine what the image is about. In fact search engines can index text but the only way to understand what is in a picture is through the alt attribute, a value with a simple text would allow image search, bringing new visitors and additional context to our webpages. The alt tag is also visible when hovering the mouse on the image, when image cannot be reached, or in browser for visually impaired users.
Other attributes like height and width are used to specify the image size, this can be expressed in pixels or percentage. This last option make the image change in size according to the screen size. It is recommended to use one or another, not both at the same time as in the example, because if we fix a size with the pixels (let's say for the height of the image) and we used percentage for the height there is the risk to distort the ratio height/width making the image unreadable.
Explanatory ALT attribute would index the image for the research "web development in HTML"
<img src="photo.jpg" alt="web development in HTML">
Size in pixels and % percentage
<img src="photo.jpg" height="300px" width="50%">
HTML5 has introduced two new elements, <figure> and <figcaption>, to simulate the captions used to describe pictures, charts and more in printed books and magazines.
The <figure> element is a container, usually in it comes a photo or a chart and a caption.
The <figcaption> describes the object in the photo.
Here a code example:
<figure align="center">
<img src="../img/html5logo.svg" alt="The HTML5 Logo is red, it is shield shaped and at the center of it there is a 5">
<figcaption >HTML5 Logo - Caption</figcaption>
</figure>
