Img Tags in HTML: A Complete Introduction

Img Tags in HTML: A Complete Introduction

byRAYS CODING -
0
In this article, we will learn about the HTML "<img>" tag. As we know images are an important part of HTML. Images are used to enhance the interface of a website.

HTML TUTORIAL

HTML TAG

The HTML tag is an inline HTML tag. It is used to add images to a web page. Like anchor tag, heading tag, and paragraph tag, the "<img>" tag does not have a closing tag. 

Basic Syntax


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Tag</title>
    </head>
    <body>
        <img src="bg1.jpg" alt="Bg Image">
    </body>
    </html>

In the above example, the "<img>" tag has two main attributes.

SRC Attribute:- In this attribute, we give the name of the "image".
ALT Attribute:- In this attribute, we give a "text". If the image is not loaded then the alt text is shown.

Apart from these two tags, we can use other attributes like "width", "height", "class", "ID" etc.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Tag</title>
    </head>
    <body>
        <img src="bg1.jpg" alt="Bg Image" width="100" height="100" class="baImage" id="background-Image">
    </body>
    </html>

Width and Height:- These attributes specify the width and height of the image. You can specify these in pixels or percentages. You can fix the size of the image according to the requirement.

Title:- This attribute provides additional information about the image, which appears as a tooltip when the user hovers over the image.

Loading:- This attribute helps improve page load performance. Does not load off-screen images until the user scrolls to them. Its values ​​can be lazy or eager.

Srcset and Sizes: These properties enable responsive images, specifying different image sources for different display conditions. The "srcset" property provides a list of image sources, and the sizes property defines the display size for each image source.

Class and ID:- With the help of these attributes, custom CSS code is written.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Tag</title>
    </head>
    <body>
        <img src="bg1.jpg" alt="Bg Image" width="100" height="100" class="baImage" id="background-Image">
        <img src="image.jpg" alt="background-Image" width="300" height="200">
        <img src="image.jpg" alt="background-Image" title="background Image">
        <img src="image.jpg" alt="background-Image" loading="lazy">
        <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w" sizes="(max-width: 600px) 480px, 800px" alt="background-Image">
    </body>
    </html>

Conclusion

The HTML <img> tag is an essential tag for adding images to your web pages. Using it correctly can also improve website user experience and performance.
  • Use alt text so that your website is easier to navigate and improves SEO.
  • Use lazy loading so that a single image loads in the user's view, improving page load times.
By using the <img> tag correctly, you can create an attractive, fast, and user-friendly website.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement