Todas las etiquetas HTML

La guía completa: cada etiqueta explicada con ejemplos prácticos.

En los capítulos anteriores aprendiste las etiquetas de estructura (<header>, <nav>, <main>, etc.) y los formularios y tablas. Pero HTML tiene muchas más etiquetas. Este capítulo es tu guía de referencia: todas las etiquetas que necesitarás en tus proyectos, organizadas por categoría, con ejemplos reales para cada una.

Guarda esta página en favoritos. La vas a consultar mucho.

1. Etiquetas de texto

El texto es el ingrediente principal de cualquier página web. HTML tiene etiquetas específicas para cada tipo de texto: títulos, párrafos, palabras importantes, citas, código… Vamos a verlas todas.

Títulos: `<h1>` hasta `<h6>`

Ya los viste en el capítulo 1, pero hagamos un repaso rápido. Los títulos crean una jerarquía, como los capítulos de un libro:

<h1>Título principal de la página (solo uno por página)</h1>
<h2>Sección principal</h2>
<h3>Subsección</h3>
<h4>Sub-subsección</h4>
<h5>Casi nunca se usa</h5>
<h6>Rarísima vez se usa</h6>

Párrafos: `<p>`

El párrafo es el bloque de texto más básico. Cada vez que empiezas una idea nueva, abre un párrafo nuevo.

<p>Los gatos son animales independientes. Les gusta dormir mucho y explorar su territorio.</p>
<p>A diferencia de los perros, los gatos no necesitan que los saquen a pasear.</p>

El navegador añade un espacio automático entre párrafos. No necesitas poner líneas en blanco ni usar <br> para separar párrafos: eso es justo lo que <p> ya hace.

Contenedor en línea: `<span>`

Imagina que tienes un párrafo y quieres cambiar el color de solo una palabra con CSS, sin crear un bloque nuevo. Para eso existe <span>: un contenedor invisible que no rompe el flujo del texto.

<p>El precio es <span style="color: red;">muy alto</span> en comparación con otras tiendas.</p>

<span> no hace nada visualmente por sí solo. Su poder está en que puedes ponerle una clase CSS o un estilo para afectar solo esa parte del texto. Es el equivalente “en línea” de <div>.

Importancia y énfasis: `<strong>`, `<b>`, `<em>`, `<i>`

Aquí hay una distinción importante que mucha gente confunde.

<strong> — Importancia semántica (se lee en negrita)

Úsalo cuando el contenido es genuinamente importante, urgente o crítico. Los lectores de pantalla le dan énfasis especial a este texto.

<p><strong>Advertencia:</strong> No toques el cable rojo bajo ninguna circunstancia.</p>

<b> — Negrita visual sin significado especial

Úsalo cuando quieres negrita por razones de estilo, no porque el contenido sea más importante. Por ejemplo, palabras clave en un resumen.

<p>Para hacer la tortilla necesitas <b>huevos</b>, <b>patatas</b> y <b>aceite</b>.</p>

<em> — Énfasis semántico (se lee en cursiva)

Úsalo cuando cambiaría el significado de la frase si lo leyeras en voz alta con énfasis. Como cuando alguien dice “¡pero YO no fui!”

<p>Ella dijo que <em>ella</em> pagaría la cena, no tú.</p>

<i> — Cursiva visual sin significado especial

Úsalo para términos técnicos, palabras en otro idioma, pensamientos de personajes o nombres de obras.

<p>El término <i>mise en place</i> viene del francés y significa "todo en su lugar".</p>

strong vs b, em vs i

La diferencia está en el significado. <strong> y <em> le dicen al navegador y a los lectores de pantalla que ese texto tiene un significado especial. <b> e <i> solo cambian la apariencia visual. Siempre pregúntate: ¿este texto es más importante que el resto, o simplemente quiero que se vea diferente?

Texto resaltado: `<mark>`

Como un marcador fluorescente. Resalta texto que es relevante en un contexto específico, como los resultados de una búsqueda.

<p>Buscaste "gatos": encontramos 3 artículos sobre <mark>gatos</mark> en nuestra biblioteca.</p>

Letra pequeña: `<small>`

Para el texto de letra pequeña: avisos legales, notas al pie, derechos de autor, términos y condiciones.

<p>Compra ahora y ahorra un 50%.</p>
<small>*Oferta válida hasta agotar existencias. No acumulable con otras promociones.</small>

Texto tachado e insertado: `<del>` e `<ins>`

Perfectos para mostrar que algo fue eliminado y reemplazado. Imagina un precio con descuento o un documento con correcciones.

<p>Precio: <del>59,99 €</del> <ins>29,99 €</ins></p>

