HTML - Images

HTML Images

Images have pretty high importance in a textual document, as it enhances the beauty and makes document attractive, represented, and interactive. Images also help readers/visitors to understand the points easily.

So, you can insert any image at any place of your web page simply by using <img> tag, For example.

Further, you can also fix the height and width of image as per your requirements by using the following style −

Example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="img/flavors.jpg" alt="Flavors" style="width:100%">
</body>
</html>

Result

HTML Image

alt Attribute of tag in HTML

The alt attribute provides an alternate text for an image, value given on alt attribute is given instead of image, if for some reason your image; If there is no display on the webpage, then there is a value display on the alt attribute on its left hand side.

The value of the alt attribute should describe the image −

Example

<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute provides an alternate text for an image, value given on alt attribute is given instead of image, if for some reason your image; If there is no display on the webpage, then there is a value display on the alt attribute on its left hand side.</p>
<img src="img/flavors.jpg" alt="Flavors" style="width:100%">
</body>
</html>

Result

Alternative text

Likewise, you can set image border and alignment as per your requirements.

First Page