¿Qué son los ATRIBUTOS en HTML? (con ejemplos prácticos!)

Atributos HTML

Los atributos proporcionan información adicional sobre elementos HTML.

  • Todos los elementos HTML pueden tener atributos
  • Los atributos proporcionan información adicional sobre un elemento
  • Los atributos siempre se especifican en la etiqueta de inicio
  • 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

See the Pen 1.5 - Atributos - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo src

Las imágenes HTML se definen con la etiqueta <img>.

La ruta de dónde se encuentra la imagen se especifica en el atributo src

See the Pen 1.5 - Atributos - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Los atributos width y height

Las imágenes HTML también tienen atributos de ancho (width) y alto (height).

El ancho y la altura se especifican en píxeles de forma predeterminada; entonces width= "100" significa 100 píxeles de ancho.

See the Pen 1.5 - Atributos - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo alt

El atributo alt especifica un texto alternativo que se utilizará, si no se puede mostrar una imagen.

Los lectores de pantalla pueden leer el valor del atributo alt. De esta manera, alguien "escucha" la página web, como una persona con discapacidad visual puede "escuchar" el elemento.

El atributo alt también es útil si la imagen no se puede mostrar (por ejemplo, si no existe)

See the Pen 1.5 - Atributos - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo style

Se usa para especificar el estilo de un elemento, como color, fuente, tamaño, etc.

See the Pen 1.5 - Atributos - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo lang

El idioma del documento puede declararse en la etiqueta <html>.

El idioma se declara con el atributo lang.

Declarar un idioma es importante para las aplicaciones de accesibilidad (lectores de pantalla) y los motores de búsqueda.

See the Pen 1.5 - Atributos - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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 el párrafo cuando pase el mouse por encima

See the Pen 1.5 - Atributos - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Escribe los atributos en minúscula

El estándar HTML5 no requiere nombres de atributo en minúsculas.

El atributo title se puede escribir con mayúsculas o minúsculas como title o TITLE.

Por tema de buenas prácticas es mejor usar siempre minúsculas.

Usa siempre comillas en los atributos

El estándar HTML5 no requiere comillas alrededor de los valores de los atributos.

El atributo href se puede escribir sin comillas.

A veces es necesario usar comillas. Por ejemplo no mostrará el atributo de title correctamente si hay espacios en el valor.

See the Pen 1.5 - Atributos - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

¿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.

See the Pen 1.5 - Atributos - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Resumen

  • Todos los elementos HTML pueden tener atributos
  • El atributo title proporciona información adicional y se muestra cuando se pasa el ratón por encima del elemento
  • El atributo href proporciona información de la dirección del enlace
  • Los atributos de width y height proporcionan información sobre el tamaño de las imágenes
  • El atributo alt proporciona texto para lectores de pantalla
  • Es recomendable usar siempre nombres de atributo en minúsculas
  • Es recomendable siempre usar comillas

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.