html image tags | image tag in html #html #htmlcss

HTML IMAGE TAGS WITH EXAMPLE

1. <img> tag: The <img> tag is used to display an image on a web page.

Syntax:

<img src="image_url" alt="alternative_text">

Example:-

<img src="https://example.com/image.jpg" alt="Example Image">

<figure> and <figcaption> tags: The <figure> and <figcaption> tags are used to group an image with its caption.

Syntax:

<figure>

  <img src="image_url" alt="alternative_text">

  <figcaption>Caption text</figcaption>

</figu

re>

Example:-

<figure>

  <img src="https://example.com/image.jpg" alt="Example Image">

  <figcaption>This is an example image.</figcaption>

</figu

re>

<picture> and <source> tags: The <picture>and <source> tags are used to provide multiple versions of an image based on different conditions, such as screen size or device resolution.

Syntax:

<picture>

  <source srcset="image_url_1" media="media_query_1">

  <source srcset="image_url_2" media="media_query_2">

  <img src="fallback_image_url" alt="alternative_text">

</pict

ure>

Example:-

<picture>

  <source srcset="https://example.com/image-large.jpg" media="(min-width: 1024px)">

  <source srcset="https://example.com/image-small.jpg" media="(max-width: 1023px)">

  <img src="https://example.com/image.jpg" alt="Example Image">

</pict

ure>

Note: In the above example, if the screen width is 1024 pixels or larger, the browser will load image-large.jpg. Otherwise, it will load image-small.jpg. If neither of the conditions is met, the fallback image image.jpg will be loaded.

These are some of the commonly used HTML image tags. Remember to replace the image_url with the actual URL of your image and alternative_text with a descriptive text for the image.