Images in HTML

Images in HTML with Examples

In this article, I am going to discuss Images in HTML with Examples. Please read our previous article where we discussed Layouts in HTML with Examples. At the end of this article, you will learn everything about HTML Images with Examples.

HTML Images

Previously, web pages just contained textual material, making them appear rather monotonous and uninteresting. Fortunately, it wasn’t long before users were given the ability to embed photos on web pages.

In this article, we will learn how to add photos to a web page to make it more visually appealing, as well as numerous techniques for inserting images.

<!DOCTYPE html>
<html>
<body>

<h2>Lion Cub</h2>
<img src="https://cdn.pixabay.com/photo/2017/09/30/07/43/cub-2801381_960_720.jpg" alt="cub" width="400" height="300">
<img src="https://cdn.pixabay.com/photo/2017/10/02/08/45/lion-cub-2808197__340.jpg" alt="cub" width="400" height="300">
<img src="https://cdn.pixabay.com/photo/2017/09/30/07/43/lion-white-2801384__340.jpg" alt="cub" width="400" height="300">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Images in HTML with Examples

Images Syntax in HTML

The HTML <img> tag is used to embed an image in a web page.

<img src=”url” alt=”alternate text”>

The image tag is an empty tag or unpaired tag because it doesn’t have a closing tag. The <img> tag creates a space for holding an image. The image tag only contains attributes inside them. The src and alt are the most commonly used attributes inside the image tag.

The src Attribute in HTML Image

Inside the <img> element src attribute is used to define the path to an image.

<!DOCTYPE html>
<html>
<body>

<h2>Sailing Boat</h2>

<img src="https://cdn.pixabay.com/photo/2015/09/22/19/00/ship-952292_960_720.jpg" alt=" Boat" width="650" height="400">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The src Attribute in HTML Image

The alt Attribute in HTML Image Tag

Inside the <img> element alt attribute is used to provide an alternate text for an image. Due to some reasons if a browser is not able to display an image on the screen, then the alternate text will be displayed on the screen.

<!DOCTYPE html>
<html>
<body>

<h2>Alt Text</h2>

<img src="https://cdn.pixabay.com/autumn-6752841_960_720.jpg" alt=" Autumn" width="400" height="300">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The alt Attribute in HTML Image Tag

HTML Image Size – Width and Height

The width and height attributes are used to specify the width and height of an image.

<!DOCTYPE html>
<html>
<body>

<h2>House</h2>

<img src="https://cdn.pixabay.com/photo/2016/11/18/17/46/house-1836070_960_720.jpg" alt=" House" width="500" height="350">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HTML Image Size - Width and Height

HTML Image Border

We can also add borders around images in Html.To add borders we can use style attributes inside the <img> element.

<!DOCTYPE html>
<html>
<body>

<h2>Borders</h2>

<img src="https://cdn.pixabay.com/photo/2021/10/29/19/53/autumn-6752841_960_720.jpg" style="border:5px solid slateblue;" alt="coding" width="400" height="300">

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HTML Image Border

Animated images in HTML

HTML allows developers to add animated images to web pages.

<!DOCTYPE html>
<html>
<body>

<h2>Coding Gif</h2>

<img src="https://media0.giphy.com/media/26tn33aiTi1jkl6H6/giphy.gif?cid=ecf05e478xehc1y4ceerqs7m7gbb990rcddhkb9rmi63p4j7&rid=giphy.gif&ct=g" alt="coding" width="400" height="300">

<img src="https://media2.giphy.com/media/RbDKaczqWovIugyJmW/200w.webp?cid=ecf05e478xehc1y4ceerqs7m7gbb990rcddhkb9rmi63p4j7&rid=200w.webp&ct=g" alt="coding" width="400" height="300">
</body>
</html>

When you run the above HTML code, you will see animated images.

Animated images in HTML

In the next article, I am going to discuss Background Images in HTML with Examples. Here, in this article, I try to explain Images in HTML with Examples and I hope you enjoy this HTML Images with Examples article.

Leave a Reply

Your email address will not be published.