CAPÍTULO 01 / APRENDE LA WEB

Primero, el significado.

HTML describe el contenido. Las etiquetas cuentan al navegador qué es un título, un enlace, un formulario o una sección.

DESDE EL PRIMER ARCHIVO HASTA EL RESULTADO

Construye tu index.html, paso a paso.

Cada paso acumula lo anterior. Lee la explicación, observa el resultado y prueba una modificación. El laboratorio adapta los archivos separados a un marco aislado.

Qué añadimos
Dónde va y en qué orden
Qué deberías ver

¿Qué pasa si…? Quitar la pieza de este paso Mover la pieza al final de su contenedor

index.html · documento acumulado

Ancho de ejemplo

Consola y comportamiento

Ver código usado en la variante

El navegador normaliza el HTML al analizarlo. La vista previa incrusta CSS y JavaScript; en tus archivos mantendrás sus enlaces externos.

HTML

FUNDAMENTOS

Una etiqueta es una decisión.

¿Qué es HTML?

HyperText Markup Language es un lenguaje de marcado. No calcula ni controla por sí solo la lógica de un programa: estructura contenido y conecta documentos mediante enlaces.

Cómo se construye un elemento

<a href="css.html">Aprender CSS</a>

<a>: Etiqueta de apertura.
href: Atributo que define el destino.
Aprender CSS: Contenido del enlace.
</a>: Etiqueta de cierre.

Los elementos vacíos, como img, input y meta, no tienen etiqueta de cierre. En HTML no necesitan una barra final.

Tu primer documento

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera página</title>
    <meta name="description" content="Mi primera página de estudio: estructura, textos, enlaces y ejemplos de HTML.">
  </head>
  <body>
    <header><h1>Hola, mundo</h1></header>
    <main><p>Estoy aprendiendo HTML.</p></main>
    <footer><p>Mi proyecto</p></footer>
  </body>
</html>

DOCTYPE activa el modo estándar; no es una etiqueta de contenido. La sangría facilita la lectura, pero no cambia la jerarquía real de elementos.

Buenas prácticas desde el principio

Usa encabezados en orden lógico, etiquetas asociadas a controles, alt útil en imágenes e identificadores únicos. Un div es válido para agrupar sin significado específico; evita usarlo como sustituto de un botón o una sección.

Atributos que verás a menudo

id y class: Identifican un elemento único o agrupan elementos para estilos y consultas.
lang y dir: Indican idioma y dirección del texto.
data-*: Guarda datos propios; JavaScript accede mediante dataset.
hidden: Oculta contenido que no corresponde mostrar en ese estado.
aria-*: Describe estados o relaciones cuando la semántica nativa no basta; no sustituye un elemento correcto.
name, value y required: Participan en la captura, envío y validación de formularios.

HTML PARA PERSONAS Y BUSCADORES

Metadatos y buenas prácticas de SEO

Empieza por el documento HTML: describe la página en el head y organiza su contenido en el body.

1. Completa el head

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gimnasios de Kanto y medallas | PokéAtlas</title>
    <meta name="description" content="Consulta los ocho líderes de Kanto, sus ciudades y las medallas de Rojo Fuego y Verde Hoja.">
  </head>
  <body>
    <main>
      <h1>Gimnasios de Kanto</h1>
    </main>
  </body>
</html>

charset indica la codificación; viewport adapta el área de visualización; title identifica el documento; description resume su contenido.

Este orden es una base de trabajo legible. La descripción pertenece al head, no al cuerpo visible.

2. Entiende meta description

name="description": Identifica el tipo de metadato.
content="…": Contiene el resumen de esa página. Escribe una descripción específica, legible y coherente con el contenido.
Qué ve la persona: No añade un párrafo al body. Google puede usarla para el fragmento de un resultado o elegir texto de la página según la consulta.
Si la quitas: La página sigue mostrando su contenido; se pierde ese resumen propuesto. Google puede generar otro fragmento.
Si la cambias: Cambias los metadatos, no el título visible ni los párrafos. El resultado de Google no se actualiza instantáneamente.

No existe una longitud que garantice que Google muestre todo el texto. No conviertas la descripción en una lista de palabras clave ni copies la misma en todas las páginas.

Comparación: «Pokémon, Kanto, gimnasio, medalla» dice menos que «Consulta los ocho líderes de Kanto, sus ciudades y las medallas que otorgan».

3. Organiza el body con significado

<main>
  <h1>Gimnasios de Kanto</h1>
  <section aria-labelledby="lideres">
    <h2 id="lideres">Líderes y medallas</h2>
    <article>
      <h3>Brock: Ciudad Plateada</h3>
      <img src="images/leader-brock.png"
           alt="Brock, líder del gimnasio de Ciudad Plateada"
           width="128" height="128">
      <p>Otorga la Medalla Roca.</p>
      <a href="tipos.html">Consultar las ventajas de los tipos</a>
    </article>
  </section>
</main>

