Attribute For HTML Image Tags

HTML provides several image attributes that can be used with the <img> tag to control how images are displayed on a webpage. Following are some of the most commonly used image attributes:

src attribute:

The "src" attribute is used to specify the URL of the image file that is to be displayed on the webpage.

In this code, used the "src" attribute to specify the URL of the image file "example.jpg".

alt attribute:

The "alt" attribute provides a text description of the image for accessibility purposes.

In this code, used the "alt" attribute to provide a text description of the image "Example Image".

width and height attributes:

The "width" and "height" attributes are used to specify the dimensions of the image in pixels.

In this code, used the "width" and "height" attributes to specify the dimensions of the image to be 500 pixels wide and 300 pixels high.

title attribute:

The "title" attribute provides additional information about the image when the user hovers over it.

In this code, used the "title" attribute to provide additional information about the image when the user hovers over it.

align attribute:

The "align" attribute is used to align the image horizontally and vertically within the container. This attribute is deprecated in HTML5, and it is recommended to use CSS to style the alignment of images.

In this code, used the "align" attribute to align the image to the right of the container.

style attribute:

The "style" attribute is used to apply inline CSS styles to the image. For example:

In this code, used the "style" attribute to apply a black border of 1 pixel thickness around the image.

What is the purpose of the "alt" attribute in the <img> tag?

The "alt" attribute in the <img> tag is used to provide alternative text description of the image for accessibility purposes. The purpose of the "alt" attribute is to provide information about the image to users who may not be able to see the image, such as users who use screen readers, users who have disabled images in their browsers, or users who have slow internet connections and images have not fully loaded yet.

When the image cannot be displayed, the text specified in the "alt" attribute will be displayed instead of the image. This ensures that the user can still understand the content and context of the image, even if they cannot see it.

It is important to use descriptive and accurate text in the "alt" attribute that accurately describes the content and function of the image. For example, if the image is a photo of a dog, the "alt" attribute should be something like "A golden retriever dog playing fetch in a park" rather than a generic or vague description like "Image of a dog".

Additionally, using the "alt" attribute can also improve the search engine optimization (SEO) of the webpage by providing additional information about the image for search engines to index.

Relative URLs in the "src" attribute of the <img> tag?

You can use relative URLs in the "src" attribute of the <img> tag.

A relative URL is a URL that is relative to the current web page's URL, rather than specifying the complete URL starting with "http://" or "https://".

For example, if the image file is located in the same directory as the HTML file, you can use a relative URL like this:

In this example, the image file "image.jpg" is located in the same directory as the HTML file, so we can use a relative URL to specify the file path.

Relative URLs are useful when you want to refer to resources that are located on the same server or website. They are shorter and more convenient to use than absolute URLs and can make it easier to move files or a website to a different server or domain in the future without having to update all the file paths in the HTML code.

Conclusion:

HTML provides several image attributes that can be used with the <img> tag to control how images are displayed on a webpage, including the "src", "alt", "width", "height", "title", "align", and "style" attributes.