Image Attributes (src, alt, title)

Images are an essential part of many webpages, helping to illustrate content and make websites more engaging. The <img> tag in HTML allows us to add images to a webpage. The three most important attributes of the <img> tag are src, alt, and title. Each attribute plays a specific role in displaying the image correctly and improving the accessibility and usability of the webpage.

The src Attribute

The src (source) attribute is required in the <img> tag. It specifies the path or URL to the image file that you want to display. The value of src can be either an external link to an image on another website or a path to a local file stored within the project directory.

Example of Using src Attribute

    <img src="https://example.com/images/sample.jpg" alt="Sample Image">
        

In this example, src="https://example.com/images/sample.jpg" points to an external URL where the image is stored.

Example of a Local Image

If the image is stored in the same directory as the HTML file or in a subfolder, you can specify a relative path:

    <img src="images/photo.jpg" alt="Local Photo">
        

This example uses a relative path to a file named photo.jpg stored in the images folder.

The alt Attribute

The alt (alternative text) attribute provides a description of the image. This text is displayed when the image cannot be loaded, and it is also read aloud by screen readers for visually impaired users, making it essential for accessibility. It also improves SEO by providing additional context to search engines about the content of the image.

Example of Using alt Attribute

    <img src="https://example.com/images/photo.jpg" alt="A beautiful sunset over the ocean">
        

In this example, the alt text describes the content of the image as "A beautiful sunset over the ocean." If the image fails to load, this text will appear in its place.

The title Attribute

The title attribute provides additional information about the image. When the user hovers over the image, the title text appears as a tooltip. The title attribute is optional, but it can provide useful context to users who hover over the image.

Example of Using title Attribute

    <img src="https://example.com/images/photo.jpg" alt="A beautiful sunset over the ocean" title="Sunset over the Pacific Ocean">
        

In this example, the title attribute provides additional context as "Sunset over the Pacific Ocean." When users hover over the image, they will see this tooltip.

Combining src, alt, and title Attributes

Typically, all three attributes are used together to ensure that the image displays correctly, provides accessibility information, and gives the user additional context.

Complete Example

    <img src="https://example.com/images/nature.jpg" alt="Mountain landscape" title="Beautiful mountain landscape in autumn">
        

In this example:

• src specifies the URL of the image.
• alt provides alternative text describing the image as "Mountain landscape."
• title displays a tooltip that reads "Beautiful mountain landscape in autumn" when the user hovers over the image.

Conclusion

The src, alt, and title attributes are essential for using images effectively in HTML. The src attribute defines the location of the image, the alt attribute improves accessibility, and the title attribute provides additional context for the user. Using these attributes ensures that images enhance the user experience and accessibility of your webpage.