<del> muestra el texto tachado (como si lo hubieras borrado con un lápiz). <ins> muestra el texto subrayado (como una corrección añadida). Son especialmente útiles en documentos donde quieres ver el historial de cambios.

Subíndice y superíndice: `<sub>` y `<sup>`

Para fórmulas químicas, matemáticas o notas al pie numeradas.

<!-- Fórmula química: H₂O -->
<p>El agua es H<sub>2</sub>O y el dióxido de carbono es CO<sub>2</sub>.</p>

<!-- Potencia matemática: x² -->
<p>El área de un cuadrado de lado x es x<sup>2</sup>.</p>

<!-- Nota al pie -->
<p>Este estudio fue publicado en 2023<sup>1</sup>.</p>

<sub> baja el texto (subíndice). <sup> lo sube (superíndice).

Abreviaciones: `<abbr>`

Para abreviaciones y acrónimos. Al pasar el ratón por encima, aparece un tooltip con el texto completo. Muy útil para la accesibilidad.

<p>Trabajo en una empresa de <abbr title="Inteligencia Artificial">IA</abbr> en Madrid.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> es el lenguaje de las páginas web.</p>

Código en línea: `<code>`

Para mostrar fragmentos de código dentro de un párrafo de texto. El navegador lo muestra con una fuente monoespaciada (como Courier).

<p>Para crear un párrafo, usa la etiqueta <code>&lt;p&gt;</code> de HTML.</p>
<p>En Python, para imprimir algo usas <code>print("Hola mundo")</code>.</p>

Pro tip

Cuando escribas el símbolo < dentro de código HTML, escribe < (less than). Y > se escribe > (greater than). Si no, el navegador pensará que es una etiqueta HTML real y se confundirá.

Texto preformateado: `<pre>`

<pre> significa “preformateado”. Respeta exactamente los espacios y saltos de línea que tú escribas en el código. Perfecto para bloques de código, arte ASCII o cualquier texto donde la indentación importa.

<pre>
  function saludar(nombre) {
    console.log("Hola, " + nombre);
  }

  saludar("María");
</pre>

Normalmente <pre> y <code> van juntos:

<pre><code>
  function saludar(nombre) {
    console.log("Hola, " + nombre);
  }
</code></pre>

Entrada de teclado: `<kbd>`

Para representar teclas del teclado o comandos que el usuario debe pulsar. Muy usado en tutoriales y documentación.

<p>Para guardar el archivo, pulsa <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Para abrir el terminal, pulsa <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>.</p>

Citas: `<blockquote>` y `<cite>`

Ya los viste brevemente en el capítulo 1, pero aquí los tienes completos.

<blockquote> es para citas largas de otra fuente. <cite> es para el nombre de la fuente (libro, película, autor).

<blockquote cite="https://es.wikipedia.org/wiki/Marie_Curie">
  <p>"No hay nada que temer en la vida, solo hay que entenderlo."</p>
  <footer>— <cite>Marie Curie</cite></footer>
</blockquote>

Para citas cortas dentro de un párrafo, usa <q> (el navegador añade las comillas automáticamente):

<p>Einstein dijo: <q>La imaginación es más importante que el conocimiento.</q></p>

Salto de línea: `<br>`

Crea un salto de línea dentro de un bloque de texto. No crea un nuevo párrafo, simplemente baja a la línea siguiente.

<p>
  Calle Mayor, 42<br>
  28013 Madrid<br>
  España
</p>

Separador temático: `<hr>`

Crea una línea horizontal que separa secciones de contenido. No es una línea decorativa: significa que el tema cambia.

<p>Esto habla sobre los gatos.</p>

<hr>

<p>Ahora hablamos de algo completamente diferente: los perros.</p>

Oportunidad de corte de palabra: `<wbr>`

Imagina una URL muy larga que desborda su contenedor. <wbr> (Word Break Opportunity) le dice al navegador: “si necesitas romper esta palabra para que quepa, puedes hacerlo aquí”.

<p>
  Visita: https://www.ejemplo.com<wbr>/una-ruta-muy-larga<wbr>/con-muchos-segmentos<wbr>/que-podria-desbordar-el-contenedor
</p>

2. Etiquetas de listas

Las listas son fundamentales en HTML. No solo para puntos con viñetas: los menús de navegación del capítulo 1 también son listas. Hay tres tipos.

Lista sin orden: `<ul>` con `<li>`

Para elementos donde el orden no importa. Las viñetas son la representación visual clásica.

<ul>
  <li>Manzanas</li>
  <li>Plátanos</li>
  <li>Naranjas</li>
  <li>Fresas</li>
