Quiz: ¿El HTML sigue en tu currículum?

La etiqueta <ul> crea una lista desordenada, con elementos normalmente marcados con viñetas.

El elemento <dd> define una descripción, definición o valor en una lista de descripción, usado dentro de etiquetas <dl> para emparejarse con <dt> (Description Term).

Esto es útil al mostrar datos de pares clave‑valor. La información de perfil, configuraciones y estadísticas son ejemplos comunes.

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

La etiqueta <figure> se usa típicamente para envolver contenido autocontenido (media), como una imagen o un gráfico, junto con <figcaption> para proporcionar una leyenda.

Esto es útil para imágenes, diagramas, fragmentos de código y más.

<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

El <article> elemento se usa para definir un bloque de contenido independiente que puede distribuirse o reutilizarse de forma autónoma.

Se suele usar para entradas de blog, artículos de noticias, publicaciones en foros o comentarios de usuarios.

Puedes usar varios <article> en una página (por ejemplo, en páginas con desplazamiento infinito). O bien, puedes anidarlos entre sí para crear una jerarquía de “contenido independiente”.

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

<fieldset> se usa para agrupar controles de formulario relacionados, y <legend> proporciona un título/etiqueta para el grupo, mejorando la accesibilidad.

Esto es útil para agrupar elementos de formulario relacionados, como una sección para la dirección de envío o los detalles de pago.

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

El elemento <meter> se usa para representar una medida escalar (única) dentro de un rango definido, como temperatura, uso de disco o el recuento de votos.

Puede parecer similar a una barra <progress>, sin embargo las barras de progreso SIEMPRE comienzan en cero. Por lo tanto los elementos <progress> muestran un porcentaje de finalización, mientras que un <meter> muestra cualquier valor dentro de un rango definible.

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

El elemento <source> se usa para especificar los formatos de medios disponibles.

Se usa específicamente con <video>, <audio> y <picture>, permitiendo que el navegador elija el formato más adecuado.

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

El elemento <hgroup> agrupa un encabezado con contenido secundario relacionado, usualmente uno o más elementos <p>.

Puede ser útil cuando un encabezado tiene un subtítulo, eslogan o título alternativo que no debería convertirse en otro encabezado en el esquema del documento.

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

El <menu> representa una lista de comandos o controles interactivos.

Si tu lista son enlaces de navegación, usa <nav> con un <ul>. Usa <menu> para controles tipo barra de herramientas o listas de comandos.

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details> permite contenido colapsable, y <summary> especifica un título visible para el contenido.

Esto es útil para preguntas frecuentes, secciones colapsables o cualquier contenido que pueda alternarse.

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

El elemento <dialog> se usa para ventanas emergentes o modales, y proporciona marcado semántico, CSS ampliado y una API nativa para estas interacciones.

Usa JavaScript para abrirlo con .showModal() para diálogos modales o .show() para diálogos no modales, y ciérralo con .close() o mediante el envío de un formulario usando method="dialog".

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

El elemento <time> se usa para fechas, horas o duraciones. Puede incluir contenido legible por humanos y un atributo datetime legible por máquinas. HTML no tiene un elemento <date>.

Los atributos ARIA (Accessible Rich Internet Applications) mejoran la accesibilidad web al proporcionar contexto adicional para lectores de pantalla y otras tecnologías de asistencia.

Existen roles, estados y propiedades que pueden usarse para describir elementos.

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

El atributo role describe

el propósito de un elemento a las tecnologías de asistencia, ayudando a mejorar la accesibilidad.