🎯 Objetivo del tema
El administrador aún no ha insertado un video para esta sección.
🗺️ Mapa del tema
HTML5 llegó en 2014 y trajo una revolución silenciosa: por primera vez las etiquetas describían el SIGNIFICADO del contenido, no solo su apariencia. En este tema vas a aprender a usar el vocabulario correcto para que tu código sea leído igual por humanos, navegadores, buscadores y personas con discapacidad.
Por qué dejar de usar <div> para todo y empezar a usar etiquetas con significado.
header, nav, main, section, article, aside, footer: el esqueleto de cualquier sitio.
h1–h6, p, strong, em, blockquote, code, time: cómo dar énfasis correcto.
img, figure, figcaption, audio, video: contenido visual con descripción.
La etiqueta <a>: cómo conectar tu página con el mundo (y contigo misma).
DOCTYPE, lang, charset, viewport: los cimientos que sostienen todo lo demás.
1.3.1 De HTML4 a HTML5: el cambio de mentalidad
En HTML4, para construir una página se usaba casi exclusivamente la etiqueta <div> con clases de CSS. La página quedaba visualmente perfecta, pero para una máquina (buscador, lector de pantalla) era indistinguible de otra página. HTML5 introdujo etiquetas que describen qué es cada parte, no cómo se ve.
HTML5 (recomendación oficial del W3C, 2014) no es solo una versión nueva: es un cambio de paradigma. Pasamos de un HTML centrado en la presentación a un HTML centrado en el SIGNIFICADO. Esto trajo tres beneficios inmediatos:
- Accesibilidad: los lectores de pantalla anuncian 'navegación principal' en vez de 'div con clase nav'.
- SEO: Google y otros buscadores entienden la estructura y posicionan mejor tu página.
- Mantenimiento: tu equipo (y tú dentro de 6 meses) entiende el código sin descifrar clases de CSS.
HTML4 (antes)
- <div class="header">
- <div class="nav">
- <div class="main">
- <div class="footer">
HTML5 (ahora)
- <header>
- <nav>
- <main>
- <footer>
Misma apariencia visual, pero ahora la máquina sabe qué es cada zona: header, nav, main, footer. Eso lo aprovechan los lectores de pantalla, los buscadores y cualquier herramienta que lea HTML.
El administrador aún no ha insertado un video para esta sección.
1.3.2 Anatomía semántica de una página
Piensa en una página web como un periódico: tiene cabecera, menú de secciones, contenido principal, notas al margen y pie de página. HTML5 tiene una etiqueta para cada una de esas partes. Aprenderlas de memoria es trivial; lo importante es entender CUÁNDO usar cada una.
Las 7 etiquetas estructurales fundamentales
| Etiqueta | Qué contiene | Cuántas por página |
|---|---|---|
| <header> | Encabezado de la página o de una sección: logo, título, navegación. | Una o varias. |
| <nav> | Bloque de enlaces de navegación principal. | Una o varias. |
| <main> | Contenido único e importante. Solo una por página. | UNA y solo una. |
| <section> | Sección temática con título propio. | Varias. |
| <article> | Contenido independiente y reutilizable (post, noticia, tarjeta). | Varias. |
| <aside> | Contenido relacionado pero secundario (sidebar, notas al margen). | Una o varias. |
| <footer> | Pie de página o de sección: copyright, enlaces legales, contacto. | Una o varias. |
Esqueleto mínimo de una página HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web</title>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sección principal</h2>
<p>Contenido importante de la página.</p>
</section>
<article>
<h2>Artículo independiente</h2>
<p>Este contenido tiene sentido por sí solo.</p>
</article>
</main>
<aside>
<h3>Notas al margen</h3>
<p>Información complementaria.</p>
</aside>
<footer>
<p>© 2026 Mi sitio web</p>
</footer>
</body>
</html>Esqueleto HTML5 semántico completo
El administrador aún no ha insertado un video para esta sección.
1.3.3 Etiquetas de texto con significado
HTML no es solo estructura: también tiene etiquetas para dar significado a fragmentos de texto. Algunas solo cambian la apariencia (cosa que hoy se hace con CSS), pero otras transmiten información que las máquinas pueden usar para entender el contenido.
Encabezados: la jerarquía importa
Los encabezados van de <h1> (más importante) a <h6> (menos importante). No se usan para 'hacer texto grande' (eso es CSS), sino para establecer la jerarquía del documento. Una página debe tener UN solo <h1> y los demás deben seguir un orden lógico: <h2> para secciones principales, <h3> para subsecciones, etc.
<h1>El título principal de la página</h1>
<h2>Sección 1</h2>
<p>Contenido de la sección 1...</p>
<h3>Subsección 1.1</h3>
<p>...</p>
<h2>Sección 2</h2>
<p>Contenido de la sección 2...</p>Jerarquía correcta de encabezados
Énfasis y citas
| Etiqueta | Significado | Equivalente NO semántico |
|---|---|---|
| <strong> | Énfasis fuerte (importante). Los lectores de pantalla lo anuncian en voz alta. | <b> solo pone negrita visual. |
| <em> | Énfasis leve (matiz). Cambia la entonación al leerlo. | <i> solo pone cursiva visual. |
| <blockquote> | Cita en bloque de otra fuente. Agrega sangría por defecto. | Un <p> con padding manual. |
| <q> | Cita corta en línea. | Comillas tipográficas a mano. |
| <code> | Fragmento de código en línea (letra monoespaciada). | <span> con font-family. |
| <pre> | Texto preformateado (respeta espacios y saltos). | <p> con white-space: pre. |
| <time> | Fecha u hora con formato legible para máquinas. | Un <span> con texto suelto. |
El administrador aún no ha insertado un video para esta sección.
1.3.4 Imágenes, figuras y medios
Toda imagen en una página web debe tener un propósito. Si es decorativa, se marca como tal para que el lector de pantalla la ignore. Si aporta información, debe tener una descripción. HTML5 introdujo <figure> y <figcaption> para asociar imagen con su pie de foto de forma semántica.
La etiqueta <img>
El atributo alt (texto alternativo) es OBLIGATORIO. Es lo que lee el lector de pantalla cuando un usuario no vidente navega la página, y lo que muestra el navegador si la imagen no carga. Si la imagen es puramente decorativa, alt debe ser una cadena vacía (alt="") para indicar 'ignora esto'.
<!-- Imagen con significado -->
<img src="grafico-ventas.png" alt="Gráfico de barras: ventas de 2025 superaron a 2024 en un 30%.">
<!-- Imagen decorativa (un patrón de fondo, por ejemplo) -->
<img src="patron-fondo.png" alt="">Buenas prácticas con alt
<figure> y <figcaption>: imagen + pie
<figure>
<img src="paisaje.jpg" alt="Cordillera de los Andes al atardecer">
<figcaption>Cordillera de los Andes al atardecer, vista desde Mendoza.</figcaption>
</figure>Imagen con pie de foto semántico
Audio y video nativos (sin plugins)
HTML5 introdujo <audio> y <video> para reproducir medios sin necesitar Flash o plugins externos. Soportan controles nativos, subtítulos, y son accesibles por teclado por defecto.
<!-- Video con subtítulos y controles -->
<video controls width="640">
<source src="intro.mp4" type="video/mp4">
<track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español" default>
Tu navegador no soporta video HTML5.
</video>
<!-- Audio simple -->
<audio controls src="podcast-episodio-1.mp3">
Tu navegador no soporta audio HTML5.
</audio>Video y audio accesibles
El administrador aún no ha insertado un video para esta sección.
1.3.5 Enlaces: la web se construye con <a>
La etiqueta <a> (anchor) es lo que hace que la web sea una 'red'. Sin enlaces, cada página sería una isla. Un enlace bien escrito indica a dónde va, cómo se abrirá, y opcionalmente da contexto adicional al usuario.
Sintaxis básica
<!-- Enlace externo (a otro sitio) -->
<a href="https://developer.mozilla.org/es/">MDN Web Docs</a>
<!-- Enlace interno (a otra página de tu sitio) -->
<a href="/contacto.html">Página de contacto</a>
<!-- Enlace ancla (a una sección de la misma página) -->
<a href="#seccion-3">Ir a la sección 3</a>
<!-- Enlace de correo -->
<a href="mailto:hola@misitio.com">Escríbenos</a>
<!-- Enlace de teléfono -->
<a href="tel:+525555555555">Llámanos</a>Tipos de enlaces
Atributos importantes
| Atributo | Para qué sirve | Ejemplo |
|---|---|---|
| target="_blank" | Abre el enlace en pestaña nueva. | <a href="..." target="_blank"> |
| rel="noopener noreferrer" | Seguridad al abrir en nueva pestaña. | <a href="..." target="_blank" rel="noopener"> |
| download | Indica que el enlace descarga un archivo. | <a href="cv.pdf" download> |
| title="..." | Tooltip al pasar el cursor. | <a href="..." title="Abre la documentación"> |
| hreflang="es" | Idioma del recurso enlazado. | <a href="..." hreflang="es"> |
El administrador aún no ha insertado un video para esta sección.
1.3.6 Los cimientos: DOCTYPE, lang, charset, viewport
Hay 4 elementos que deben ir en TODA página HTML5 moderna. Sin ellos, tu página se rompe, se ve mal, o se comporta de forma impredecible. Son los cimientos: lo demás no se sostiene sin esto.
Los 4 cimientos en orden
<!DOCTYPE html> <!-- 1. Le dice al navegador que es HTML5 -->
<html lang="es"> <!-- 2. Idioma del documento -->
<head>
<meta charset="UTF-8"> <!-- 3. Codificación de caracteres (tildes, eñes) -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0"> <!-- 4. Responsive -->
<title>Mi página</title>
</head>Los 4 cimientos de toda página HTML5
Qué pasa si falta cada uno
| Falta... | Consecuencia visible |
|---|---|
| <!DOCTYPE html> | El navegador entra en 'modo quirks': imita HTML viejo y CSS se rompe. |
| lang="es" | Lectores de pantalla usan acento incorrecto. SEO no sabe el idioma. |
| charset="UTF-8" | Las tildes y eñes se ven como caracteres raros: 'ñ' en vez de 'ñ'. |
| viewport | En móvil la página se ve diminuta y hay que hacer zoom. |
El administrador aún no ha insertado un video para esta sección.
📚 Contenido ampliado
Material adicional, referencias externas verificadas y ejemplos extendidos.
🤖 AI Mission
La IA puede revisar tu HTML mejor que tú, pero solo si tú escribes la primera versión.
Misión: Escribe a mano una página HTML5 semántica sobre un tema que te guste (puede ser tu mascota, tu comida favorita, tu videojuego preferido). Después pídele a la IA que la audite: que revise si la jerarquía de encabezados es correcta, si todas las imágenes tienen alt, si la estructura semántica es coherente. Compara sus sugerencias con tu intención original antes de aplicar cambios.
Pasos sugeridos
- Piensa 5 minutos: ¿qué secciones tendrá tu página? Anótalas en tu cuaderno como lista.
- Escribe el HTML5 a mano: estructura (header, nav, main, sections, footer), al menos 3 imágenes, 2 listas, 1 cita, 1 bloque de código.
- Ábrelo en tu navegador y verifica que se ve bien. Corrige lo evidente.
- Pídele a la IA: 'Audita este HTML: ¿la jerarquía de encabezados es correcta? ¿Faltan atributos alt? ¿La estructura semántica tiene sentido? Dame una lista de mejoras.' Pega tu código.
- Compara las sugerencias de la IA con lo que TÚ querías expresar. ¿Te hizo cambiar el sentido o solo corrigió forma?
- Aplica solo las correcciones que entiendas. Anota en tu cuaderno cuáles NO aplicaste y por qué.
📓 Entregable: Tu archivo HTML5 final + una página de cuaderno titulada 'Auditoría IA' con: lista de correcciones aplicadas, lista de correcciones rechazadas y por qué, y una reflexión de 3 líneas sobre qué aprendiste.
🚫 Errores típicos de razonamiento
Por qué: Es tentador porque ya conoces <div>. Pero si tu página tiene 30 <div> consecutivos sin etiquetas semánticas, un lector de pantalla no sabe dónde está el menú, dónde el contenido, dónde el pie. Y tú mismo, dentro de 6 meses, tampoco lo sabrás sin abrir el CSS para recordar qué clase significaba qué.
Por qué: El <h1> representa el título principal. Solo debe haber UNO por página. Después vienen <h2> (secciones), <h3> (subsecciones), etc. Si saltas de <h1> a <h4>, los lectores de pantalla y Google asumen que te olvidaste encabezados intermedios y la estructura se interpreta como rota.
Por qué: Sin alt, un usuario no vidente no sabe qué hay en la imagen. Y si la imagen no carga, el lector de pantalla dice 'imagen' sin más. Además, Google Images usa alt para entender y posicionar tu imagen. Es el factor #1 de SEO de imágenes. Si la imagen es decorativa, alt="" (cadena vacía) es la forma correcta de decir 'ignorar'.
Por qué: Visualmente se ven casi igual. La diferencia es semántica: <strong> y <em> transmiten IMPORTANCIA y ÉNFASIS que las máquinas pueden entender. <b> y <i> son puramente visuales. Si tu abuelita te está advirtiendo algo importante, ¿pondrías <b> o <strong>? <strong>, porque quieres que se entienda como advertencia.
Por qué: Sin el DOCTYPE, el navegador entra en 'modo quirks' y aplica reglas de HTML4. Tu CSS moderno se rompe sin razón aparente, los tamaños de caja cambian, los márgenes se duplican. Es el error más difícil de diagnosticar porque el navegador no avisa: simplemente se ve mal.
🧪 Laboratorio práctico
Escribe a mano. Valida en línea. Compara con la versión de la IA.
Laboratorio: Página 'Sobre mí' con HTML5 semántico
Objetivo: Crear una página 'Sobre mí' completa, semántica y válida, que incluya header, nav, main con secciones, al menos 2 artículos, aside, footer, imágenes con figure/figcaption, citas, y enlaces. Validarla en el W3C.
Pasos
- Crea una carpeta mi-pagina-sobre-mi y un archivo index.html.
- Escribe el DOCTYPE y los 4 cimientos (lang, charset, viewport, title).
- En el <body> agrega: <header> con tu nombre y <nav> con 3 enlaces (a anclas internas: #quien-soy, #pasatiempos, #contacto).
- Dentro de <main> agrega una <section id='quien-soy'> con un <h2>, un párrafo sobre ti, y una <figure> con tu foto y <figcaption>.
- Agrega una <section id='pasatiempos'> con un <h2> y 2 <article> (tus pasatiempos favoritos), cada uno con <h3>, párrafo e imagen.
- Agrega un <aside> con un <h3> 'Mis cursos favoritos' y una <ul> con 3 items.
- Agrega un <footer> con copyright, un enlace mailto: y un enlace a tu GitHub.
- Incluye al menos 1 <blockquote>, 1 <strong>, 1 <em> y 1 <code> en el contenido.
- Verifica que TODAS las imágenes tengan alt descriptivo (o alt="" si son decorativas).
- Abre la página en tu navegador. Verifica que los enlaces ancla funcionan.
- Ve a https://validator.w3.org/ y valida tu HTML. Corrige cualquier error hasta que diga 'Document checking completed. No errors or warnings to show.'
- Haz commit con Git: 'feat: agrego página sobre mí semántica'.
📓 Entregable: Capturas de: (1) tu página en el navegador, (2) el validador del W3C mostrando 'No errors', (3) el código fuente con la jerarquía de encabezados visible, y (4) el commit en tu repositorio.