Image

HTML Images

In HTML, images are incorporated using the <img> tag. This self-closing tag requires the use of attributes like src to specify the image's source and alt to provide a description for accessibility.

Basic <img> Tag

The <img> tag allows you to insert images into a webpage. The src attribute indicates the image's URL, and the alt attribute gives an alternative text for users with visual impairments. The tag doesn’t require a closing tag and can include other attributes like width and height to control image size.

Example

<img src="img.jpg" alt="Social media" />

Key Attributes

• src: Specifies the path to the image.
  • Relative Path: src="image.jpg"
  • Absolute Path: src="https://institute.qarpeo.com/image.jpg"
• alt: Provides alternative text for accessibility and SEO.

Image Sizing

Rather than using the HTML width and height attributes, it's better to control the image's dimensions through CSS.

<img src="img.jpg" alt="Social media" />

Image as a Link

You can also make an image clickable by wrapping it inside an anchor tag <a>. This allows users to click the image and be redirected to a URL.

<a href="https://institute.qarpeo.com"><img src="img.jpg" alt="Laptop" /></a>

Floating Images with CSS

Images can be floated to the right or left using CSS. This is often used for text wrapping or placing images in a specific layout.

<img src="img.jpg" alt="Rose" style="float:right; width:42px; height:42px;" />

Conclusion

The <img> tag in HTML is essential for embedding images into a webpage, with attributes like src to define the image source and alt for accessibility. Images can be resized using CSS for better control over their dimensions.