menu

html - 3 Topics

HTML5 APIs

DEEP DIVE INTO

html

Topic:html img Tag

menu

The HTML <img> tag is used to embed images or graphics into a web page. Images are an essential part of web content, and the <img> tag allows you to display them within your HTML documents.

Here's the basic syntax for the <img> tag:

html<img src="image-source" alt="alternative-text" width="width-value" height="height-value">

Let's break down the attributes commonly used with the <img> tag:

  • src: This attribute specifies the source URL (Uniform Resource Locator) of the image file you want to display. It can be a relative or absolute URL. For example, if the image is in the same directory as your HTML file, you can specify just the file name (e.g., src="my-image.jpg"), or you can provide the full URL if the image is hosted on a remote server (e.g., src="https://example.com/images/my-image.jpg").

  • alt: The alt attribute provides alternative text for the image. It is essential for accessibility because it describes the image's content for users who cannot see it, such as those using screen readers or in cases where the image fails to load. It's a good practice to include meaningful and descriptive alt text.

  • width and height: These optional attributes allow you to specify the dimensions (in pixels) of the image. While these attributes are optional, they are often used to control the image's size on the web page. If you only specify one dimension (either width or height), the browser will automatically adjust the other dimension to maintain the image's aspect ratio.

Here's an example of the <img> tag in action:

html<img src="flower.jpg" alt="Flower image" width="300" height="300">
Image displayed on browser
If image has any error in loading, alternet (alt) attribute text is shown

In this example, the <img> tag is used to display an image named "example.jpg" with a width of 300 pixels and a height of 200 pixels. The alt attribute provides a textual description of the image.

It's important to ensure that you have the necessary rights and permissions to use images on your website, and consider optimizing your images for web use to improve page load times and user experience.

danger
1280 x 720 px