Back to: HTML Tutorials
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 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 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.
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 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.
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.
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.