El ejemplo muestra un orden h1 → h2 → h3. El nivel expresa jerarquía; CSS controla su tamaño. Las rutas de este ejemplo corresponden a un proyecto ficticio, no a archivos de WebLab.

Usa un título principal claro y encabezados que expliquen cada apartado.
Elige elementos semánticos por su significado. Un div sigue siendo válido para agrupar sin un significado específico.
Escribe enlaces con href y textos que expliquen el destino.
Describe imágenes informativas con alt y usa alt vacío para imágenes decorativas.
Mantén el contenido principal accesible y las rutas y recursos funcionando.

Estas prácticas ayudan a comprender y utilizar la página. Cambiar div por section no garantiza mejores posiciones.

4. Prueba y comprueba

En el paso 2 del tutorial, localiza la descripción en el head. Cambia su content, quítala y aplica tus cambios: el body debería seguir igual. Para estudiar la propuesta de título y fragmento, abre el editor de SEO.

Al publicar, revisa canonical, indexación y recursos con la lista de SEO. Las etiquetas Open Graph para compartir enlaces tienen otra función y no sustituyen la descripción HTML.

Google · Metadescripciones y fragmentos · Google · Guía SEO

CÓMO LLEGAMOS AQUÍ

De documentos enlazados a la web actual.

1989–1991
La propuesta de la web

Tim Berners-Lee desarrolló la idea de documentos conectados mediante hipertexto en CERN; HTML nació como una de sus piezas.
1995
HTML 2.0

Se formalizó una especificación temprana que incluía las capacidades básicas de la web de la época.
1997–1999
HTML 3.2 y 4

La estructura de documentos se amplió. La separación entre contenido y presentación ganó importancia con CSS.
2014–hoy
HTML5 y Living Standard

Elementos semánticos, multimedia y APIs modernas. WHATWG mantiene un estándar vivo que sigue evolucionando.

CONSULTA CUANDO LO NECESITES

Referencia de elementos HTML

Elementos agrupados por función. Abre una ficha para ver descripción, uso, errores frecuentes y un ejemplo. SVG y MathML son lenguajes integrados, no elementos HTML ordinarios.

Buscar en la referenciaCategoría

<html>Documento

Raíz del documento; lang identifica el idioma.

Cuándo usarlo: Para envolver todo el documento.
Cuándo evitarlo: No crees varias raíces ni omitas lang.

<html lang="es">…</html>

Consultar documentación

<head>Documento

Agrupa metadatos y recursos del documento.

Cuándo usarlo: Para título, descripción y enlaces a CSS.
Cuándo evitarlo: No pongas aquí contenido visible.

<head><title>Mi página</title></head>

Consultar documentación

<title>Documento

Nombre del documento en pestañas y resultados de búsqueda.

Cuándo usarlo: Un título específico por página.
Cuándo evitarlo: No lo confundas con el h1 visible.

<title>Guía de HTML | WebLab</title>

Consultar documentación

<meta>Documento

Define metadatos como codificación, viewport y descripción de la página.

Cuándo usarlo: Para charset, descripción y adaptación móvil.
Cuándo evitarlo: No uses etiquetas de palabras clave esperando mejorar el posicionamiento.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Aprende HTML con explicaciones y ejemplos paso a paso.">

Estudiar meta description y SEO en HTML Consultar documentación

<link>Documento

Relaciona recursos externos con el documento.

Cuándo usarlo: Para hojas de estilo, iconos o canonical real.
Cuándo evitarlo: No es un enlace de navegación; usa a.

<link rel="stylesheet" href="assets/style.css">

Consultar documentación

<style>Documento

Contiene reglas CSS internas.

Cuándo usarlo: Para ejemplos aislados o estilos específicos pequeños.
Cuándo evitarlo: En proyectos mantenibles usa una hoja externa compartida.

<style>p { color: navy; }</style>

Consultar documentación

<base>Documento

Cambia la URL base de todos los enlaces relativos.

Cuándo usarlo: Cuando necesitas una base común deliberada.
Cuándo evitarlo: No lo añadas sin revisar rutas, formularios y anclas.

<base href="https://example.com/docs/">

Consultar documentación

<body>Documento

Contiene el contenido de la página.

Cuándo usarlo: Un body por documento.
Cuándo evitarlo: No distribuyas el contenido en varios body.

<body><main>Contenido</main></body>

Consultar documentación

<main>Semántica y estructura

Contenido principal único de la página.

Cuándo usarlo: Para la tarea o información central.
Cuándo evitarlo: No incluyas la navegación global repetida.

<main id="contenido"><h1>Guía</h1></main>

Consultar documentación

<header>Semántica y estructura

Introducción de una página o sección.

Cuándo usarlo: Para título, marca o navegación contextual.
Cuándo evitarlo: No lo uses solo por estar visualmente arriba.

<header><h1>Mi artículo</h1></header>

Consultar documentación

<footer>Semántica y estructura

Pie de la página o de una sección.

Cuándo usarlo: Para autoría, fuentes o navegación final.
Cuándo evitarlo: No significa cualquier contenido colocado abajo.

