In This Tutorial
- 1 The <img> tag of HTML
- 2 Syntax of using the img tag
- 3 A few img tag examples
- 4 A Video demonstration of img tag
- 5 The src attribute in <img> tag
- 6 The alt attribute
- 7 HTML img size
- 8 HTML image link
- 9 The image border example
- 10 Using CSS with img tag
- 11 Related
The <img> tag of HTML
The <img> tag of HTML is used to include the images in your web pages. You may specify the source of an image in the img src attribute along with alternative text in the alt attribute.
The alt attribute is useful in case image is not available or web browser is not able to pull the source image. Different kinds of images can be used in the HTML img tag e.g .jpg, .gif, .png etc.
Syntax of using the img tag
<img src=”image path” alt=”Alternative text” height=”” width=”” />
Where:
- src: specifies the image path which is mandatory. This can be the relative or the absolute path.
- img alt: alternative text.
- Height and width that specify image dimensions
Note that, the <img> tag is closed by a forward slash followed by “>”. You do not need to close it like many other tags like </div>, </p> or </span>.
A few img tag examples
The src attribute in <img> tag
In the src attribute of the <img> tag, you can specify the relative path. For example:
<Img src = “images/image.png”/>
It will be taken as http://www.domain.com/currentpage/images/image.png
Alternatively, you can specify the absolute path like this:
<Img src = “http://www.domain.com/currentpage/images/image.png”>
If you are using images from the same domain then you should use the relative path. If you are using the third party images or images from other URL then specify the absolute path.
See example below with relative and absolute path:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<img src=“TC_logo.png”/><br />
<img src=“https://www.tutorialscollection.com/html-demo/TC_logo.png”/>
</body>
</html>
|
The alt attribute
The alt stands for the alternative text. This is quite useful for SEO purpose as well, for example, in the Google search for images. Also, if somehow the image is not displayed, due to the user’s slow internet connection or some other reason, the img’s alt text will be displayed. This is how you can use the alt attribute in the <img> tag:
<Img src = “images/image.png”/ alt=”website logo”/>
See the following example:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<img src=“TC_logo.png” alt=“Tutorials Collection Logo”><br />
</body>
</html>
|
HTML img size
You can specify the image size in the img HTML tag. Specify height and width as needed and according to the layout of the web page. See following examples of setting the height and width attributes of the img tag.
The img width example
The example below sets the image width by using the width attribute of the img tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<img src=“TC_logo.png” alt=“Tutorials Collection Logo” width=“263”>
</body>
</html>
|
Setting the height example
The following example sets the image height in the img tag by using the height attribute.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<img src=“TC_logo.png” alt=“Tutorials Collection Logo” height=“60” width=“263”/>
</body>
</html>
|
HTML image link
The example below shows how to link an image to another web page.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” height=“60” width=“263”/></a>
</body>
</html>
|
To learn more about image links, go to its chapter.
The image border example
You can specify the image border that will occupy the given image by using the border attribute. The border attribute is deprecated in HTML 5. An example of using the border attribute in the <img> tag is shown below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” border=“1” height=“60” width=“263”/></a>
</body>
</html>
|
Using CSS with img tag
You can use CSS inside the <img> tag. One way is to use the style attribute inside the <img> tag. Other is to write the external CSS and include CSS in img tag by class name or id or define img properties inside the CSS file or block.
An img CSS example with CSS class
The example below shows using the CSS class with CSS properties and assigning it to the img’s class attribute. The properties include height, width, border in the CSS class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
<style>
.imgstyle
{
border: dashed 1px red;
height: 70px;
width: 270px;
}
</style>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” class=“imgstyle”/></a>
</body>
</html>
|
CSS img with style attribute
The example below uses the Style attribute with the same CSS properties.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” style=“border: dashed 1px red;height: 70px;width: 270px;”/></a>
</body>
</html>
|
Specify source path in CSS
You can even specify image source in the CSS rather in the img src attribute. The example below shows how you can do this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>img tag</title>
<style>
.imgstyle
{
content:url(“TC_logo.png”);
height: 70px;
width: 270px;
}
</style>
</head>
<body>
<img alt=“Tutorials Collection Logo” class=“imgstyle”/>
</body>
</html>
|
Leave A Comment?