Aprende a estructurar contenido web con HTML5, desde elementos básicos hasta APIs modernas
HTML5 es la quinta versión del lenguaje de marcado HyperText Markup Language (HTML). Introduce nuevos elementos semánticos, APIs poderosas y mejor soporte para multimedia, haciendo que el desarrollo web sea más fácil y eficiente.
Todo documento HTML5 debe comenzar con la declaración DOCTYPE y contener las etiquetas fundamentales:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es mi primer documento HTML5</p>
</body>
</html>HTML5 introduce elementos semánticos que describen claramente su significado tanto para el navegador como para el desarrollador:
Encabezado de página o sección
Enlaces de navegación
Contenido principal
Contenido independiente
Sección temática
Contenido relacionado
Pie de página
Contenido multimedia
<article>
<header>
<h2>Título del artículo</h2>
<p>Por Juan Pérez - 12 de Febrero, 2026</p>
</header>
<section>
<p>Contenido del artículo...</p>
</section>
<footer>
<p>Tags: HTML5, Tutorial</p>
</footer>
</article>HTML5 añade nuevos tipos de input y atributos de validación que mejoran la experiencia del usuario:
<form>
<!-- Email con validación -->
<input type="email" placeholder="[email protected]" required>
<!-- Número con rango -->
<input type="number" min="1" max="100">
<!-- Fecha -->
<input type="date">
<!-- Color -->
<input type="color">
<!-- Rango -->
<input type="range" min="0" max="100">
<button type="submit">Enviar</button>
</form>Los navegadores modernos validan automáticamente los formularios sin necesidad de JavaScript adicional.
HTML5 permite incrustar audio y video sin necesidad de plugins:
<!-- Video -->
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no soporta video HTML5.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Tu navegador no soporta audio HTML5.
</audio>
El elemento <canvas> permite dibujar gráficos mediante JavaScript:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Dibujar un rectángulo
ctx.fillStyle = '#667eea';
ctx.fillRect(50, 50, 150, 100);
// Dibujar un círculo
ctx.beginPath();
ctx.arc(300, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#f093fb';
ctx.fill();
</script>HTML5 incluye varias APIs JavaScript que amplían las capacidades del navegador:
Obtener la ubicación del usuario
navigator.geolocation.getCurrentPosition()
Almacenar datos localmente
localStorage.setItem('key', 'value')
Ejecutar scripts en segundo plano
new Worker('worker.js')
Arrastrar y soltar elementos
element.draggable = true