<footer><p>Autor: Ana</p></footer>

Consultar documentación

<nav>Semántica y estructura

Grupo importante de enlaces de navegación.

Cuándo usarlo: Para menú principal o índice.
Cuándo evitarlo: No envuelvas cada enlace aislado con nav.

<nav aria-label="Principal"><a href="index.html">Inicio</a></nav>

Consultar documentación

<section>Semántica y estructura

Agrupa un tema del documento.

Cuándo usarlo: Para una sección con un encabezado identificable.
Cuándo evitarlo: Para agrupar solo por estilo suele bastar div.

<section><h2>Historia</h2><p>…</p></section>

Consultar documentación

<article>Semántica y estructura

Contenido independiente que tiene sentido por sí solo.

Cuándo usarlo: Para publicaciones, reseñas o fichas autónomas.
Cuándo evitarlo: No cualquier columna es un article.

<article><h2>Una noticia</h2><p>…</p></article>

Consultar documentación

<aside>Semántica y estructura

Información complementaria al contenido principal.

Cuándo usarlo: Para notas relacionadas o referencias laterales.
Cuándo evitarlo: No elijas aside solo porque está a la derecha.

<aside><h2>Para saber más</h2><p>…</p></aside>

Consultar documentación

<address>Semántica y estructura

Información de contacto del autor de página o artículo.

Cuándo usarlo: Para correo o contacto del responsable.
Cuándo evitarlo: No para cualquier dirección postal sin relación con la autoría.

<address><a href="mailto:ana@example.com">Ana</a></address>

Consultar documentación

<hgroup>Semántica y estructura

Agrupa un título con contenido secundario relacionado.

Cuándo usarlo: Para título acompañado de subtítulo o entradilla.
Cuándo evitarlo: No sustituye la jerarquía de encabezados.

<hgroup><h1>WebLab</h1><p>Aprende construyendo</p></hgroup>

Consultar documentación

<search>Semántica y estructura

Región de búsqueda o filtrado.

Cuándo usarlo: Para controles que buscan contenido.
Cuándo evitarlo: No lo uses como formulario genérico de registro.

<search><form><label>Buscar <input type="search"></label></form></search>

Consultar documentación

<h1>Semántica y estructura

Encabezado de nivel 1; define jerarquía, no tamaño visual.

Cuándo usarlo: Para el título principal de la página.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h1>Título principal</h1>

Consultar documentación

<h2>Semántica y estructura

Encabezado de nivel 2; define jerarquía, no tamaño visual.

Cuándo usarlo: Para un nivel subordinado al anterior.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h2>Título de sección</h2>

Consultar documentación

<h3>Semántica y estructura

Encabezado de nivel 3; define jerarquía, no tamaño visual.

Cuándo usarlo: Para un nivel subordinado al anterior.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h3>Título de sección</h3>

Consultar documentación

<h4>Semántica y estructura

Encabezado de nivel 4; define jerarquía, no tamaño visual.

Cuándo usarlo: Para un nivel subordinado al anterior.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h4>Título de sección</h4>

Consultar documentación

<h5>Semántica y estructura

Encabezado de nivel 5; define jerarquía, no tamaño visual.

Cuándo usarlo: Para un nivel subordinado al anterior.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h5>Título de sección</h5>

Consultar documentación

<h6>Semántica y estructura

Encabezado de nivel 6; define jerarquía, no tamaño visual.

Cuándo usarlo: Para un nivel subordinado al anterior.
Cuándo evitarlo: No elijas el nivel para conseguir una fuente más pequeña.

<h6>Título de sección</h6>

Consultar documentación

<p>Texto y listas

Párrafo de texto.

Cuándo usarlo: Para una idea redactada.
Cuándo evitarlo: No lo uses como contenedor de listas o secciones.

<p>Aprender requiere práctica.</p>

Consultar documentación

<div>Texto y listas

Contenedor genérico de contenido en bloque.

Cuándo usarlo: Cuando no hay un elemento semántico apropiado.
Cuándo evitarlo: No reemplaza automáticamente main, nav o article.

<div class="layout">…</div>

Consultar documentación

<span>Texto y listas

Contenedor genérico de texto en línea.

Cuándo usarlo: Para aplicar un estilo sin añadir significado.
Cuándo evitarlo: Si hay importancia usa strong; si hay énfasis usa em.

<p>Texto <span class="color">destacado visualmente</span>.</p>

Consultar documentación

<a>Texto y listas

Enlace a una URL o fragmento.

Cuándo usarlo: Para navegar a un destino.
Cuándo evitarlo: Para ejecutar una acción usa button.

<a href="#laboratorio">Ir al laboratorio</a>

Consultar documentación

<strong>Texto y listas

Importancia, seriedad o urgencia.

Cuándo usarlo: Para información relevante en el significado.
Cuándo evitarlo: No solo para poner texto en negrita.

<strong>Guarda tus cambios.</strong>

