Ejemplos de HTML5
Aquí tienes algunos ejemplos prácticos de las novedades que introdujo HTML5. Estos ejemplos demuestran cómo HTML5 facilita la creación de estructuras más claras y funcionalidades avanzadas sin la necesidad de plugins o código complejo.
1. Elementos Semánticos para la Estructura
En versiones anteriores de HTML, se utilizaban etiquetas <div> con nombres de clase para definir las diferentes secciones de una página. Con HTML5, se introdujeron etiquetas semánticas que describen el propósito de cada sección, lo que hace el código más legible y ayuda a los motores de búsqueda a entender la estructura.
HTML antiguo:
<div class="header">
<h1>Mi Sitio Web</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</div>
<div class="content">
<div class="article">
<h2>Título de la Noticia</h2>
<p>El contenido de la noticia...</p>
</div>
</div>
HTML5 (semántico):
<header>
<h1>Mi Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</nav>
<main>
<article>
<h2>Título de la Noticia</h2>
<p>El contenido de la noticia...</p>
</article>
</main>
<footer>
<p>© 2024 Mi Empresa</p>
</footer>
2. Multimedia Nativa (<video> y <audio>)
Antes de HTML5, para reproducir un vídeo o un audio en una página web, se dependía de plugins como Adobe Flash. Ahora, con las etiquetas <video> y <audio>, es tan sencillo como incluir la ruta del archivo.
Video:
<video width="640" height="360" controls>
<source src="video-ejemplo.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de vídeo.
</video>
El atributo controls añade los controles de reproducción, pausa y volumen.
Audio:
<audio controls>
<source src="audio-ejemplo.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
3. Nuevos Tipos de Entrada en Formularios
HTML5 introdujo nuevos tipos de input que mejoran la experiencia del usuario y validan la entrada sin necesidad de JavaScript.
Tipos comunes:
<form action="/enviar">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha"><br><br>
<label for="cantidad">Cantidad (1-10):</label>
<input type="number" id="cantidad" name="cantidad" min="1" max="10"><br><br>
<input type="submit" value="Enviar">
</form>
El
inputdetype="email"valida que el texto sea una dirección de correo.El
inputdetype="date"muestra un calendario para una selección fácil.El
inputdetype="number"permite al navegador mostrar un campo con flechas para aumentar o disminuir el valor.
4. Gráficos y Animaciones (<canvas>)
La etiqueta <canvas> crea un lienzo en el que puedes dibujar gráficos, animaciones e incluso juegos usando JavaScript.
HTML:
<canvas id="miCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
JavaScript:
const canvas = document.getElementById("miCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 150, 80); // Dibuja un rectángulo