</ul>

<ul> es el contenedor (unordered list). <li> es cada elemento de la lista (list item).

Lista ordenada: `<ol>` con `<li>`

Para elementos donde el orden sí importa: recetas, instrucciones, rankings.

<ol>
  <li>Hierve el agua.</li>
  <li>Añade la pasta.</li>
  <li>Espera 8 minutos.</li>
  <li>Escurre y sirve.</li>
</ol>

<ol> tiene atributos especiales muy útiles:

<!-- Empezar desde un número específico -->
<ol start="5">
  <li>Quinto elemento</li>
  <li>Sexto elemento</li>
</ol>

<!-- Lista en orden inverso -->
<ol reversed>
  <li>Tercer lugar: Ana</li>
  <li>Segundo lugar: Carlos</li>
  <li>Primer lugar: María</li>
</ol>

<!-- Cambiar el tipo de numeración -->
<ol type="A">   <!-- A, B, C... -->
  <li>Primera opción</li>
  <li>Segunda opción</li>
</ol>

<ol type="i">   <!-- i, ii, iii... (números romanos en minúscula) -->
  <li>Capítulo uno</li>
  <li>Capítulo dos</li>
</ol>

Lista de descripción: `<dl>`, `<dt>`, `<dd>`

Esta es la más desconocida de las tres, pero muy útil para glosarios, preguntas frecuentes o cualquier par “término: definición”.

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para estructurar páginas web.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje para dar estilos visuales al HTML.</dd>

  <dt>JavaScript</dt>
  <dd>Lenguaje de programación que añade interactividad a las páginas web.</dd>
</dl>

<dl> — Description List (contenedor)
<dt> — Description Term (el término o pregunta)
<dd> — Description Definition (la definición o respuesta)

Un <dt> puede tener varios <dd>, perfecto para FAQs donde una pregunta tiene varias respuestas posibles.

Listas anidadas

Puedes poner listas dentro de listas para crear jerarquías. El truco es que la lista anidada va dentro del <li> correspondiente.

<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Pera</li>
      <li>Naranja</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Zanahoria</li>
      <li>Brócoli</li>
    </ul>
  </li>
</ul>

Pro tip

Puedes mezclar <ul> y <ol> al anidar. Por ejemplo, una lista ordenada de pasos donde cada paso tiene subelementos sin orden.

3. Etiquetas de enlaces y navegación

Los enlaces son lo que convierte una colección de páginas en la Web. Ya conoces <a> del libro anterior, pero ahora vamos a explorar todo lo que puede hacer.

El enlace `<a>`: mucho más que un link

<!-- Enlace básico -->
<a href="https://www.google.com">Ir a Google</a>

Abrir en una pestaña nueva: target="_blank"

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  Abrir Google en nueva pestaña
</a>

Descargar un archivo: download

<a href="/archivos/manual.pdf" download>Descargar manual en PDF</a>

<!-- Puedes especificar el nombre del archivo descargado -->
<a href="/archivos/manual-v2.pdf" download="manual-usuario.pdf">Descargar manual</a>

Enlace de email: mailto:

<a href="mailto:hola@ejemplo.com">Envíanos un email</a>

<!-- Con asunto y cuerpo predefinidos -->
<a href="mailto:hola@ejemplo.com?subject=Consulta&body=Hola, me gustaría...">
  Contactar con asunto
</a>

Enlace de teléfono: tel:

<a href="tel:+34600000000">Llámanos: 600 000 000</a>

En móviles, este enlace abre la app de teléfono directamente.

Enlace de anclaje: #

Para saltar a otra sección de la misma página. El # va seguido del id del elemento destino.

<!-- En la navegación -->
<nav>
  <a href="#sobre-mi">Sobre mí</a>
  <a href="#proyectos">Proyectos</a>
  <a href="#contacto">Contacto</a>
</nav>

<!-- En el contenido (los destinos) -->
<section id="sobre-mi">
  <h2>Sobre mí</h2>
  ...
</section>

<section id="proyectos">
  <h2>Mis proyectos</h2>
  ...
</section>

URLs absolutas vs relativas

Esta es una de las confusiones más comunes al principio.

URL absoluta
URL relativa

Incluye la dirección completa desde el inicio. Úsala para enlazar a páginas de otros sitios web.

<a href="https://www.wikipedia.org/wiki/HTML">Ver Wikipedia</a>

Parte desde la ubicación del archivo actual. Úsala para navegar entre páginas de tu propio sitio.

<!-- Si estás en /paginas/blog.html y quieres ir a /paginas/contacto.html -->
<a href="contacto.html">Contacto</a>

