HTML img

La etiqueta <img> en HTML es utilizada para insertar imágenes en una página web. Es un elemento de línea que permite mostrar una imagen en el navegador, permitiendo al usuario ver la imagen en el contexto de la página.

Ejemplo de uso

Este es un ejemplo de cómo se utiliza:

<img src="image.jpg" alt="descripcion de la imagen" width="300" height="200">
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está especificando un texto alternativo “descripcion de la imagen” además de las dimensiones en píxeles.

Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, y es una forma eficaz de agregar imágenes a una página web. Sin embargo, es importante tener en cuenta que el tamaño de la imagen puede afectar el tiempo de carga de la página.

Atributos

Los atributos más importantes de la etiqueta <img> en HTML son:

  • src: especifica la ruta de la imagen que se mostrará. Este atributo es esencial para indicar cuál es la imagen que se va a mostrar.
  • alt: especifica un texto alternativo que se mostrará si la imagen no se puede cargar o no es accesible para el usuario. Este atributo es importante para proporcionar una descripción de la imagen y también es requerido para accesibilidad.
  • width y height: especifica las dimensiones de la imagen en píxeles. Este atributo es importante para controlar el tamaño de la imagen en la página.
  • title: proporciona un texto que se mostrará como una descripción o información adicional al pasar el cursor sobre la imagen.

Además de estos atributos, también se pueden utilizar otros como class, id, style, entre otros, para modificar el estilo o comportamiento de la imagen.

Más ejemplos

Sí, aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <img> en HTML:

  1. Insertar una imagen con un texto alternativo y dimensiones:
<img src="image.jpg" alt="descripcion de la imagen" width="300" height="200">
Lenguaje del código: HTML, XML (xml)
  1. Insertar una imagen con un texto alternativo, dimensiones y un título:
<img src="image.jpg" alt="descripcion de la imagen" width="300" height="200" title="titulo de la imagen">
Lenguaje del código: HTML, XML (xml)
  1. Insertar una imagen con un texto alternativo, dimensiones, título y un estilo css
<img src="image.jpg" alt="descripcion de la imagen" width="300" height="200" title="titulo de la imagen" style="border: 1px solid black;">
Lenguaje del código: HTML, XML (xml)
  1. Insertar una imagen con un texto alternativo, dimensiones, título, estilo css y una clase css:
<img src="image.jpg" alt="descripcion de la imagen" width="300" height="200" title="titulo de la imagen" class="img-class" style="border: 1px solid black;">
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está especificando un texto alternativo “descripcion de la imagen”, las dimensiones en píxeles, un título “título de la imagen” y se está aplicando una clase css “img-class” y un estilo css para darle un borde negro a la imagen.