Atributos comunes en HTML

Como hemos visto, el HTML está formado por etiquetas. Muchas etiquetas. Cada etiqueta tiene una misión y tarea y contendrá cierto contenido relacionado con su misión. Y además tenemos los atributos, que son palabras clave de texto que modifican ligeramente el comportamiento de la etiqueta que lo contiene.

Ten en cuenta que esta sección no es inmediatamente necesaria para usuarios iniciados, por lo que quizás sea mejor saltarla temporalmente y posponerla hasta que el lector tenga más soltura y esté más familiarizado con HTML.

Atributos de CSS

En este apartado vamos a ver una lista de atributos comunes que tienen cierta relación con CSS y que pueden ser utilizados en prácticamente cualquier etiqueta HTML:

Atributo	Valor	Descripción
id	nombre	Establece un identificador único a la etiqueta HTML. Sólo el mismo nombre una vez por documento.
class	nombre	Establece una clase (género) a una etiqueta HTML. Puede repetirse por documento.
style	estilos CSS	Aplica propiedades CSS directamente al elemento HTML en cuestión.

Veamos cada uno de ellos por separado para entenderlo bien.

El atributo id (identificador)

En HTML, podemos darle un identificador a una etiqueta HTML y de esta forma darle un nombre. Simplemente, añadimos el atributo id y colocamos el nombre como valor de ese atributo.

Ese identificador único tiene unas normas:

• No debe empezar nunca por un número, pero puede contenerlos más adelante.
• El texto debe estar en kebab-case, es decir, minúsculas y separados por un guión.
• Es preferible que no contenga carácteres raros, acentuados o emojis.
• En un documento HTML no pueden existir dos elementos con el mismo id.

Veamos un ejemplo de código:

<div id="pagina">
  <div>Aquí irá un anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div>Aquí irá un anuncio</div>
</div>

El detalle principal más importante de los id, es que no pueden existir dos con el mismo nombre en un mismo documento. Ejemplos correctos de id serían:

• ✅ «pagina» (contiene el fragmento de código HTML que incluye toda el contenido de la página)
• ✅ «comentarios» (contiene toda la zona de comentarios de la página)
• ✅ «header» (contiene la parte con el logo y la cabecera de la página)

Lo importante que hay que saber de los id es que se suelen utilizar cuando queremos localizar zonas específicas que sabemos que no se van a repetir en esa misma página.

Sin embargo, mi consejo es que se utilicen clases salvo que se necesite expresamente un id, cosa que sólo suele ocurrir cuando necesitamos enlaces de tipo anclas. Más adelante, en el apartado de enlaces o hipervínculos, veremos las anclas, que sirven para acceder rápidamente a esa sección concreta de la página.

El atributo class (clases)

Las clases funcionan de una forma muy similar a los id, pero son mucho más flexibles. Utilizaremos el atributo class, donde le asignaremos el nombre de clase deseado. En primer lugar, no tienen la limitación de los id, por lo que pueden existir elementos con la misma clase en un documento. De hecho, la idea de las clases es establecer géneros o tipos de etiquetas, a los que les asociemos características comunes.

Sigamos con el ejemplo anterior:

<div id="pagina">
  <div class="anuncio">Aquí irá un anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div class="anuncio">Aquí irá un anuncio</div>
</div>

Obsérvese que, al tener la misma clase «anuncio», podemos realizar acciones para todas las etiquetas de ese tipo y no tener que hacerlo para cada una de ellas por separado. Un ejemplo clásico donde se ve bien su utilidad, es respecto a utilizar ids y clases para dar estilo CSS, donde aplicaremos unos estilos concretos a todas las etiquetas HTML con clase «anuncio».

Además, a diferencia de los id, una etiqueta puede tener múltiples clases diferentes, no necesariamente una sola. Esto nos da más flexibilidad a la hora de crear clases específicas, donde cada una se ocupa de un detalle diferente:

<div id="pagina">
  <div class="anuncio primero">Aquí irá un anuncio</div>
  <div id="articulo">Aquí irá el contenido de texto del artículo</div>
  <div class="anuncio ultimo">Aquí irá un anuncio</div>
</div>

Nótese que en la primera etiqueta del anuncio hemos aplicado las clases anuncio y primero, mientras que en el último anuncio hemos aplicado las clases anuncio y último. Esto nos permitiría asignar atributos comunes al anuncio en la clase anuncio, y atributos que sólo dependan de la posición donde esta colocado en primero y/o ultimo.

