HTML Images
In this tutorial, we will learn about Images and its size, border and alignment in HTML with the help of examples.
Images Element
Images are very important to improve the design and appearance of a webpage.
Web pages without images look boring and uninteresting.Users can add images on their websites by using an image tag.
- An HTML image element is used to add images on a webpage.
- The <img> tag is an empty tag, which means it can contain only a list of attributes.x
- The <img> tag is an empty tag, which means it can contain only a list of attributes.
- The <img> tag only consists of an opening tag.
Syntax
<img src = "URL" alt = "alternate text">
Image Tag Attributes
src Attribute
- Specifies the path(URL) of the image.
- src stands for source. It is used to tell the browser where to find the image you want to display.
- The URL provides the location to the browser where the image is stored.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Image tag attr</title>
</head>
<body>
<img src = "./html.jpg">
</body>
</html>Output
alt Attribute
- The alt attribute provides an alternate text for an image.
- If the browser cannot display or find the image, it will display the value of the alt attribute.
- The alt attribute is used when the user cannot view the image for some reason (because of slow internet connection, an error in the src attribute, and so on).
Example :
<!DOCTYPE html>
<html>
<head>
<title>Image tag attr</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display">
</body>
</html>Output
image did not display
width and height Attributes
- The width and height attributes are used to specify the width and height of an image.
- The width and height attribute always defines the width and height of an image in pixels, but other units used as well like %, rem, em, etc.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Image tag attr</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display" width = "60" height = "70">
</body>
</html>Output
border Attribute
- By default, the image will have a border around it.
- By using border attribute we can change the thickness of the border.
- If The value of the border attribute is 0, that means no border around the picture.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Image tag attr</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display" border = "5px">
</body>
</html>Output
align Attribute
- By default, an Image will align at the left side of the page.
- By using align attribute we can align the image to center or right.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Image tag attr</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display" align = "center">
</body>
</html>Output
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Images in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Background Tag.