<!-- Si quieres subir un nivel (ir a la carpeta padre) -->
<a href="../index.html">Inicio</a>

<!-- Desde la raíz del sitio (con /) -->
<a href="/contacto.html">Contacto</a>

Pro tip

En proyectos grandes, usa siempre URLs relativas desde la raíz (empezando con /). Son más predecibles que las relativas desde el archivo actual y no se rompen si mueves archivos.

4. Etiquetas de multimedia

HTML no es solo texto. Puedes incluir imágenes, vídeos, audios y contenido de otras páginas.

Imágenes: `<img>`

<img src="foto-gato.jpg" alt="Un gato naranja durmiendo en un sofá" width="400" height="300">

Los atributos:

src — La ruta de la imagen (Source). Puede ser relativa o absoluta.
alt — Texto alternativo. Aparece si la imagen no carga y lo leen los lectores de pantalla. Siempre ponlo.
width y height — El tamaño en píxeles. Ponlos aunque vayas a cambiarlos con CSS: el navegador reserva el espacio antes de cargar la imagen y evita que el contenido “salte”.
loading="lazy" — Carga la imagen solo cuando el usuario está cerca de verla. Mejora la velocidad de carga.

<!-- Imagen con carga diferida -->
<img
  src="foto-montaña.jpg"
  alt="Vista panorámica de los Pirineos al atardecer"
  width="800"
  height="600"
  loading="lazy"
>

Imagen con pie de foto: `<figure>` y `<figcaption>`

Cuando una imagen necesita una descripción o crédito, envuélvela en <figure> y añade <figcaption>.

<figure>
  <img
    src="torre-eiffel.jpg"
    alt="La Torre Eiffel iluminada de noche con el río Sena al fondo"
    width="600"
    height="400"
  >
  <figcaption>La Torre Eiffel, París. Foto: María García, 2023.</figcaption>
</figure>

<figure> no tiene que ser solo una imagen. Puede contener un bloque de código, un gráfico, una cita o cualquier contenido que tenga su propio pie de referencia.

Vídeo: `<video>`

<video controls width="640" height="360">
  <source src="mi-video.mp4" type="video/mp4">
  <source src="mi-video.webm" type="video/webm">
  <p>Tu navegador no soporta vídeos HTML5. <a href="mi-video.mp4">Descarga el vídeo</a>.</p>
</video>

Los atributos principales:

controls — Muestra los controles de reproducción (play, pausa, volumen, barra de progreso).
autoplay — Reproduce automáticamente al cargar (evítalo si puedes, es molesto).
muted — Sin sonido. Si usas autoplay, el navegador requiere también muted.
loop — Repite el vídeo cuando termina.
poster — Imagen que se muestra antes de que el vídeo empiece a reproducirse.

<video controls poster="miniatura.jpg" width="640" height="360">
  <source src="presentacion.mp4" type="video/mp4">
</video>

Audio: `<audio>`

Funciona igual que <video>, pero sin dimensiones visuales.

<audio controls>
  <source src="podcast-episodio-1.mp3" type="audio/mpeg">
  <source src="podcast-episodio-1.ogg" type="audio/ogg">
  <p>Tu navegador no soporta audio HTML5.</p>
</audio>

Múltiples formatos: `<source>`

Dentro de <video> y <audio>, <source> te permite ofrecer el mismo archivo en varios formatos. El navegador elige el primero que puede reproducir. Esto es importante porque no todos los navegadores soportan todos los formatos.

<video controls>
  <source src="video.webm" type="video/webm">  <!-- Chrome, Firefox -->
  <source src="video.mp4" type="video/mp4">    <!-- Todos -->
</video>

Imágenes responsivas: `<picture>`

<picture> te permite servir imágenes diferentes según el tamaño de la pantalla o la resolución del dispositivo. Ideal para no cargar imágenes enormes en móviles.

<picture>
  <!-- Para pantallas grandes: imagen horizontal -->
  <source media="(min-width: 800px)" srcset="banner-escritorio.jpg">
  <!-- Para pantallas medianas: imagen cuadrada -->
  <source media="(min-width: 480px)" srcset="banner-tablet.jpg">
  <!-- Imagen por defecto (móvil o si no se cumplen las condiciones) -->
  <img src="banner-movil.jpg" alt="Banner de bienvenida a RutaDev">
</picture>

Contenido externo: `<iframe>`

<iframe> (inline frame) incrusta una página web completa dentro de la tuya. La aplicación más común es incrustar vídeos de YouTube o mapas de Google Maps.

