Atributos HTML: un vistazo a los atributos más importantes
Equipo editorial de IONOS7 mins
Los atributos HTML almacenan información adicional en una etiqueta HTML. Para cumplir su función solo necesitan estar incorporados al código. Además de los atributos universales, de eventos y de datos, existen numerosos atributos independientes.
¿Para qué sirven los atributos HTML?
Los atributos HTML se utilizan para almacenar más información sobre los elementos de una etiqueta HTML. Constan de un nombre y un valor. Los atributos HTML se encuentran en la etiqueta de apertura y son case insensitive (no distinguen entre mayúsculas y minúsculas). Se recomienda encarecidamente escribir sus valores entre comillas para evitar errores, aunque no es de obligado cumplimiento. 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>Puedes aprender más sobre los enlaces internos y externos de HTML y sus atributos correspondientes en nuestro artículo detallado sobre a href.
¿Qué atributos HTML existen?
Hay muchos atributos HTML diferentes, aunque, desde la introducción de HTML5, algunas opciones ya no son viables. A grandes rasgos, los atributos HTML pueden dividirse en cinco grupos diferentes:
- Atributos universales clásicos, que se pueden utilizar en casi todos los elementos y normalmente cumplen la misma función. Sin embargo, en algunos elementos no tienen ningún efecto.
- Atributos específicos, que afectan a elementos concretos y definen parámetros para estos.
- Atributos que se utilizan desde la introducción de HTML5; estos generan en parte nuevas posibilidades o sustituyen a los atributos HTML más antiguos.
- Atributos de evento, que activan un evento definido para un elemento cuando los usuarios realizan una determinada acción.
- Atributos de datos, que pueden contener información, pero no son visibles para los usuarios.
Atributos universales clásicos
Los atributos universales clásicos están contemplados en la mayoría de las etiquetas HTML. Estos son los más conocidos:
| Atributo HTML | Descripción | Ejemplo |
| id | Sirve para identificar de forma individual 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 determinar, por ejemplo, su color, fuente o tamaño. | style="color: blue; font-size: 2em" |
| title | Contiene informació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 específicos
Existen numerosos atributos HTML específicos para definir elementos concretos. Estos son los más utilizados:
| Atributo HTML | Descripción | Ejemplo |
| alt | Muestra un texto alternativo si no se puede cargar o mostrar una imagen. | <img src="https://www.ionos.mx/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.paginaejemplo.es" title="Más información"> |
| hreflang | Establece el idioma del documento vinculado. | <a href="https://www.paginaejemplo.es" lang="es" hreflang="en">Información en inglés</a> |
| target | Define dónde se debe abrir un enlace. | <a href="https://www.paginaejemplo.es" target="_blank"> |
| rel | Define la relación entre el documento target y su vínculo. | <a rel="nofollow" href="https://www.paginaejemplo.es/">pagina de ejemplo</a> |
| src | Define el origen de un elemento. | <img src="https://www.ionos.mx/digitalguide/cocherojo.jpg" alt="el coche rojo"> |
| autoplay | Garantiza que un determinado contenido multimedia se reproduzca automáticamente; sin embargo, la mayoría de los navegadores pueden anular esta configuración. | <reproducción automática de vídeo> |
| poster | Define una imagen que previsualizar cuando se inserta un vídeo en HTML. | <video controls poster="previsualización.png"> |
Nuevos atributos desde HTML5
Desde la introducción de HTML5 y HTML 5.1 hay algunos atributos HTML de nueva incorporación. Entre ellos se encuentran los siguientes:
| Atributo HTML | Descripción | Ejemplo |
| contenteditable | Define si el contenido de un elemento puede ser editado; sus posibles valores son true y false. | <p contenteditable="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 arrastrado y soltado; sus posibles valores son true, false y auto. | <p draggable="false"> |
| loading | Establece cómo se cargan los medios externos; los valores permitidos son auto, eager y lazy. | <img src="https://www.ionos.mx/digitalguide/cocherojo.jpg" alt="el coche rojo" loading="lazy" |
| spellcheck | Determina si se debe activar un corrector ortográfico; los valores permitidos son true y false. | <p contenteditable="true" spellcheck="false"> |
Atributos de evento
Hay muchos atributos HTML diferentes, que activan eventos en un navegador. Los siguientes atributos HTML son, por lo tanto, solo una pequeña selección de diferentes eventos que pueden ser activados a través del JavaScript incluido en HTML.
| Atributo HTML | Descripción | Ejemplo |
| onclick | Activa un evento en JavaScript 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 JavaScript 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 JavaScript en caso de error. | <img src="https://www.ionos.mx/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 JavaScript en cuanto se selecciona 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 mencionados anteriormente, existen otra serie de atributos que solo pueden evaluarse a través de un script o utilizarse con CSS. De esta manera se puede proporcionar información que no se va a mostrar de forma visual. Estos atributos HTML siempre comienzan con data-. Puedes definirlos con setAttribute y leerlos con getAttribute. Los motores de búsqueda tampoco analizan estos atributos HTML. Para los atributos de datos solo se permiten letras minúsculas, números, guiones, puntos y dobles puntos.
id="Elementos de ejemplo"
data-colums="5"
data-index-number="1385"
data-parent="html5">
</article>Conclusión: los atributos HTML son importantes para casi todas las páginas web
Si aprendes HTML, rápidamente te darás cuenta de que los atributos HTML son un bloque fundamental para conseguir una página web optimizada y completamente funcional. Los atributos HTML son la mejor opción y la más segura, especialmente si necesitas funciones que se aparten del ámbito cotidiano. La información almacenada garantiza que todos los aspectos de tu nueva web funcionan a la perfección. Es especialmente fácil de utilizar con uno de los numerosos editores de HTML que existen actualmente.
Una página web perfecta – justo como a ti te gusta: con el editor de páginas web de IONOS obtienes todas las herramientas que necesitas para construir tu propia presencia online desde cero. Como alternativa, nuestros expertos pueden crear tu página web acorde a tus deseos particulares. Elige el modelo más adecuado para tus necesidades.
