¿Qué son los atributos en HTML?

Descubre cómo los atributos HTML añaden información adicional a los elementos, incluyendo atributos esenciales como href, src, alt, width, height, style, lang y title.

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

<a href="https://kikopalomares.com/">Esto es un enlace</a>

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

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3947459/kikopalomares.jpg">

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.

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3947459/kikopalomares.jpg" width="100" height="200">

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.

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3947459/kikopalomares.jpg" alt="Foto de Kiko">

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

El atributo style

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

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

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.

<!DOCTYPE html>
<html lang="es-ES">
<body>
</body>
</html>

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

<p title="¡Soy un tooltip!">Esto es un párrafo</p>

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.

<!-- MAL -->
<a href=https://kikopalomares.com/>

<!-- BIEN -->
<a href="https://kikopalomares.com/">
  
  
<!-- No funcionará porque hay un espacio -->
<p title=Kiko Palomares>

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

<p title='Kiko "Programador" Palomares'>

<p title="Kiko 'Programador' Palomares">

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

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Join the conversation

or to participate.