<!-- Vídeo de YouTube (copia el código de "Compartir > Insertar") -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Vídeo de YouTube"
  frameborder="0"
  allowfullscreen
></iframe>

<!-- Mapa de Google Maps -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  title="Mapa de ubicación"
></iframe>

Canvas y SVG: mención breve

<canvas> — Un lienzo en blanco donde puedes dibujar gráficos, animaciones y juegos usando JavaScript. Por sí solo no hace nada; necesita código JS.

<canvas id="mi-lienzo" width="400" height="200"></canvas>

<svg> — Para gráficos vectoriales directamente en HTML. Los SVG no pierden calidad al escalar (perfectos para logos e iconos).

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Estos dos los explorarás más adelante cuando llegues a JavaScript y diseño avanzado.

5. Etiquetas de la cabecera (`<head>`)

El <head> es la sección de tu página que el usuario no ve, pero que es crucial. Contiene información sobre la página: su título, su idioma, los archivos CSS y JavaScript que necesita, y metadatos para buscadores y redes sociales.

<!DOCTYPE html>
<html lang="es">
<head>

  <!-- Codificación de caracteres: siempre la primera línea del head -->
  <meta charset="UTF-8">

  <!-- Diseño responsive: siempre en el head -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Título de la pestaña del navegador -->
  <title>Mi tienda online - Zapatos y ropa</title>

  <!-- Descripción para buscadores (SEO) -->
  <meta name="description" content="Encuentra los mejores zapatos y ropa de temporada. Envío gratis en pedidos mayores de 50€.">

  <!-- Favicon (el icono de la pestaña) -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Archivo CSS externo -->
  <link rel="stylesheet" href="/estilos/main.css">

  <!-- CSS interno (para estilos pequeños, mejor en archivo externo) -->
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>

  <!-- JavaScript (generalmente al final del body, pero puede ir aquí) -->
  <script src="/js/app.js" defer></script>

</head>

Open Graph: cómo se ve tu página en redes sociales

Cuando alguien comparte un enlace en WhatsApp, Twitter o LinkedIn, aparece una tarjeta con imagen, título y descripción. Eso se controla con las etiquetas Open Graph.

<head>
  <!-- Open Graph para redes sociales -->
  <meta property="og:title" content="Mi tienda online - Zapatos y ropa">
  <meta property="og:description" content="Encuentra los mejores zapatos de temporada.">
  <meta property="og:image" content="https://mitienda.com/imagen-compartir.jpg">
  <meta property="og:url" content="https://mitienda.com">
  <meta property="og:type" content="website">

  <!-- Específico para Twitter/X -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Mi tienda online">
  <meta name="twitter:image" content="https://mitienda.com/imagen-compartir.jpg">
</head>

`<base>`: la URL base de todos los enlaces

Define la URL base para todos los enlaces relativos de la página. Útil en casos específicos.

<head>
  <base href="https://mitienda.com/">
</head>
<body>
  <!-- Este enlace apuntará a https://mitienda.com/productos -->
  <a href="productos">Ver productos</a>
</body>

`<noscript>`: cuando JavaScript no está disponible

Contenido alternativo para navegadores con JavaScript desactivado.

<noscript>
  <p>Esta página necesita JavaScript para funcionar correctamente. Por favor, actívalo en tu navegador.</p>
</noscript>

El orden importa en el head

Sigue siempre este orden en tu <head>: primero <meta charset>, luego <meta viewport>, luego <title>, luego el resto de metas, luego los CSS. El charset debe ser lo primero para que el navegador sepa cómo interpretar el resto del documento desde el inicio.

6. Etiquetas interactivas

HTML tiene elementos que ofrecen interactividad sin necesitar JavaScript. Son subestimados pero muy poderosos.

Acordeón nativo: `<details>` y `<summary>`

Un elemento expandible y colapsable sin una sola línea de JavaScript. Perfecto para FAQs, preguntas frecuentes o secciones opcionales.

<details>
  <summary>¿Cuánto tarda el envío?</summary>
  <p>
    Los pedidos nacionales llegan en 2-3 días laborables.
    Los pedidos internacionales pueden tardar entre 7 y 15 días.
  </p>
</details>

<details>
  <summary>¿Puedo devolver mi compra?</summary>
  <p>
    Sí. Tienes 30 días desde la recepción del pedido para devolverlo
    sin ningún coste adicional.
  </p>
</details>

El <summary> es el encabezado que siempre se ve y que el usuario puede clicar. El resto del contenido dentro de <details> aparece o desaparece. El atributo open lo muestra expandido por defecto:

<details open>
  <summary>Esta sección empieza expandida</summary>
  <p>Este contenido es visible desde el principio.</p>
