Atributos HTML

Un atributo HTML provee información adicional acerca de un elemento HTML.

Atributos HTML

  • Todos los elementos HTML pueden tener atributos.
  • Dichos atributos proveen información adicional acerca del elemento.
  • Estos atributos se especificarán siempre en la etiqueta de apertura.
  • Los atributos generalmente vienen en pares nombre / valor como: nombre = “valor”.

El atributo ‘href’

Los enlaces HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributo href.

Ejm

<a href="https://websarrolladores.com">Esto es un link</a>

El atributo ‘src’

Para definir imágenes utilizamos la etiqueta <img>, para apuntar al archivo de la imagen que queremos que se muestre en pantalla utilizamos el atributo src.

Ejm

<img src="img_girl.jpg">

Los atributos ‘width’ y ‘height’

Las imágenes también tienen atributos width y height, los cuales especifican el ancho y el alto de las mismas.

Ejm

<img src="img_girl.jpg" width="500" height="600">

Los atributos width y height están especificados en pixeles por defecto, por lo que width=500 significa ancho de 500 pixeles.

El atributo ‘alt’

El atributo alt especifica un texto alternativo que será usado si una imagen no puede ser mostrada. El valor del atributo alt puede ser leído por diferentes lectores. De esta manera, alguien “escucha” la página web, por ejemplo una persona con discapacidad visual puede “escuchar” el elemento.

Ejm

<img src="img_girl.jpg" alt="Girl with a jacket">

El atributo ‘style’

El atributo style es usado para especificar el estilo de un elemento, como el color, fuente, tamaño…

Ejm

<p style="color:red">Esto es un párrafo.</p>

El atributo ‘lang’

El lenguaje del documento puede ser declarado en la etiqueta <html>, mediante el atributo lang. Declarar el lenguaje es importante para la accesibilidad de las aplicaciones (lectores de pantalla) y motores de búsqueda.

Ejm

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

Las dos primeras letras especifican el lenguaje (en). Si es un dialecto, se añaden más de dos letras (US).

El atributo ‘title’

Aquí, se agrega un atributo de título al elemento <p>. El valor del atributo title se mostrará como información sobre herramientas cuando pases el mouse sobre el párrafo.

Ejm

<p title="I'm a tooltip">
This is a paragraph.
</p>

Sugerencia, usar atributos en minúsculas

El estándar HTML no requiere que los atributos se usen en minúsculas, no obstante, W3C recomienda escribir los atributos en minúscula, ya que sí los exige para tipos de documentos más estrictos como XHTML.

Valores de atributos entre comillas

Aunque no es necesario especificar los atributos entre comillas, W3C recomienda comillas en HTML, y sí que los exige en otros tipos de documentos como XHTML.

A veces es necesario usar comillas. Este ejemplo no mostrará el atributo de título correctamente, porque contiene un espacio:

Ejm

<p title=About W3Schools>

Comillas dobles o simples

Las comillas dobles alrededor de los valores de los atributos son las más comunes en HTML, pero también se pueden usar comillas simples.

En algunas situaciones, cuando el valor del atributo contiene comillas dobles, es necesario utilizar comillas simples:

Ejm

<p title='John "ShotGun" Nelson'>

O viceversa

<p title="John 'ShotGun' Nelson">

Atributos HTML

Atributo Descripción
alt Especifica un texto alternativo a una imagen, cuando la imagen no puede ser mostrada
disabled Especifica que un elemento input debe ser deshabilitado
href Especifica la URL (dirección web) de un enlace
id Especifica una única id para un elemento
src Especifica la URL (página web) para una imagen
style Especifica un estilo CSS en línea para un elemento
title Especifica información extra acerca de un elemento