Consultar documentación

<em>Texto y listas

Énfasis que modifica el sentido al leer.

Cuándo usarlo: Para enfatizar una palabra.
Cuándo evitarlo: No solo para escribir cursiva.

Lo hizo <em>hoy</em>.

Consultar documentación

<b>Texto y listas

Llama la atención sin añadir importancia.

Cuándo usarlo: Para palabras clave cuando no corresponde strong.
Cuándo evitarlo: No implica urgencia.

<b>HTML</b> y <b>CSS</b>

Consultar documentación

<i>Texto y listas

Voz alternativa o término especial.

Cuándo usarlo: Para términos técnicos o expresiones en otro idioma.
Cuándo evitarlo: No sustituye em para énfasis.

El término <i lang="en">layout</i>.

Consultar documentación

<u>Texto y listas

Anotación no textual, como una falta ortográfica.

Cuándo usarlo: Cuando el subrayado expresa esa anotación.
Cuándo evitarlo: Evita que parezca un enlace.

<u class="error">ortografia</u>

Consultar documentación

<s>Texto y listas

Contenido que ya no es exacto o relevante.

Cuándo usarlo: Para un precio anterior.
Cuándo evitarlo: Para una edición eliminada usa del.

<s>20 €</s> Ahora 15 €

Consultar documentación

<small>Texto y listas

Comentarios secundarios, aclaraciones o letra pequeña.

Cuándo usarlo: Para notas legales o atribución secundaria.
Cuándo evitarlo: No para reducir el tamaño del contenido principal.

<small>Condiciones aplicables.</small>

Consultar documentación

<mark>Texto y listas

Relevancia en el contexto actual.

Cuándo usarlo: Para resaltar coincidencias de una búsqueda.
Cuándo evitarlo: No indica importancia permanente.

Aprende <mark>HTML</mark>.

Consultar documentación

<abbr>Texto y listas

Abreviación que puede tener una expansión.

Cuándo usarlo: Para explicar siglas.
Cuándo evitarlo: No dependas solo del tooltip para información esencial.

<abbr title="HyperText Markup Language">HTML</abbr>

Consultar documentación

<br>Texto y listas

Salto de línea necesario en el contenido.

Cuándo usarlo: En poemas o direcciones.
Cuándo evitarlo: No para crear márgenes entre párrafos.

Calle Uno<br>Ciudad

Consultar documentación

<wbr>Texto y listas

Punto permitido de corte de línea.

Cuándo usarlo: En identificadores o palabras muy largas.
Cuándo evitarlo: No produce un salto obligatorio.

palabra<wbr>larguísima

Consultar documentación

<hr>Texto y listas

Cambio temático entre contenidos.

Cuándo usarlo: Para separar temas.
Cuándo evitarlo: Para una línea decorativa usa border en CSS.

<p>Tema uno</p><hr><p>Tema dos</p>

Consultar documentación

<pre>Texto y listas

Texto preformateado; respeta espacios y saltos.

Cuándo usarlo: Para bloques de código o texto alineado.
Cuándo evitarlo: No uses espacios para diseñar columnas de la página.

<pre><code>const n = 1;</code></pre>

Consultar documentación

<code>Texto y listas

Fragmento de código.

Cuándo usarlo: Para etiquetas, funciones o comandos.
Cuándo evitarlo: No implica ejecución.

<code>document.querySelector()</code>

Consultar documentación

<kbd>Texto y listas

Entrada del usuario.

Cuándo usarlo: Para teclas o comandos que debe escribir.
Cuándo evitarlo: No para resultados del programa.

Pulsa <kbd>Ctrl</kbd> + <kbd>S</kbd>.

Consultar documentación

<samp>Texto y listas

Salida de un programa.

Cuándo usarlo: Para un mensaje de consola o respuesta.
Cuándo evitarlo: No para instrucciones de entrada.

<samp>Archivo guardado</samp>

Consultar documentación

<var>Texto y listas

Variable o parámetro en una expresión.

Cuándo usarlo: Para notación técnica.
Cuándo evitarlo: No declara una variable JavaScript.

El valor <var>x</var>.

Consultar documentación

<sub>Texto y listas

Subíndice con significado.

Cuándo usarlo: En fórmulas químicas o notación.
Cuándo evitarlo: No para mover texto decorativamente.

H<sub>2</sub>O

Consultar documentación

<sup>Texto y listas

Superíndice con significado.

Cuándo usarlo: Exponentes o llamadas a notas.
Cuándo evitarlo: Para posiciones visuales usa CSS.

x<sup>2</sup>

Consultar documentación

<blockquote>Texto y listas

Cita extensa de otra fuente.

Cuándo usarlo: Para contenido citado en bloque.
Cuándo evitarlo: No lo uses para sangrar cualquier texto.

<blockquote cite="https://example.com"><p>Cita.</p></blockquote>

Consultar documentación

<q>Texto y listas

Cita breve en línea.