</details>

Modal nativo: `<dialog>`

Un diálogo o popup nativo de HTML. Antes de este elemento, los desarrolladores tenían que construir modales con mucho JavaScript. Ahora, el navegador lo gestiona.

<dialog id="mi-modal">
  <h2>¿Estás seguro?</h2>
  <p>Esta acción no se puede deshacer.</p>
  <button onclick="document.getElementById('mi-modal').close()">Cancelar</button>
  <button>Confirmar</button>
</dialog>

<!-- Botón para abrir el modal -->
<button onclick="document.getElementById('mi-modal').showModal()">
  Eliminar cuenta
</button>

Pro tip

<dialog> tiene dos modos: show() lo muestra como elemento normal en la página, y showModal() lo muestra como un modal verdadero (bloquea el resto de la página y añade un overlay). En la mayoría de casos querrás showModal().

Barra de progreso: `<progress>`

Para mostrar el progreso de una tarea: carga de archivo, pasos de un formulario, nivel completado.

<!-- Progreso determinado (sabes cuánto falta) -->
<label for="carga">Subiendo archivo:</label>
<progress id="carga" value="65" max="100">65%</progress>

<!-- Progreso indeterminado (no sabes cuánto falta) -->
<progress>Cargando...</progress>

Medidor de valor: `<meter>`

Para representar un valor dentro de un rango conocido. No es para progreso (usa <progress> para eso), sino para mediciones: nivel de batería, espacio en disco, puntuación.

<p>Espacio en disco:</p>
<meter value="70" min="0" max="100" low="20" high="80" optimum="50">70%</meter>

<p>Nivel de batería:</p>
<meter value="0.3" min="0" max="1">30%</meter>

Los atributos low, high y optimum cambian el color del medidor automáticamente para indicar si el valor es bueno, normal o preocupante.

Resultado de cálculo: `<output>`

Para mostrar el resultado de un cálculo en un formulario. Semánticamente indica que es el resultado de una operación, no un dato que el usuario introduce.

<form oninput="resultado.value = parseInt(a.value) + parseInt(b.value)">
  <label for="a">Primer número:</label>
  <input type="number" id="a" name="a" value="0">

  <label for="b">Segundo número:</label>
  <input type="number" id="b" name="b" value="0">

  <p>Resultado: <output name="resultado">0</output></p>
</form>

7. Etiquetas de agrupación

Ya conoces <div> del capítulo 1, pero veamos cuándo usarlo correctamente.

`<div>`: el contenedor genérico de bloque

<div> no tiene ningún significado semántico. Es simplemente una caja que agrupa elementos. Lo usas cuando necesitas un contenedor para aplicar CSS o JavaScript, pero ninguna etiqueta semántica describe bien lo que contiene.

<!-- Correcto: div como contenedor para CSS -->
<div class="tarjeta-producto">
  <img src="zapato.jpg" alt="Zapato deportivo azul">
  <h3>Zapato Running Pro</h3>
  <p>El mejor compañero para tus carreras.</p>
  <p class="precio">89,99 €</p>
  <button>Añadir al carrito</button>
</div>

`<span>`: el contenedor genérico en línea

<span> es el <div> pero para contenido en línea (dentro de párrafos o textos). Lo usas para aplicar estilos a una parte del texto sin crear un bloque nuevo.

<p>
  Tu carrito tiene <span class="badge">3 artículos</span> por un total de
  <span class="precio-total">269,97 €</span>.
</p>

¿div o etiqueta semántica?

Antes de usar <div>, hazte esta pregunta: ¿existe una etiqueta HTML que describa mejor lo que contiene este bloque?

¿Es la cabecera del sitio? → <header>
¿Es navegación? → <nav>
¿Es el contenido principal? → <main>
¿Es un artículo completo e independiente? → <article>
¿Es una sección con su propio título? → <section>
¿Es información secundaria o relacionada? → <aside>
¿Es el pie de página? → <footer>

Si la respuesta es “no, ninguna de esas”, entonces usa <div>. Los <div> son para cuando necesitas un contenedor pero la semántica no importa, como un wrapper para CSS o una agrupación visual sin significado especial.

8. Etiquetas menos comunes pero útiles

Estas etiquetas no las usarás todos los días, pero es bueno saber que existen.

`<template>`: plantillas para JavaScript

Define contenido HTML que no se renderiza al cargar la página. Lo usas con JavaScript para clonar y mostrar el contenido dinámicamente. Muy usado en aplicaciones web interactivas.

<template id="plantilla-tarjeta">
  <div class="tarjeta">
    <h3 class="titulo"></h3>
    <p class="descripcion"></p>
  </div>
