Los atributos HTML almacenan in­fo­r­ma­ción adicional en una etiqueta HTML. Para cumplir su función solo necesitan estar in­co­r­po­ra­dos al código. Además de los atributos uni­ve­r­sa­les, de eventos y de datos, existen numerosos atributos in­de­pe­n­die­n­tes.

¿Para qué sirven los atributos HTML?

Los atributos HTML se utilizan para almacenar más in­fo­r­ma­ción sobre los elementos de una etiqueta HTML. Constan de un nombre y un valor. Los atributos HTML se en­cue­n­tran en la etiqueta de apertura y son case in­se­n­si­ti­ve (no di­s­ti­n­guen entre ma­yú­s­cu­las y mi­nú­s­cu­las). Se re­co­mie­n­da en­ca­re­ci­da­me­n­te escribir sus valores entre comillas para evitar errores, aunque no es de obligado cu­m­pli­mie­n­to. Así es como se insertan los atributos HTML en el código:

<elemento nombre="" del="" atributo="Valor del atributo"></elemento>

Si, por ejemplo, se quiere incluir un enlace en una página web, esto se debe hacer con la etiqueta y el atributo href. Ambos juntos quedan de esta manera:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de título</title>
</head>
<body>
<a href="https://www.ejemplo.es">Clica aquí para ver la página de muestra.</a>
</body>
</html>
Consejo

Puedes aprender más sobre los enlaces internos y externos de HTML y sus atributos co­rre­s­po­n­die­n­tes en nuestro artículo detallado sobre a href.

¿Qué atributos HTML existen?

Hay muchos atributos HTML di­fe­re­n­tes, aunque, desde la in­tro­du­c­ción de HTML5, algunas opciones ya no son viables. A grandes rasgos, los atributos HTML pueden dividirse en cinco grupos di­fe­re­n­tes:

  • Atributos uni­ve­r­sa­les clásicos, que se pueden utilizar en casi todos los elementos y no­r­ma­l­me­n­te cumplen la misma función. Sin embargo, en algunos elementos no tienen ningún efecto.
  • Atributos es­pe­cí­fi­cos, que afectan a elementos concretos y definen pa­rá­me­tros para estos.
  • Atributos que se utilizan desde la in­tro­du­c­ción de HTML5; estos generan en parte nuevas po­si­bi­li­da­des o su­s­ti­tu­yen a los atributos HTML más antiguos.
  • Atributos de evento, que activan un evento definido para un elemento cuando los usuarios realizan una de­te­r­mi­na­da acción.
  • Atributos de datos, que pueden contener in­fo­r­ma­ción, pero no son visibles para los usuarios.

Atributos uni­ve­r­sa­les clásicos

Los atributos uni­ve­r­sa­les clásicos están co­n­te­m­pla­dos en la mayoría de las etiquetas HTML. Estos son los más conocidos:

Atributo HTML De­s­cri­p­ción Ejemplo
id Sirve para ide­n­ti­fi­car de forma in­di­vi­dual a cada elemento HTML. id="ejemplo"
class Permite asignar un elemento a una o varias clases. class="coches"
style Define el estilo de un elemento HTML y puede de­te­r­mi­nar, por ejemplo, su color, fuente o tamaño. style="color: blue; font-size: 2em"
title Contiene in­fo­r­ma­ción adicional sobre el contenido de un elemento; se muestra, por ejemplo, en una ventana separada cuando se pasa el ratón por encima del elemento en cuestión. title="texto de ejemplo"
lang Establece el idioma base de un documento. <html lang="es">
dir Define el sentido de lectura de un texto, bien sea de izquierda a derecha o viceversa. <html dir="ltr">ejemplo</html>

Atributos HTML es­pe­cí­fi­cos

Existen numerosos atributos HTML es­pe­cí­fi­cos para definir elementos concretos. Estos son los más uti­li­za­dos:

Atributo HTML De­s­cri­p­ción Ejemplo
alt Muestra un texto al­te­r­na­ti­vo si no se puede cargar o mostrar una imagen. <img src="https://www.ionos.es/digitalguide/cocherojo.jpg" alt="Coche deportivo rojo en un semáforo.">
height Establece la altura de un elemento en px. <img alt="el coche rojo" height="220">
width Establece el ancho de un elemento en px. <img alt="el coche rojo" width="220">
href Define la URL de un enlace. <a href="https://www.pa­gi­nae­je­m­plo.es" title="Más in­fo­r­ma­ción">
hreflang Establece el idioma del documento vinculado. <a href="https://www.pa­gi­nae­je­m­plo.es" lang="es" hreflang="en">In­fo­r­ma­ción en inglés</a>
target Define dónde se debe abrir un enlace. <a href="https://www.pa­gi­nae­je­m­plo.es" target="_blank">
rel Define la relación entre el documento target y su vínculo. <a rel="nofollow" href="https://www.pa­gi­nae­je­m­plo.es/">pagina de ejemplo</a>
src Define el origen de un elemento. <img src="https://www.ionos.es/digitalguide/cocherojo.jpg" alt="el coche rojo">
autoplay Garantiza que un de­te­r­mi­na­do contenido mu­l­ti­me­dia se re­pro­du­z­ca au­to­má­ti­ca­me­n­te; sin embargo, la mayoría de los na­ve­ga­do­res pueden anular esta co­n­fi­gu­ra­ción. <re­pro­du­c­ción au­to­má­ti­ca de vídeo>
poster Define una imagen que pre­vi­sua­li­zar cuando se inserta un vídeo en HTML. <video controls poster="pre­vi­sua­li­za­ción.png">