Cuándo usarlo: Para palabras citadas dentro de un párrafo.
Cuándo evitarlo: No para destacar una opinión propia.

Dijo <q>practica cada día</q>.

Consultar documentación

<cite>Texto y listas

Título de una obra citada.

Cuándo usarlo: Para libros, artículos o piezas creativas.
Cuándo evitarlo: No es el nombre de cualquier persona.

<cite>Una guía de la web</cite>

Consultar documentación

<dfn>Texto y listas

Término que se define en el contexto.

Cuándo usarlo: En una definición o glosario.
Cuándo evitarlo: No marca todas las apariciones del término.

<p><dfn>DOM</dfn> es un modelo de objetos del documento.</p>

Consultar documentación

<time>Texto y listas

Fecha, hora o duración legible por máquinas.

Cuándo usarlo: Para publicaciones o eventos.
Cuándo evitarlo: No pongas un datetime inválido.

<time datetime="2026-10-06">6 de octubre de 2026</time>

Consultar documentación

<data>Texto y listas

Asocia un valor legible por máquinas a un texto.

Cuándo usarlo: Para códigos de productos.
Cuándo evitarlo: Para fechas usa time.

<data value="42">Producto azul</data>

Consultar documentación

<bdi>Texto y listas

Aísla la dirección de texto desconocido.

Cuándo usarlo: Para nombres introducidos por usuarios en distintos idiomas.
Cuándo evitarlo: No cambia por sí solo la dirección de todo el documento.

Usuario: <bdi>اسم</bdi>

Consultar documentación

<bdo>Texto y listas

Sobrescribe la dirección de escritura.

Cuándo usarlo: Para casos explícitos de presentación bidireccional.
Cuándo evitarlo: No inviertas textos normales sin necesidad.

<bdo dir="rtl">Texto</bdo>

Consultar documentación

<ruby>Texto y listas

Anotación de pronunciación o lectura.

Cuándo usarlo: Para anotaciones de escritura asiática.
Cuándo evitarlo: No como tooltip genérico.

<ruby>漢<rt>kan</rt></ruby>

Consultar documentación

<rt>Texto y listas

Texto de anotación de ruby.

Cuándo usarlo: Dentro de ruby.
Cuándo evitarlo: No fuera de una anotación ruby.

<ruby>字<rt>ji</rt></ruby>

Consultar documentación

<rp>Texto y listas

Paréntesis de respaldo para ruby.

Cuándo usarlo: Dentro de ruby para navegadores sin soporte.
Cuándo evitarlo: No como paréntesis independiente.

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

Consultar documentación

<ul>Texto y listas

Lista sin orden significativo.

Cuándo usarlo: Para colecciones o navegación.
Cuándo evitarlo: Si la secuencia importa usa ol.

<ul><li>HTML</li><li>CSS</li></ul>

Consultar documentación

<ol>Texto y listas

Lista con orden significativo.

Cuándo usarlo: Para instrucciones y rankings.
Cuándo evitarlo: No solo para obtener números decorativos.

<ol><li>Lee</li><li>Practica</li></ol>

Consultar documentación

<li>Texto y listas

Elemento de lista.

Cuándo usarlo: Como hijo de ul, ol o menu.
Cuándo evitarlo: No lo dejes sin su lista.

<ul><li>Un recurso</li></ul>

Consultar documentación

<menu>Texto y listas

Lista de comandos o elementos de menú.

Cuándo usarlo: Para grupos de acciones; requiere li.
Cuándo evitarlo: Para navegación principal suele ser nav con ul.

<menu><li><button>Copiar</button></li></menu>

Consultar documentación

<dl>Texto y listas

Lista de términos y descripciones.

Cuándo usarlo: Para glosarios o pares de información.
Cuándo evitarlo: No para cualquier diseño de dos columnas.

<dl><dt>HTML</dt><dd>Estructura</dd></dl>

Consultar documentación

<dt>Texto y listas

Término de una lista descriptiva.

Cuándo usarlo: Dentro de dl.
Cuándo evitarlo: No como encabezado general.

<dl><dt>Autor</dt><dd>Ana</dd></dl>

Consultar documentación

<dd>Texto y listas

Descripción de un término de dl.

Cuándo usarlo: Después del término relacionado.
Cuándo evitarlo: No fuera de dl.

<dl><dt>CSS</dt><dd>Presentación</dd></dl>

Consultar documentación

<figure>Texto y listas

Contenido autónomo ilustrativo.

Cuándo usarlo: Imágenes, ejemplos o diagramas con posible leyenda.
Cuándo evitarlo: No cualquier imagen necesita figure.

<figure><img src="foto.jpg" alt="Montaña"><figcaption>Una montaña</figcaption></figure>

Consultar documentación

<figcaption>Texto y listas

Leyenda de una figure.

Cuándo usarlo: Como primer o último hijo de figure.
Cuándo evitarlo: No fuera de figure.

<figure><pre>Ejemplo</pre><figcaption>Resultado</figcaption></figure>

Consultar documentación