</template>

`<data>`: valor legible por máquinas

Asocia un valor legible por máquinas con el contenido visible. Útil para datos que el usuario ve en un formato y que el código necesita en otro.

<ul>
  <li><data value="21053">Camiseta Roja - Talla M</data></li>
  <li><data value="21054">Camiseta Roja - Talla L</data></li>
</ul>

`<time>`: fechas y horas semánticas

Ya lo viste en el capítulo 1, pero aquí está completo. Permite que el navegador y los buscadores entiendan las fechas con precisión.

<p>Publicado el <time datetime="2024-03-15">15 de marzo de 2024</time>.</p>
<p>El evento empieza a las <time datetime="20:00">8 de la tarde</time>.</p>
<p>Duración: <time datetime="PT2H30M">2 horas y media</time>.</p>

`<address>`: información de contacto

Para datos de contacto del autor o propietario del contenido. Normalmente va en el <footer>.

<footer>
  <address>
    Para consultas, escríbenos a
    <a href="mailto:hola@rutadev.com">hola@rutadev.com</a>
    o llámanos al <a href="tel:+34600000000">600 000 000</a>.
    <br>
    Calle Mayor, 42 — Madrid, España
  </address>
</footer>

`<ruby>`, `<rt>`, `<rp>`: anotaciones fonéticas

Para mostrar la pronunciación de caracteres en idiomas asiáticos (japonés, chino, coreano). Si desarrollas apps internacionales, puede ser muy útil.

<ruby>
  漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

<rt> es el texto de pronunciación. <rp> son los paréntesis que se muestran en navegadores que no soportan ruby (como fallback).

`<bdi>` y `<bdo>`: texto bidireccional

Para textos que mezclan idiomas de izquierda a derecha (español, inglés) con idiomas de derecha a izquierda (árabe, hebreo).

<!-- bdi: aísla el texto para que el algoritmo bidireccional lo evalúe solo -->
<p>Usuario <bdi>مرحبا</bdi> ha dejado un comentario.</p>

<!-- bdo: fuerza la dirección del texto -->
<p><bdo dir="rtl">Este texto se muestra al revés</bdo></p>

Resumen

En este capítulo cubriste todas las etiquetas HTML que necesitarás en tus proyectos:

Texto: <h1>-<h6>, <p>, <span>, <strong>, <b>, <em>, <i>, <mark>, <small>, <del>, <ins>, <sub>, <sup>, <abbr>, <code>, <pre>, <kbd>, <blockquote>, <q>, <cite>, <br>, <hr>, <wbr>
Listas: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Enlaces: <a> con href, target, rel, download, mailto:, tel:, anclas #
Multimedia: <img>, <figure>, <figcaption>, <video>, <audio>, <source>, <picture>, <iframe>, <canvas>, <svg>
Head: <title>, <meta>, <link>, <script>, <style>, <base>, <noscript>
Interactivas: <details>, <summary>, <dialog>, <progress>, <meter>, <output>
Agrupación: <div> (bloque genérico) y <span> (en línea genérico)
Especiales: <template>, <data>, <time>, <address>, <ruby>, <bdi>, <bdo>

La regla de oro: elige siempre la etiqueta que mejor describe el contenido. Si no existe ninguna que encaje perfectamente, usa <div> o <span>.

Ejercicio: Crea una página de referencia personal

Crea una página HTML completa que sea tu “tarjeta de presentación” como desarrollador. Debe incluir al menos 15 etiquetas diferentes de este capítulo.

Estructura base — Crea el archivo index.html con el <!DOCTYPE html>, <html>, <head> y <body> correctos. Rellena el <head> con <meta charset>, <meta viewport>, <title> y una <meta description>.
Sección de presentación — En el <body>, escribe un encabezado <h1> con tu nombre, un <p> de presentación y usa <strong> para destacar tu especialidad. Añade tu email con <a href="mailto:...">.
Sobre mí — Crea una sección con <h2> y varios párrafos con <p>. Usa <em> para palabras que quieres enfatizar y <mark> para resaltar tus habilidades clave.
Lista de habilidades — Añade una <ul> con tus habilidades técnicas y una <ol> con tus 3 proyectos favoritos en orden de preferencia.
Sección de glosario — Usa <dl>, <dt> y <dd> para definir 3 tecnologías que conoces.
Multimedia — Añade una foto tuya (o un placeholder) con <img> y el alt correcto, envuelta en <figure> y <figcaption>.
FAQ con acordeón — Añade 3 preguntas frecuentes usando <details> y <summary>: “¿En qué trabajas?”, “¿Cómo te contacto?”, “¿Qué tecnologías usas?”.
Verifica la accesibilidad — Abre la página en tu navegador y prueba que todas las imágenes tienen alt, todos los enlaces tienen texto descriptivo, y la jerarquía de títulos es correcta (h1 → h2 → h3).