Recuerda que para indicar múltiples clases se deben separar las clases por espacio, dentro del mismo atributo class. Si se indican múltiples atributos class en la misma etiqueta, el navegador ignorará los primeros y sólo utilizará el valor del último class.

El atributo style (Estilos en línea)

El atributo style es un atributo que se utiliza en las etiquetas HTML para incrustar código CSS directamente en la propia etiqueta. Este tipo de CSS se denomina Estilos CSS en línea.

Generalmente, la mejor forma de aplicar estilos CSS es colocar el código CSS en un documento .css independiente de nuestro documento HTML. Esto garantiza que nuestro código esté bien separado y modularizado. Sin embargo, hay situaciones donde puede ser conveniente (o incluso necesario) añadir el código CSS en la propia etiqueta. En ese caso, se haría de la siguiente forma:

<p style="background: red; color: white;">Esto es un mensaje con estilos CSS</p>

Sin embargo, en la mayoría de los casos, no se recomienda añadir los estilos de esta forma, y suele ser considerado una mala práctica, ya que estás acoplando el código CSS al documento HTML, cuando deberían estar separados.

► Aprender más formas de aplicar CSS a una página

Atributos de idioma

Existen varios atributos HTML relacionados con el idioma:

Atributo	Valor	Descripción
lang	idioma	Indica el idioma del contenido de la etiqueta HTML.
translate	yes | no	Indica si el contenido de la etiqueta se debería traducir o no.
dir	ltr | rtl	Establece la direccionalidad del texto (left to right o right to left).

Vamos a analizarlos a continuación.

El atributo lang (idioma)

Mediante el atributo lang podemos indicar el idioma del contenido de la etiqueta. El valor de dicho atributo tendrá que ser el código ISO 639-1 del idioma al que queremos hacer referencia. Aunque en principio podemos hacer esto en cualquier etiqueta HTML, es obligatorio hacerlo en la etiqueta <html> que es la etiqueta que abarca todo el documento.

De esta forma, estaremos estableciendo el idioma en el que se encuentra el documento:

<!DOCTYPE html>
<html lang="es">
  ...
</html>

Más adelante, veremos para que sirve el resto de las etiquetas del documento.

El atributo translate (traducción)

En las etiquetas HTML se puede indicar el atributo translate, el cuál acepta los valores yes y no. Por defecto, aunque este atributo no sea añadido en una etiqueta, el valor por defecto que tiene es yes. Por lo tanto, todas las etiquetas están marcadas como «traducibles».

Si por ejemplo, tenemos un texto como el título de una obra, que no queremos que sea posible traducirlo, sino que queremos que conserve el texto original, podemos hacer lo siguiente:

<p>Hace algunos días fuí a ver la nueva película de <span translate="no">StarWars</span>.</p>

De esta forma, le indicamos al navegador o a herramientas como Google Translate, que esa frase específica no se debe traducir porque es el título que queremos que aparezca siempre. Recuerda que por defecto, si no se indica el atributo translate en una etiqueta, se asume que tiene el valor yes por defecto.

El atributo dir (direccionalidad)

Existe un atributo dir que permite al desarrollador indicar la direccionalidad del texto en el documento. Esto es ideal para idiomas en los que se escribe o lee de derecha a izquierda, en lugar de izquierda a derecha. El valor por defecto de este atributo es ltr (left to right, de izquierda a derecha), pero podemos modificarlo y establecer el valor rtl (right to left, de derecha a izquierda):

<p>Esto es un ejemplo de texto con direccionalidad de izquierda a derecha.</p>
<p dir="rtl">Esto es un ejemplo de texto con direccionalidad de derecha a izquierda.</p>

También es posible conseguir este efecto utilizando la propiedad CSS direction, que puede establecer su valor a ltr (por defecto) o a rtl.

Otros atributos comunes

Por último, existen algunos otros atributos HTML que pueden utilizarse en cualquier etiqueta HTML:

Atributo	Valor	Descripción
title	mensaje	Mensaje mostrado en un tooltip (aviso emergente) al mover el ratón encima.
data-*	texto	Metadatos en la propia etiqueta. Se puede usar cualquier nombre con prefijo data-.
accesskey	atajo	Combinación de teclas que puede pulsar el usuario para activar el elemento.

Veamos cada uno de ellos.

El atributo title (tooltips)

Aunque se suele hacer sobre todo en las etiquetas de imágenes <img>, en la mayoría de las etiquetas HTML podemos indicar el atributo title para especificar un mensaje de texto que aparezca cuando el usuario detenga el ratón sobre el elemento un instante. Al usuario le aparece un pequeño aviso emergente, generalmente con fondo amarillo y letras negras, que muestra el texto en cuestión:

