Volver a Materias

Curso de HTML5: Domina el lenguaje fundamental para la web

Aprende la estructura semántica, formularios avanzados y multimedia

⏳ Duración: 4 semanas

🟢 Nivel: Principiante

Certificación disponible

Contenido del curso

Introducción a HTML5
Estructura Semántica
Formularios Avanzados
Multimedia en HTML5
Recursos Adicionales

1️⃣ Introducción a HTML5 📖

HTML5 es la quinta revisión importante del lenguaje básico de la World Wide Web. Publicado en octubre de 2014, HTML5 incorpora características nuevas y mejoras significativas respecto a su predecesor HTML4.

¿Por qué HTML5?

Semántica mejorada: Nuevas etiquetas que dan mayor significado a las secciones del documento.
Compatibilidad móvil: Diseñado teniendo en cuenta dispositivos móviles y tablets.
Gráficos y multimedia: Soporte nativo para contenido multimedia sin plugins.
Rendimiento mejorado: Mejoras en el almacenamiento y la conectividad.

Estructura básica de un documento HTML5

Todo documento HTML5 comienza con la declaración <!DOCTYPE html> que indica al navegador que estamos utilizando HTML5.

Estructura básica HTML5

<!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 HTML5</title>
</head>
<body>
    <header>
        <h1>Bienvenido a HTML5</h1>
    </header>
    <main>
        <p>HTML5 es el estándar moderno para el desarrollo web.</p>
    </main>
</body>
</html>

Vista previa

Bienvenido a HTML5

HTML5 es el estándar moderno para el desarrollo web.

2️⃣ Estructura Semántica 🏗️

Una de las mayores innovaciones de HTML5 es la introducción de elementos semánticos que describen claramente su significado tanto para el navegador como para el desarrollador.

<header>

Define la cabecera de un documento o sección. Típicamente contiene el logotipo, título y navegación principal.

<nav>

Define una sección diseñada para contener enlaces de navegación principales.

<main>

Especifica el contenido principal del documento. Solo debe existir uno por página.

<article>

Define contenido independiente y autónomo que podría distribuirse por separado.

<section>

Define una sección temática dentro del documento (capítulos, pestañas, etc).

<aside>

Define contenido indirectamente relacionado con el contenido principal (barras laterales).

<footer>

Define el pie de página de un documento o sección.

Ejemplo de estructura semántica

Veamos un ejemplo completo que utiliza etiquetas semánticas para estructurar una página web:

Estructura semántica completa

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog de Tecnología</title>
</head>
<body>
    <header>
        <h1>Blog de Tecnología</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Artículos</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Inteligencia Artificial en 2024</h2>
                <time datetime="2024-05-20">Publicado: 20 de Mayo, 2024</time>
            </header>
            
            <section>
                <h3>Introducción a la IA</h3>
                <p>La inteligencia artificial ha avanzado significativamente...</p>
            </section>
            
            <section>
                <h3>Aplicaciones actuales</h3>
                <p>Actualmente la IA se utiliza en diversos campos...</p>
            </section>
            
            <footer>
                <p>Autor: Juan Pérez</p>
            </footer>
        </article>
        
        <aside>
            <h3>Artículos relacionados</h3>
            <ul>
                <li><a href="#">Machine Learning en 2024</a></li>
                <li><a href="#">El futuro de la automatización</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2024 Blog de Tecnología. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Diagrama de estructura HTML5

header

h1: Blog de Tecnología

nav

Enlaces de navegación

main

article

header

h2: Título de artículo

section

Contenido de sección

footer

Información de autor

aside

Contenido relacionado

3️⃣ Formularios Avanzados 📝

HTML5 introdujo numerosas mejoras en la gestión de formularios, incluyendo nuevos tipos de input, validación nativa y atributos funcionales.

Nuevos tipos de input

email

<input type="email">

number

<input type="number">

range

<input type="range">

date

<input type="date">

color

<input type="color">

search

<input type="search">

tel

<input type="tel">

url

<input type="url">

Atributos de validación

HTML5 incorpora validación de formularios del lado del cliente sin necesidad de JavaScript:

required: Hace que un campo sea obligatorio
pattern: Permite validar con expresiones regulares
min y max: Define valores mínimos y máximos
minlength y maxlength: Limita la longitud del texto

Ejemplo de formulario con validación nativa

Formulario HTML5 con validación

<form id="registroForm">
    <div class="form-group">
        <label for="nombre">Nombre completo:</label>
        <input type="text" id="nombre" required minlength="3" maxlength="50">
    </div>
    
    <div class="form-group">
        <label for="email">Correo electrónico:</label>
        <input type="email" id="email" required>
    </div>
    
    <div class="form-group">
        <label for="telefono">Teléfono:</label>
        <input type="tel" id="telefono" pattern="[0-9]{9}" placeholder="123456789">
        <span class="form-hint">Formato: 9 dígitos sin espacios</span>
    </div>
    
    <div class="form-group">
        <label for="edad">Edad:</label>
        <input type="number" id="edad" min="18" max="120">
    </div>
    
    <div class="form-group">
        <label for="fecha">Fecha de nacimiento:</label>
        <input type="date" id="fecha" required>
    </div>
    
    <div class="form-group">
        <label for="sitio">Sitio web:</label>
        <input type="url" id="sitio" placeholder="https://ejemplo.com">
    </div>
    
    <button type="submit">Enviar formulario</button>
</form>

Prueba el formulario

4️⃣ Multimedia en HTML5 🎥🎵

HTML5 revolucionó la web al introducir elementos nativos para multimedia, eliminando la necesidad de plugins como Flash para reproducir audio y video.

Elemento <video>

Permite insertar videos directamente en la página web con controles nativos del navegador.

Ejemplo de video

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tu navegador no soporta el elemento de video.
</video>

Atributos principales:

controls: Muestra los controles de reproducción
autoplay: Reproduce automáticamente al cargar
loop: Repite el video al finalizar
muted: Inicia el video sin sonido
poster: Imagen de previsualización

Elemento <audio>

Permite reproducir archivos de audio directamente en la página web.

Ejemplo de audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta el elemento de audio.
</audio>

Atributos principales:

controls: Muestra los controles de reproducción
autoplay: Reproduce automáticamente al cargar
loop: Repite el audio al finalizar
muted: Inicia el audio sin sonido
preload: Controla la precarga

Ejemplo práctico de integración multimedia

Reproductor de video HTML5

Integración de YouTube en HTML5

<iframe width="560" height="315" 
       src="https://www.youtube.com/embed/5jFN7NVl0xk" 
       title="Introducción a HTML5" 
       frameborder="0" 
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
       allowfullscreen></iframe>