Siguiente capítuloIntroducción a CSSAprende las reglas del juego: selectores, cascada y cómo darle vida visual a tu HTML.

Todas las etiquetas HTML

Todas las etiquetas HTML

1. Etiquetas de texto

Títulos: <h1> hasta <h6>

Párrafos: <p>

Contenedor en línea: <span>

Importancia y énfasis: <strong>, <b>, <em>, <i>

Texto resaltado: <mark>

Letra pequeña: <small>

Texto tachado e insertado: <del> e <ins>

Subíndice y superíndice: <sub> y <sup>

Abreviaciones: <abbr>

Código en línea: <code>

Texto preformateado: <pre>

Entrada de teclado: <kbd>

Citas: <blockquote> y <cite>

Salto de línea: <br>

Separador temático: <hr>

Oportunidad de corte de palabra: <wbr>

2. Etiquetas de listas

Lista sin orden: <ul> con <li>

Lista ordenada: <ol> con <li>

Lista de descripción: <dl>, <dt>, <dd>

Listas anidadas

3. Etiquetas de enlaces y navegación

El enlace <a>: mucho más que un link

URLs absolutas vs relativas

4. Etiquetas de multimedia

Imágenes: <img>

Imagen con pie de foto: <figure> y <figcaption>

Vídeo: <video>

Audio: <audio>

Múltiples formatos: <source>

Imágenes responsivas: <picture>

Contenido externo: <iframe>

Canvas y SVG: mención breve

5. Etiquetas de la cabecera (<head>)

Open Graph: cómo se ve tu página en redes sociales

<base>: la URL base de todos los enlaces

<noscript>: cuando JavaScript no está disponible

6. Etiquetas interactivas

Acordeón nativo: <details> y <summary>

Modal nativo: <dialog>

Barra de progreso: <progress>

Medidor de valor: <meter>

Resultado de cálculo: <output>

7. Etiquetas de agrupación

<div>: el contenedor genérico de bloque

<span>: el contenedor genérico en línea

8. Etiquetas menos comunes pero útiles

<template>: plantillas para JavaScript

<data>: valor legible por máquinas

<time>: fechas y horas semánticas

<address>: información de contacto

<ruby>, <rt>, <rp>: anotaciones fonéticas

<bdi> y <bdo>: texto bidireccional

Resumen

Títulos: `<h1>` hasta `<h6>`

Párrafos: `<p>`

Contenedor en línea: `<span>`

Importancia y énfasis: `<strong>`, `<b>`, `<em>`, `<i>`

Texto resaltado: `<mark>`

Letra pequeña: `<small>`

Texto tachado e insertado: `<del>` e `<ins>`

Subíndice y superíndice: `<sub>` y `<sup>`

Abreviaciones: `<abbr>`

Código en línea: `<code>`

Texto preformateado: `<pre>`

Entrada de teclado: `<kbd>`

Citas: `<blockquote>` y `<cite>`

Salto de línea: `<br>`

Separador temático: `<hr>`

Oportunidad de corte de palabra: `<wbr>`

Lista sin orden: `<ul>` con `<li>`

Lista ordenada: `<ol>` con `<li>`

Lista de descripción: `<dl>`, `<dt>`, `<dd>`

El enlace `<a>`: mucho más que un link

Imágenes: `<img>`

Imagen con pie de foto: `<figure>` y `<figcaption>`

Vídeo: `<video>`

Audio: `<audio>`

Múltiples formatos: `<source>`

Imágenes responsivas: `<picture>`

Contenido externo: `<iframe>`

5. Etiquetas de la cabecera (`<head>`)

`<base>`: la URL base de todos los enlaces

`<noscript>`: cuando JavaScript no está disponible

Acordeón nativo: `<details>` y `<summary>`

Modal nativo: `<dialog>`

Barra de progreso: `<progress>`

Medidor de valor: `<meter>`

Resultado de cálculo: `<output>`

`<div>`: el contenedor genérico de bloque

`<span>`: el contenedor genérico en línea

`<template>`: plantillas para JavaScript

`<data>`: valor legible por máquinas

`<time>`: fechas y horas semánticas

`<address>`: información de contacto

`<ruby>`, `<rt>`, `<rp>`: anotaciones fonéticas

`<bdi>` y `<bdo>`: texto bidireccional