[5+1] Etiquetas HTML Esenciales que Deberías Empezar a Usar

Vamos a explorar 6 etiquetas HTML esenciales que probablemente no estés utilizando, pero que definitivamente deberías considerar para tus proyectos. Estas etiquetas pueden hacer tus sitios más eficientes, accesibles y estéticamente agradables.

1. <picture>

La etiqueta <picture> ofrece una flexibilidad increíble para los diseños responsivos. A diferencia de <img>, <picture> te permite definir múltiples fuentes de imágenes para diferentes resoluciones. Esto significa que el navegador solo carga la imagen adecuada para la resolución de pantalla actual, no una versión redimensionada que podría perder calidad o aumentar los tiempos de carga.

Ejemplo de Uso:

<picture>
  <source srcset="example.webp" type="image/webp">
  <source srcset="example.jpg" type="image/jpeg">
  <img src="default.jpg" alt="Una descripción accesible">
</picture>

2. <datalist>

La etiqueta <datalist> define un conjunto de opciones predefinidas para los elementos <input>. Es perfecta para funcionalidades de autocompletar, permitiendo a los usuarios elegir de una lista sugerida o introducir su propio texto.

Ejemplo de Uso:

<label for="browser">Elige un navegador:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

3. <dl>, <dt>, y <dd>

Este grupo de etiquetas es ideal para crear listas de definiciones. <dl> es el contenedor, <dt> se utiliza para el término que se define, y <dd> proporciona la definición.

Ejemplo de Uso:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado utilizado para crear estructuras en la web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de diseño gráfico para describir la presentación de documentos HTML.</dd>
</dl>

4. <figure> y <figcaption>

<figure> se utiliza para marcar contenido autocontenido, frecuentemente acompañado de una imagen o ilustración. <figcaption> proporciona un texto explicativo para la figura, que es útil tanto para SEO como para accesibilidad.

Ejemplo de Uso:

<figure>
  <img src="path/to/image.jpg" alt="Descripción de la imagen">
  <figcaption>Descripción de la imagen o ilustración.</figcaption>
</figure>

5. <code>

Para los desarrolladores que documentan código o escriben tutoriales, <code> es indispensable. Esta etiqueta ayuda a formatear y destacar segmentos de código dentro de un texto.

Ejemplo de Uso:

<code>
  console.log('¡Hola, mundo!');
</code>

6. <time>

La etiqueta <time> es útil para definir fechas o tiempos específicos en tu contenido. Esto no solo ayuda a los motores de búsqueda a entender el contexto temporal del contenido, sino que también facilita la interacción del usuario con fechas y horarios relevantes.

Ejemplo de Uso:

<p>La próxima reunión es <time datetime="2022-09-14">14 de septiembre</time>.</p>

Conclusión

Estas seis etiquetas HTML no son solo herramientas para mejorar la estructura y el diseño de tus páginas, sino también aliadas en la optimización SEO y la accesibilidad. Si aún no las estás utilizando, te animo a explorar su potencial y a incorporarlas en tus futuros proyectos.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!