<img>Multimedia e integración

Imagen integrada; alt describe su función.

Cuándo usarlo: Para contenido visual informativo; alt vacío si es decorativo.
Cuándo evitarlo: No omitas alt ni incluyas texto esencial solo como imagen.

<img src="foto.jpg" alt="Un bosque" width="600" height="400">

Consultar documentación

<picture>Multimedia e integración

Selecciona imágenes por formato o condición.

Cuándo usarlo: Para dirección artística y formatos alternativos.
Cuándo evitarlo: No reemplaza al img final obligatorio.

<picture><source srcset="foto.webp" type="image/webp"><img src="foto.jpg" alt="Bosque"></picture>

Consultar documentación

<source>Multimedia e integración

Fuente alternativa de picture, audio o video.

Cuándo usarlo: Dentro del elemento multimedia apropiado.
Cuándo evitarlo: No muestra por sí mismo un recurso.

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

Consultar documentación

<audio>Multimedia e integración

Reproductor de audio.

Cuándo usarlo: Con controles y alternativa textual apropiada.
Cuándo evitarlo: Evita reproducción automática inesperada.

<audio controls src="audio.mp3"></audio>

Consultar documentación

<video>Multimedia e integración

Reproductor de video.

Cuándo usarlo: Con controles, dimensiones y subtítulos cuando corresponde.
Cuándo evitarlo: No dependas del sonido para comunicar toda la información.

<video controls width="320" src="video.mp4"></video>

Consultar documentación

<track>Multimedia e integración

Pistas de texto para audio o video.

Cuándo usarlo: Subtítulos, descripciones o capítulos en WebVTT.
Cuándo evitarlo: No sustituye el archivo de video.

<video controls><track kind="subtitles" src="es.vtt" srclang="es" label="Español"></video>

Consultar documentación

<iframe>Multimedia e integración

Documento externo o vista previa incrustada.

Cuándo usarlo: Para videos o contenido aislado, con title.
Cuándo evitarlo: Evita contenido no confiable sin sandbox apropiado.

<iframe title="Ejemplo" sandbox src="ejemplo.html"></iframe>

Consultar documentación

<embed>Multimedia e integración

Recurso externo incrustado.

Cuándo usarlo: Para contenido que requiere integración específica.
Cuándo evitarlo: Prefiere elementos nativos como video o iframe cuando sirven.

<embed src="documento.pdf" type="application/pdf">

Consultar documentación

<object>Multimedia e integración

Recurso externo con contenido alternativo.

Cuándo usarlo: Para un recurso que necesita fallback.
Cuándo evitarlo: No dependas de plugins antiguos.

<object data="documento.pdf" type="application/pdf"><a href="documento.pdf">Abrir PDF</a></object>

Consultar documentación

<canvas>Multimedia e integración

Superficie de dibujo controlada por scripts.

Cuándo usarlo: Para gráficos dinámicos, juegos o dibujo.
Cuándo evitarlo: No para texto esencial sin alternativa accesible.

<canvas width="300" height="150">Descripción alternativa</canvas>

Consultar documentación

<map>Multimedia e integración

Define un mapa de áreas enlazables.

Cuándo usarlo: Cuando una imagen necesita regiones interactivas.
Cuándo evitarlo: No para mapas geográficos dinámicos complejos.

<map name="zonas"><area shape="rect" coords="0,0,100,100" href="zona.html" alt="Zona"></map>

Consultar documentación

<area>Multimedia e integración

Zona enlazable dentro de map.

Cuándo usarlo: Con forma, coordenadas, destino y alt.
Cuándo evitarlo: No fuera de map.

<area shape="circle" coords="50,50,20" href="info.html" alt="Información">

Consultar documentación

<svg>Multimedia e integración

Raíz de gráficos vectoriales; pertenece al espacio SVG.

Cuándo usarlo: Para iconos y diagramas escalables.
Cuándo evitarlo: No lo consideres una etiqueta HTML de texto normal.

<svg viewBox="0 0 24 24" aria-label="Círculo" role="img"><circle cx="12" cy="12" r="8"/></svg>

Consultar documentación

<math>Multimedia e integración

Raíz de fórmulas MathML.

Cuándo usarlo: Para expresiones matemáticas con estructura.
Cuándo evitarlo: No para gráficos generales.

<math><mi>x</mi><mo>+</mo><mn>1</mn></math>

Consultar documentación

<form>Formularios

Agrupa controles para enviar datos.

Cuándo usarlo: Con método y destino reales o interacción manejada.
Cuándo evitarlo: No anides formularios.

<form action="/buscar" method="get"><input name="q"><button>Buscar</button></form>

Consultar documentación

<label>Formularios

Nombre accesible de un control.

Cuándo usarlo: Asociado por for e id o envolviendo el control.
Cuándo evitarlo: Placeholder no sustituye label.

<label for="nombre">Nombre</label><input id="nombre" name="nombre">

Consultar documentación

<input>Formularios

Control de entrada según su type.