<div>
  <img src="Gandalf.jpg"
       alt="Gandalf el gris, utilizando un portátil para consultar su correo."
       title="¡Este es Gandalf el gris!" />
</div>

Es importante no confundir el atributo title con el atributo alt de las imágenes. Generalmente se confunden porque pueden tener objetivos parecidos, pero no tienen porque ser idénticos.

• El atributo alt debe ser un texto alternativo que describa la imagen (en el caso de que no se pueda ver visualmente)
• El atributo title puede describir la imagen, pero no tiene porque ser una descripción alternativa.

De la misma forma, podemos utilizar el atributo title para otros elementos, como por ejemplo, etiquetas <a> (enlaces) u otras. Sin embargo, el usuario normalmente no se esperará que existe un tooltip en cualquier elemento, así que quizás convendría hacérselo saber de forma explícita.

El atributo data- (metadatos)

En un documento HTML, la mayoría de los metadatos (información adicional) se incluyen en el interior de la etiqueta <head> del documento HTML. Sin embargo, también se pueden incluir metadatos en una etiqueta HTML a través de un atributo que comienza con el prefijo data-.

De esta forma, podemos inventarnos cualquier atributo que contenga información, habitualmente orientada a utilizarse desde Javascript o CSS:

<div id="social-networks">
  <a href="https://twitter.com/Manz" data-subs="44000">Twitter</a>
  <a href="https://youtube.com/@ManzDev" data-subs="10000">Youtube</a>
  <a href="https://twitch.tv/ManzDev" data-subs="13000">Twitch</a>
</div>

En este ejemplo, guardamos en el atributo data-subs el número de suscriptores que tiene el usuario en la red mencionada. Posteriormente, podremos acceder a esa información desde CSS o desde Javascript y utilizarla.

Desde Javascript, si queremos hacer referencia a estos elementos, podemos hacerlo de varias formas:

const links = document.querySelectorAll("#social-networks a");

links[0].dataset.subs;              // 44000
links[1].getAttribute("data-subs"); // 10000

En la primera, accedemos a la propiedad .dataset donde tendremos una lista de propiedades dependiendo de los diferentes atributos con prefijo data- que tenga el elemento. Por otro lado, podemos también utilizar el método .getAttribute() del DOM.

El atributo accesskey (atajo)

En HTML es posible añadir el atributo accesskey para indicar un atajo de teclado que puede pulsar el usuario para activar ese elemento. Observa el siguiente ejemplo, donde tenemos 4 elementos:

• 2 campos de texto <input>
• 1 enlace <a>
• 1 botón <button>

Cada uno de ellos tiene su correspondiente atributo accesskey. Si el usuario pulsa la combinación de teclas ALT+tecla (donde tecla es la tecla indicada en el valor del atributo), se activará ese elemento:

<form>
  <input accesskey="N" placeholder="Nombre (ALT+N)" />          <!-- Campo de datos -->
  <input accesskey="A" placeholder="Apellidos (ALT+A)" />       <!-- Campo de datos -->
  <a accesskey="L" href="https://manz.dev/">Enlace (ALT+L)</a>  <!-- Enlace HTML -->
  <button accesskey="B">Botón (ALT+B)</button>                  <!-- Botón HTML -->
</form>

De esta forma, si pulsamos ALT+N, se colocará el foco en el primer campo de texto, si pulsamos ALT+L será como si hubieramos pulsado el enlace con el ratón y si pulsamos ALT+B se pulsará el botón.

Sin embargo, una de las desventajas de este sistema, es que no está estandarizada la forma de acceder entre navegadores y sistemas operativos, lo que lo hacen un sistema poco intuitivo. Por ejemplo, si establecemos un atajo con la tecla A, es decir, con el atributo accesskey="A", tendríamos que pulsar la siguiente combinación de teclas dependiendo de nuestro sistema operativo:

Navegador	Windows	GNU/Linux	Mac
Chrome	ALT+A	ALT+A	CTRL+ALT+A
Firefox	ALT+SHIFT+A	ALT+SHIFT+A	CTRL+A
Edge	ALT+A	ALT+A	CTRL+ALT+A
Safari	No aplicable	No aplicable	CTRL+ALT+A
Opera	ALT+A	ALT+A	CTRL+ALT+A

Esto hace que la combinación de teclas para un usuario poco familiarizado con este proceso, además de la incertidumbre de no saber que navegador va a utilizar, hagan que este proceso sea poco práctico.