≡En resumen
- Una página HTML5 empieza con <!DOCTYPE html>, la etiqueta html con su atributo lang y un head con charset, viewport y title.
- Los elementos semánticos header, nav, main, section, article y footer sustituyen a los div genéricos.
- Las imágenes necesitan alt, width y height; loading="lazy" retrasa la carga de las que no se ven al principio.
- HTML5 valida formularios sin JavaScript con type="email", type="date" o required.
- Antes de publicar, valida el código y revisa la página en móvil.
01 ¿Qué vas a aprender en este tutorial de HTML5?
«HTML5» es el nombre popular del HTML moderno, que hoy se publica como HTML Living Standard. Si nunca has visto una etiqueta, empieza por el HTML básico, donde se explica qué son elementos, etiquetas y atributos. Aquí damos eso por sabido y vamos directos a construir.
- ✓Un editor de código, por ejemplo Visual Studio Code, o el Bloc de notas.
- ✓Un navegador actualizado: Chrome, Firefox, Safari o Edge.
- ✓Una carpeta vacía para el proyecto, llamada por ejemplo panaderia.
- ✓Una imagen y, si quieres, un vídeo corto en MP4 para las pruebas.
02 Paso 1: crea el archivo y la estructura básica de HTML5
Abre tu editor HTML, crea un archivo llamado index.html dentro de la carpeta del proyecto y escribe este esqueleto. Es el mínimo que toda página HTML5 debería tener.
<!DOCTYPE html><html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Panadería Lucía | Pan artesano en Valencia</title> <meta name="description" content="Pan de masa madre y bollería artesana."> <link rel="stylesheet" href="estilos.css"> </head> <body> </body></html>
| Línea | Para qué sirve |
|---|---|
| <!DOCTYPE html> | Activa el modo estándar del navegador. Es la declaración del HTML moderno |
| html lang="es" | Indica el idioma a navegadores, traductores, lectores de pantalla y buscadores |
| meta charset="utf-8" | Codificación de caracteres; evita problemas con tildes y eñes |
| meta name="viewport" | Hace que la página se adapte al ancho del móvil |
| title | Texto de la pestaña y, normalmente, del título en los resultados de Google |
| meta name="description" | Resumen que Google puede mostrar bajo el título |
| link rel="stylesheet" | Enlaza el archivo de estilos CSS |
03 Paso 2: organiza la página con elementos semánticos
Antes de HTML5, las páginas se construían con decenas de div con clases como cabecera o menu. HTML5 introdujo elementos con significado propio que los navegadores, los buscadores y las tecnologías de apoyo entienden sin necesidad de adivinar.
<body> <header> <p>Panadería Lucía</p> <nav> <a href="#productos">Productos</a> <a href="#contacto">Contacto</a> </nav> </header> <main> <h1>Pan artesano de masa madre</h1> <section id="productos">...</section> <section id="contacto">...</section> </main> <footer> <p>© 2026 Panadería Lucía</p> </footer></body>
header y footer
Cabecera y pie de la página o de una sección.
nav
Bloque de navegación principal.
main
Contenido principal; solo uno visible por página.
section y article
Una sección temática con su título, y un contenido independiente, como una ficha o una entrada.
04 Paso 3: añade títulos, texto, imágenes y enlaces
Usa un único h1 con el tema de la página y baja de nivel con h2 y h3 sin saltarte escalones. En las imágenes, el atributo alt describe lo que se ve, y width y height reservan el espacio para que el contenido no salte mientras cargan.
<section id="productos"> <h2>Nuestros panes</h2> <article> <h3>Hogaza de centeno</h3> <img src="hogaza.webp" alt="Hogaza de centeno cortada por la mitad" width="800" height="600" loading="lazy"> <p>Fermentación de <strong>24 horas</strong> y harina ecológica.</p> </article></section>
05 Paso 4: crea un formulario con validación de HTML5
Una de las mejoras más prácticas de HTML5 son los nuevos tipos de campo. Con type="email" el navegador comprueba que el texto parezca un correo, con type="date" muestra un calendario y con required impide enviar el formulario vacío, todo sin una línea de JavaScript.
<form action="/enviar" method="post"> <label for="nombre">Nombre</label> <input id="nombre" name="nombre" type="text" required> <label for="email">Correo</label> <input id="email" name="email" type="email" required> <label for="fecha">Fecha de recogida</label> <input id="fecha" name="fecha" type="date"> <button type="submit">Reservar</button></form>
06 Paso 5: inserta vídeo y audio sin complementos
Antes de HTML5, reproducir vídeo en una web exigía complementos externos. Ahora basta con los elementos video y audio. El atributo controls muestra los botones del reproductor y poster define la imagen que se ve antes de darle al play.
<video controls width="640" poster="portada.jpg"> <source src="obrador.mp4" type="video/mp4"> Tu navegador no puede reproducir este vídeo.</video>
canvas
Lienzo para dibujar gráficos y animaciones con JavaScript.
Almacenamiento local
localStorage y sessionStorage guardan datos en el navegador del usuario.
API de historial
Permite cambiar la URL sin recargar la página, la base de muchas aplicaciones de una sola página.
07 Paso 6: enlaza el CSS y valida el código
HTML define la estructura; el aspecto lo pone una hoja de estilos CSS. Crea estilos.css en la misma carpeta: la línea link del paso 1 ya lo enlaza. Después pasa la página por un validador de código HTML para detectar etiquetas sin cerrar o atributos mal escritos.
-
1
Abre la página en el navegador
Doble clic en index.html o arrástralo a una pestaña.
-
2
Prueba en móvil
Con las herramientas de desarrollo (F12) activa la vista de dispositivo.
-
3
Valida
Sube el archivo o pega el código en validator.w3.org y corrige los errores.
-
4
Revisa la accesibilidad
Navega solo con el teclado y comprueba que todo se puede alcanzar y usar.
08 Paso 7: publica tu página HTML5
Una página estática como esta se puede publicar en cualquier alojamiento: sube la carpeta por FTP o por el gestor de archivos de tu hosting, o usa un servicio de alojamiento estático. Cuando el proyecto crezca y necesites formularios que guarden datos, pagos o un panel de gestión, ya no hablamos de una página sino de una aplicación, y ahí entra una agencia de desarrollo web. Y si lo que necesitas es la web de tu negocio terminada, con diseño, textos y SEO, es mejor apostar por un diseño de páginas web profesionales que partir de cero.
Si tu web es de una empresa, recuerda también las obligaciones legales de accesibilidad web, que empiezan precisamente por un HTML bien estructurado.
- ✓Un solo h1 y títulos en orden.
- ✓alt en todas las imágenes con contenido.
- ✓title y meta description escritos a mano.
- ✓Formulario con label en cada campo.
- ✓Código validado sin errores.
- ✓Página revisada en móvil y con teclado.
Preguntas frecuentes sobre HTML5 Tutorial
Es el nombre popular del HTML moderno, cuya gran revisión se convirtió en recomendación del W3C en 2014. Hoy el estándar vigente es el HTML Living Standard del WHATWG.
Crea un archivo index.html con un editor de texto, escribe el esqueleto básico y ve añadiendo elementos mientras lo abres en el navegador. Construir una página real enseña más que memorizar etiquetas.
<!DOCTYPE html>, la etiqueta html con lang, un head con meta charset, meta viewport y title, y un body con el contenido visible.
HTML5 añadió elementos semánticos (header, nav, main, article), vídeo y audio nativos, canvas y nuevos tipos de campos de formulario. En la práctica, todo el HTML que se escribe hoy es HTML5.
No para empezar. HTML5 funciona solo; CSS le da el aspecto y JavaScript el comportamiento, y conviene aprenderlos después, en ese orden.
Lo básico para montar una página como la de este tutorial se aprende en pocas sesiones de práctica. Dominar la semántica, la accesibilidad y los formularios lleva más tiempo y proyectos reales.
En tu propio navegador, abriendo el archivo local. Para comprobar que el código es correcto, usa el validador gratuito del W3C.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