Cuándo usarlo: Para texto, correo, número, selección y más.
Cuándo evitarlo: No uses type=number para teléfonos o códigos postales.

<input type="email" id="email" name="email" required>

Consultar documentación

<button>Formularios

Acción o envío de formulario.

Cuándo usarlo: Para acciones; type=button si no debe enviar.
Cuándo evitarlo: No lo sustituyas por un div clicable.

<button type="button">Mostrar ayuda</button>

Consultar documentación

<textarea>Formularios

Entrada de texto multilínea.

Cuándo usarlo: Mensajes, comentarios o editores.
Cuándo evitarlo: No para contraseñas.

<label>Mensaje<textarea name="mensaje" rows="4"></textarea></label>

Consultar documentación

<select>Formularios

Selección entre opciones.

Cuándo usarlo: Para listas de opciones conocidas.
Cuándo evitarlo: No fuerces listas enormes sin búsqueda alternativa.

<select name="tema"><option value="html">HTML</option></select>

Consultar documentación

<option>Formularios

Una opción de select o datalist.

Cuándo usarlo: Dentro de esos controles.
Cuándo evitarlo: No como botón independiente.

<select><option value="css">CSS</option></select>

Consultar documentación

<optgroup>Formularios

Grupo de opciones de select.

Cuándo usarlo: Para separar categorías con label.
Cuándo evitarlo: No contiene otros optgroup anidados.

<select><optgroup label="Lenguajes"><option>HTML</option></optgroup></select>

Consultar documentación

<datalist>Formularios

Sugerencias para un input.

Cuándo usarlo: Cuando admites entradas distintas de las sugeridas.
Cuándo evitarlo: No es equivalente a select ni garantiza una elección fija.

<input list="temas"><datalist id="temas"><option value="HTML"></datalist>

Consultar documentación

<fieldset>Formularios

Agrupa controles relacionados.

Cuándo usarlo: Para opciones de una misma pregunta.
Cuándo evitarlo: No como caja decorativa sin relación de campos.

<fieldset><legend>Preferencias</legend><label><input type="checkbox">Avisos</label></fieldset>

Consultar documentación

<legend>Formularios

Título accesible de un fieldset.

Cuándo usarlo: Como primer hijo de fieldset.
Cuándo evitarlo: No es un título genérico de sección.

<fieldset><legend>Contacto</legend>…</fieldset>

Consultar documentación

<output>Formularios

Resultado de un cálculo o acción.

Cuándo usarlo: Para resultados asociados a controles.
Cuándo evitarlo: No es un control editable.

<output for="a b">42</output>

Consultar documentación

<progress>Formularios

Progreso de una tarea.

Cuándo usarlo: Con value y max, o indeterminado sin value.
Cuándo evitarlo: Para una medida estática usa meter.

<label>Descarga <progress value="30" max="100">30 %</progress></label>

Consultar documentación

<meter>Formularios

Medida dentro de un rango conocido.

Cuándo usarlo: Para capacidad o nivel, con etiqueta.
Cuándo evitarlo: No para indicar carga de una tarea.

<label>Uso <meter min="0" max="100" value="65">65 %</meter></label>

Consultar documentación

<table>Tablas e interacción

Datos con relaciones entre filas y columnas.

Cuándo usarlo: Para comparaciones y datos tabulares.
Cuándo evitarlo: No para maquetar toda la página.

<table><caption>Notas</caption><tr><th>Alumno</th><th>Nota</th></tr><tr><td>Ana</td><td>9</td></tr></table>

Consultar documentación

<caption>Tablas e interacción

Título de una tabla.

Cuándo usarlo: Como primer hijo de table.
Cuándo evitarlo: No sustituye los encabezados de columnas.

<table><caption>Resultados</caption>…</table>

Consultar documentación

<thead>Tablas e interacción

Grupo de filas de encabezado.

Cuándo usarlo: Para organizar encabezados de table.
Cuándo evitarlo: No implica por sí mismo celdas th.

<thead><tr><th scope="col">Nombre</th></tr></thead>

Consultar documentación

<tbody>Tablas e interacción

Grupo de filas de datos.

Cuándo usarlo: Para el cuerpo de table.
Cuándo evitarlo: No como lista general fuera de table.

<tbody><tr><td>Ana</td></tr></tbody>

Consultar documentación

<tfoot>Tablas e interacción

Grupo de filas de resumen.

Cuándo usarlo: Para totales o notas tabulares.
Cuándo evitarlo: No es el footer de la página.

<tfoot><tr><td>Total</td><td>100</td></tr></tfoot>

Consultar documentación

<tr>Tablas e interacción

Fila de una tabla.

Cuándo usarlo: Dentro de table o sus grupos de filas.
Cuándo evitarlo: No para filas visuales de Grid.

<tr><td>Ana</td><td>9</td></tr>

Consultar documentación

<th>Tablas e interacción

Celda de encabezado.

Cuándo usarlo: Con scope o asociaciones de encabezados apropiadas.
Cuándo evitarlo: No uses td en todos los encabezados.