Nuevos atributos desde HTML5

Desde la in­tro­du­c­ción de HTML5 y HTML 5.1 hay algunos atributos HTML de nueva in­co­r­po­ra­ción. Entre ellos se en­cue­n­tran los si­guie­n­tes:

Atributo HTML De­s­cri­p­ción Ejemplo
co­n­te­n­te­di­ta­ble Define si el contenido de un elemento puede ser editado; sus posibles valores son true y false. <p co­n­te­n­te­di­ta­ble="false">
hidden Atributo universal que puede ocultar un elemento. <p hidden> Este texto quedará oculto </p>
dropzone Define si en el proceso de arrastrar y soltar el elemento este se copia (copy), se enlaza (link) o se mueve (move). <p dropzone="move">
draggable Atributo universal que define si el contenido de un elemento puede ser arra­s­tra­do y soltado; sus posibles valores son true, false y auto. <p draggable="false">
loading Establece cómo se cargan los medios externos; los valores pe­r­mi­ti­dos son auto, eager y lazy. <img src="https://www.ionos.es/digitalguide/cocherojo.jpg" alt="el coche rojo" loading="lazy"
spe­ll­che­ck Determina si se debe activar un corrector or­to­grá­fi­co; los valores pe­r­mi­ti­dos son true y false. <p co­n­te­n­te­di­ta­ble="true" spe­ll­che­ck="false">

Atributos de evento

Hay muchos atributos HTML di­fe­re­n­tes, que activan eventos en un navegador. Los si­guie­n­tes atributos HTML son, por lo tanto, solo una pequeña selección de di­fe­re­n­tes eventos que pueden ser activados a través del Ja­va­S­cri­pt incluido en HTML.

Atributo HTML De­s­cri­p­ción Ejemplo
onclick Activa un evento en Ja­va­S­cri­pt con un clic de ratón. <button onclick="Ejemplo de función ( ) ">Haz clic aquí</button>
onscroll Se activa al mover la rueda del ratón sobre él. <div onscroll="Ejemplo de función ( ) ">
onkeydown Se activa cuando se pulsa una tecla. <input type="text" onkeydown="Ejemplo de función ( ) ">
onsearch Activa un Ja­va­S­cri­pt en cuanto se introduce una búsqueda en la ventana de búsqueda. <input type="búsqueda" onsearch="Ejemplo de función ( ) ">
onerror Puede ejecutar un Ja­va­S­cri­pt en caso de error. <img src="https://www.ionos.es/digitalguide/cocherojo.jpg" onerror="Ejemplo de función ( ) ">
oncopy Se activa cuando se copia un texto. <input type="text" oncopy="Ejemplo de función ( ) " value="Copia este texto">
onselect Activa un Ja­va­S­cri­pt en cuanto se se­le­c­cio­na un elemento del input. <input type="text" onselect="Ejemplo de función ( ) " value="Texto de ejemplo">

Atributos de datos

Además de los atributos HTML me­n­cio­na­dos an­te­rio­r­me­n­te, existen otra serie de atributos que solo pueden evaluarse a través de un script o uti­li­zar­se con CSS. De esta manera se puede pro­po­r­cio­nar in­fo­r­ma­ción que no se va a mostrar de forma visual. Estos atributos HTML siempre comienzan con data-. Puedes de­fi­ni­r­los con se­tA­t­tri­bu­te y leerlos con ge­tA­t­tri­bu­te. Los motores de búsqueda tampoco analizan estos atributos HTML. Para los atributos de datos solo se permiten letras mi­nú­s­cu­las, números, guiones, puntos y dobles puntos.

id="Elementos de ejemplo"
data-colums="5"
data-index-number="1385"
data-parent="html5">
</article>

Co­n­clu­sión: los atributos HTML son im­po­r­ta­n­tes para casi todas las páginas web

Si aprendes HTML, rá­pi­da­me­n­te te darás cuenta de que los atributos HTML son un bloque fu­n­da­me­n­tal para conseguir una página web op­ti­mi­za­da y co­m­ple­ta­me­n­te funcional. Los atributos HTML son la mejor opción y la más segura, es­pe­cia­l­me­n­te si necesitas funciones que se aparten del ámbito cotidiano. La in­fo­r­ma­ción al­ma­ce­na­da garantiza que todos los aspectos de tu nueva web funcionan a la pe­r­fe­c­ción. Es es­pe­cia­l­me­n­te fácil de utilizar con uno de los numerosos editores de HTML que existen ac­tua­l­me­n­te.

Consejo

Una página web perfecta – justo como a ti te gusta: con el editor de páginas web de IONOS obtienes todas las he­rra­mie­n­tas que necesitas para construir tu propia presencia online desde cero. Como al­te­r­na­ti­va, nuestros expertos pueden crear tu página web acorde a tus deseos pa­r­ti­cu­la­res. Elige el modelo más adecuado para tus ne­ce­si­da­des.

Ir al menú principal