HTML Images(img tag)
Written by
Images are a very important part of a website. Images make the website attractive and help make the difference between an average looking site and a really engaging one. They can improve the design and appearance of the web page.
Syntax of HTML images:
<img src="url" alt="alternative text">- HTML images are defined using <img> tag and has src as its attribute whose value is the url of the image.
- The <img> tag is the empty tag which means it does not have the closing tag.
- The alt attribute provides an alternate text for an image in case the image does not load. The value of alt attribute should describe the image.
Image formatting:
The size of the image can be changed using width and height attributes. For example:
<img src="xyz.jpg" alt=" any random xyz image" width="500" height="400">Figure and figcaption:
<figure>
Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated.
You can have more than one image inside the <figure> element as long as they all share the same caption.
<figcaption>
The <figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image. Before these elements were created there was no way to associate an <img> element with its caption.
Image floating:
We use the CSS float property to let the image float to right or left of the text. For example,
<p><img src="flower1.gif" alt="sunflower" style="float:right;width:50px;height:50px;">
The image will float to the right of the text.</p>Image as a link:
Put the <img> tag inside the <a> tag to use image as link. For example,
<a href=”#”><img src=”image.gif” alt=”an image” ></a>
