Images

HTML images, added using the (<img>) tag, enhance content and engagement. Key attributes include (src) for the source, (alt) for accessibility, and (width/height) for sizing.

Images in HTML

Images in HTML are embedded using the <img> element, allowing the inclusion of pictures, icons, and graphics on a webpage.

Basic Image Syntax

The <img> tag is self-closing.
The src attribute specifies the image source (URL or file path).
The alt attribute provides alternative text for accessibility and SEO.

Example

index.html

<img src="image.jpg" alt="Beautiful Landscape">

Image Attributes

width & height : Define image dimensions in pixels or percentages.
type: Displays tooltip text on hover.

Image Attributes Example

index.html

<img src="logo.png" alt="Company Logo" width="150" height="100" title="Our Logo">

Responsive Images

max-width: Setting it to 100% ensures images adjust dynamically.

Responsive Images Example

style.css

img {
  max-width: 100%;
  height: auto;
}

Using External Images

Images can be sourced from external URLs.

External Images Example

index.html

<img src="image.jpg" alt="Beautiful Landscape">

Image as a Link

Wrapping an <img> inside an <a> tag makes it clickable.

Link Example

index.html

<a href="https://institute.qarpeo.com" target="_blank">
  <img src="img.jpg" alt="Click Here">
</a>

Background Images with CSS

The background-image property sets an image as a background.

Background Images Example

style.css

body {
  background-image: url('background.jpg');
  background-size: cover;
}

Conclusion

HTML images improve the visual appeal of web pages. Using proper attributes and responsive techniques enhances performance and accessibility.

<tfoot>

The HTML <tfoot> element specifies the footer of a table, commonly used to consolidate summary or aggregate data. It is often styled uniformly with the other rows in the table.

<img>

The <img> element embeds images using src for the source, alt for alternative text, and width/height for sizing.