Image Tag in HTML
Images and Links
In this lesson, we will learn how to insert an image using an <img> tag in HTML.
What is Image Tag in HTML
The image tag is an HTML tag used to insert images on a web page. The image tag is also known as <img> tag. The syntax for the <img> tag is given below.
Syntax
<img src="image_file_path" alt="alternative_text">The src attribute specifies the source of the image file, and the alt attribute specifies the alternative text for the image. The alt attribute is important because it provides a description of the image for users who cannot see it due to accessibility issues or slow internet connections.
Using img Tag with Absolute URL
The src attribute of the image tag can be an absolute URL to an image file on another server.
An absolute URL in HTML is a complete web address that includes the protocol (such as http:// or https://), the domain name, and the specific path to a web page or resource on a website.
It specifies the full web address for a particular page or resource, allowing it to be accessed from anywhere on the internet.
Absolute URLs are commonly used when linking to pages or resources on other websites or referencing resources within a website that may be located in different directories or subdomains.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Tag Example</title>
</head>
<body>
<img src="https://www.jcppedit.com/images/overview.png" alt="Multi Coding IDE">
</body>
</html>Output
In the above example, the img tag will display the image overview.png from the website jcppedit.com with the alternative text "Multi Coding IDE".
Using img Tag with Relative URL
We can also use the src attribute with a relative URL to an image file on the same server.
A relative URL in HTML is a partial web address that is relative to the current page or resource's location. It specifies the location of a page or resource in relation to the current document rather than providing the full web address.
Relative URLs are commonly used within a website to link to other pages or resources on the same site. They are shorter and easier to maintain than absolute URLs since they do not require the full web address to be specified.
Example
<img src="images/html-tutorial-share-small.png" alt="Learn HTML">
Output
In the above example, the img tag will display the image html-tutorial-share-small.png from the images folder on the same server with the alternative text "Learn HTML".
Image Tag with Width and Height
We can specify the width and height of the image using the width and height attributes of the image tag. For example:
Example
<img src="images/html-tutorial-share-small.png" width="200" height="300" alt="Image with Width and Height">
<img src="images/html-tutorial-share-small.png" width="150" alt="Image with Width Only">
<img src="images/html-tutorial-share-small.png" height="100" alt="Image with Height Only">Output
Note: If we give only width, then the height will be adjusted per the image's aspect ratio, and if we give only height, then the width will be adjusted per the image's aspect ratio.
Image Tag with Border
We can add a border to the image using the border attribute of the image tag. For example:
Example
<img src="images/html-tutorial-share-small.png" border="5" width="150" height="150" alt="Image with Border">
Output
Image Tag with Title
We can add a title to the image using the title attribute of the image tag. The title will only appear when the user places the mouse cursor on the image.
Example
<img src="images/html-tutorial-share-small.png" width="150" height="150" title="Learn HTML" alt="Image with Title">
Output
Image Tag with Lazy Loading
Lazy loading is a technique that delays the loading of non-critical resources, such as images until the user needs them. This technique can significantly improve page load times, especially on mobile devices with slow internet connections. We can implement lazy loading using the loading attribute of the image tag. For example:
Example
<img src="images/html-tutorial-share-small.png" alt="Image with Lazy Loading" loading="lazy">
Output
The id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <img> tag and use it to apply a specific style to that particular tag.
Example
<img src="image.jpg" id="web">In the above example, we assign an id attribute to the img tag with a value web. In CSS and JavaScript, we can use the name web to access the specific img tag whose id value is set to the name web.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the image tags and use it to apply a specific style to all the image tags that belong to a particular class.
Example
<img src="image1.jpg" class="info">
<img src="image2.jpg" class="info">In the above example, both <img> tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both <img> tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style Attribute
The style attribute can be used to apply inline css styles to an image tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<img src="images/html-tutorial-share-small.png" style="border-style: dotted; border-width: 5px; border-color: red" alt="Image with Style Attribute">Output
The style="border-style: dotted; border-width: 5px; border-color: red" will change the border style to dotted, border width to 5px and border color of the image tag to red.
