Tag HTML img

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento HTML img inserta una imagen en un documento, cuya ubicación se establece en el atributo "src".

Las imágenes resultan excelentes para mostrar información que es difícil de explicar con texto. Pero no debes olvidar que las personas con discapacidades visuales pueden perderse de recibir su contenido. Esta es la principal razón de la existencia del atributo "alt" (y su presencia obligatoria en XHTML), el cual debería ser utilizado por los autores para proveer una versión alternativa textual para la información mostrada en la imagen o su propósito.

Algunos atributos de este elemento tienen una fuerte naturaleza presentacional, razón por la cual han sido desaprobados en HTML 4.01 en favor de las hojas de estilo. Estos atributos son: "align", "border", "hspace" y "vspace". Además, el atributo "name" ha sido desaprobado en XHTML 1.0. debido a ello, el uso de todos estos atributos debería ser evitado.

Ejemplos

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

• RTL: derecha a izquierda.
• LTR: izquierda a derecha.

src (uri)

Este atributo contiene una URI que apunta al recurso de imagen. Este es el atributo más importante del elemento, y es obligatorio, debido a que sin el mismo no habría una imagen que mostrar.

alt (text)

El valor de este atributo provee una alternativa textual para el contenido o propósito de la image, y por los tanto, debe describir exactamente lo que la imagen intenta mostrar. Esto es vital cuando el desarrollo del sitio web necesita alcanzar las audiencias con discapacidades visuales.

En XHTML 1.0, este atributo se ha vuelto obligatorio para este elemento y, por lo tanto, no debería ser omitido.

longdesc (uri)

Este atributo apunta a un recurso con información extendida para el contenido de la imagen. Por lo tanto, el documento destino, debe expandir y complementar la infromación provista en el atributo "alt".

width (length)

Especifica el ancho de la imagen. Este valor puede ser diferente al ancho real de la imagen, y los navegadores deberían redimensionar la misma como sea necesario. Sin embargo, especificar un ancho diferente, puede causa imágenes pixeladas (cuando es mayor) o mayores tiempos de carga de la página (cuando es menor).

height (length)

Especifica la altura de la imagen. Este valor puede ser diferente a la altura real de la imagen, y los navegadores deberían redimensionar la misma como sea necesario. Sin embargo, especificar una altura diferente, puede causa imágenes pixeladas (cuando es mayor) o mayores tiempos de carga de la página (cuando es menor).

ismap

Cuando este atributo booleano está presente, la imagen es identificada como un mapa de imagen del lado servidor.

Para crear un mapa de imagen del lado servior, se debe insertar una imagen con el atributo "ismap" presente, dentro del contenido de un vínculo. De esta forma, cuando el cisitante hace click sobre la imagen, el vínculo es seguido y las coordenadas donde el click ha ocurrido son enviadas al documento destino.

Estas coordenadas definirán el número de píxeles desde la esquina superior izquierda de la imagen, y se nombrarán usando el valor del atributo "name" de la imagen: "nombre_elemento.x" para la coordenada horizontal y "nombre_elemento.y" para la vertical.

Recuerda que en XHTML, los atributos booleanos deben tomar a sus propios nombres como valor (por ejemplo, nombreatributo="nombreatributo").

usemap (uri)

El valor de este atributo apunta a un mapa de imagen (elemento HTML map) que será asociado a este elemento. Por lo tanto, este valor debe coincidir con el valor del atributo "name" en el mapa de imagen.

name (cdata)

Este valor actúa como indentificador para el marco, el cual puede utilizarse en vínculos y formularios como valor del atributo "target".

En XHTML 1.0 el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id", y en XHTML 1.1 es simplemente inválido. Por lo tanto, su uso ya no es recomendable.

align

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Especifica la posición de la imagen respecto del contenido a su alrededor. Puede tomar uno de los siguientes valores (insensibles a mayúsculas/minúsculas):

• top: el lado superior de la imagen es alineado verticalmente con la línea base.
• middle: la imagen es centrada verticalmente respecto de la línea base.
• bottom: el lado inferior de la imagen es alineado verticalmente con la línea base. Este es el valor por defecto.
• left: la imagen flota a la margen izquierda.
• right: la imagen flota a la margen derecha.

border (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Este atributo establece el ancho del borde en número de píxeles.

hspace (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Establece la cantidad de espacio en blanco (en píxeles) que será insertado como márgenes izquierdo y derecho de la imagen.

vspace (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Establece la cantidad de espacio en blanco (en píxeles) que será insertado como márgenes superior e inferior de la imagen.

Eventos

• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Ve a la lista completa de eventos en HTML.