<th scope="col">Precio</th>

Consultar documentación

<td>Tablas e interacción

Celda de datos.

Cuándo usarlo: Dentro de tr.
Cuándo evitarlo: No para títulos de columna.

<td>15 €</td>

Consultar documentación

<colgroup>Tablas e interacción

Agrupa columnas para aplicar propiedades limitadas.

Cuándo usarlo: Dentro de table antes de los grupos de filas.
Cuándo evitarlo: No permite estilizar todas las propiedades de las celdas.

<colgroup><col span="2"></colgroup>

Consultar documentación

<col>Tablas e interacción

Representa columnas de una tabla.

Cuándo usarlo: Dentro de colgroup.
Cuándo evitarlo: No contiene celdas ni texto.

<colgroup><col class="precio"></colgroup>

Consultar documentación

<details>Tablas e interacción

Contenido expandible nativo.

Cuándo usarlo: Para información secundaria consultable.
Cuándo evitarlo: No ocultes pasos esenciales sin motivo.

<details><summary>Más información</summary><p>Contenido</p></details>

Consultar documentación

<summary>Tablas e interacción

Etiqueta que abre o cierra details.

Cuándo usarlo: Como primer hijo de details.
Cuándo evitarlo: No como botón genérico fuera de details.

<details><summary>Ver ejemplo</summary><p>Ejemplo</p></details>

Consultar documentación

<dialog>Tablas e interacción

Diálogo o ventana modal.

Cuándo usarlo: Con showModal() para modal y cierre accesible.
Cuándo evitarlo: No uses solo open esperando bloqueo modal.

<dialog id="aviso"><p>Información</p><form method="dialog"><button>Cerrar</button></form></dialog>

Consultar documentación

<script>Scripts y componentes

Carga o contiene código o datos estructurados.

Cuándo usarlo: Con defer para scripts clásicos externos o type=module.
Cuándo evitarlo: No insertes código externo no confiable.

<script src="js/app.js" defer></script>

Consultar documentación

<noscript>Scripts y componentes

Alternativa cuando los scripts no están activos.

Cuándo usarlo: Para informar de una funcionalidad dependiente de JS.
Cuándo evitarlo: No reemplaza accesibilidad o contenido básico.

<noscript>Activa JavaScript para el laboratorio.</noscript>

Consultar documentación

<template>Scripts y componentes

Fragmento inerte que puede clonarse.

Cuándo usarlo: Para estructura repetida con datos dinámicos.
Cuándo evitarlo: No esperes verlo hasta insertarlo en el documento.

<template id="tarjeta"><article><h2></h2></article></template>

Consultar documentación

<slot>Scripts y componentes

Punto de inserción en Shadow DOM.

Cuándo usarlo: Dentro de componentes web.
Cuándo evitarlo: No funciona como hueco normal fuera de Shadow DOM.

<slot name="titulo">Título predeterminado</slot>

Consultar documentación

<ins>Scripts y componentes

Contenido añadido en una edición.

Cuándo usarlo: Para marcar cambios con contexto.
Cuándo evitarlo: No para cualquier texto subrayado.

<p>Versión <ins datetime="2026-10-06">actualizada</ins>.</p>

Consultar documentación

<del>Scripts y componentes

Contenido eliminado en una edición.

Cuándo usarlo: Para revisiones y comparaciones.
Cuándo evitarlo: Si solo dejó de ser relevante usa s.

<del>Texto anterior</del> <ins>Texto nuevo</ins>

Consultar documentación

Lo que no conviene usar hoy.

Elementos históricos obsoletos o no conformes. Estúdialos para reconocer código antiguo, no para escribir código nuevo.

acronym, applet, basefont, bgsound, big, blink, center, content, dir, font, frame, frameset, image, isindex, keygen, listing, marquee, menuitem, multicol, nextid, nobr, noembed, noframes, param, plaintext, rb, rtc, shadow, spacer, strike, tt, xmp

Prefiere CSS para la presentación, iframe con cuidado para documentos incrustados, abbr para abreviaciones y los controles modernos de formulario. Revisa la alternativa de cada elemento en la referencia oficial antes de migrar código.

CAMBIA · EJECUTA · OBSERVA

Tu laboratorio de HTML

Edita el ejemplo y pulsa Ejecutar. El resultado y el código permanecen separados.

Código editable

HTMLCSS

Resultado en el navegador

Vista previa

Consola del ejemplo

Solo ejecuta código que entiendas. La vista previa está aislada del sitio. Los cambios del editor no se guardan al cerrar la página.

Consola y comportamiento

HTML

¿Qué es HTML?

Cómo se construye un elemento

Tu primer documento

Buenas prácticas desde el principio

1. Completa el head

2. Entiende meta description

3. Organiza el body con significado

4. Prueba y comprueba

La propuesta de la web

HTML 2.0

HTML 3.2 y 4

HTML5 y Living Standard

Código editable

Consola del ejemplo