Unidad 3 - HTML5 y SEO

HTML5 incorpora nuevas etiquetas semánticas, multimedia, formularios avanzados y herramientas de accesibilidad y SEO. En esta unidad aprenderás audio, vídeo, formularios modernos, barras de progreso, atributos ARIA y etiquetas meta para posicionamiento web.

3.1 Audio en HTML5

audio source multimedia

HTML5 permite insertar audio directamente en la web sin necesidad de plugins externos.

Etiqueta <audio>

<audio src="musica.mp3" controls> </audio>

Atributos importantes

Atributo Función
src Ruta del audio
controls Muestra controles del reproductor
autoplay Reproduce automáticamente
loop Reproduce en bucle

Uso de <source>

<audio controls> <source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> Tu navegador no soporta audio HTML5 </audio>

Formatos compatibles

  • MP3
  • OGG
  • WAV
  • ACC
  • OPUS
Pregunta típica: autoplay puede resultar invasivo para el usuario.

Mini-test

1. ¿Qué atributo muestra el reproductor?

3.2 Video en HTML5

video youtube

HTML5 permite insertar vídeos de forma nativa mediante la etiqueta <video>.

Vídeo básico

<video src="video.mp4" controls> </video>

Varios formatos

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Tu navegador no soporta vídeo. </video>

Atributos importantes

Atributo Función
controls Controles multimedia
autoplay Reproducción automática
loop Repetición infinita
src Archivo de vídeo

Insertar vídeo de YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO" allowfullscreen> </iframe>

Formatos compatibles

  • MP4
  • WEBM
  • OGG
MP4 es el formato más utilizado y compatible.
Pregunta frecuente: controls NO reproduce automáticamente el vídeo.

Mini-test

1. ¿Qué etiqueta permite insertar vídeos externos como YouTube?

3.3 Barras de progreso

progress HTML5

La etiqueta <progress> permite representar visualmente el progreso de una tarea.

Ejemplo básico

<label for="carga">Carga:</label> <progress id="carga" value="70" max="100"> 70% </progress>

Atributos importantes

Atributo Uso
value Valor actual
max Valor máximo
min Valor mínimo

Ejemplo práctico

<progress value="40" max="100"> </progress>
Muy usado para descargas, cargas de archivos y procesos.
value siempre debe estar entre min y max.

Mini-test

1. ¿Qué atributo indica el progreso actual?

3.4 Formularios HTML5

input required placeholder

HTML5 incorpora nuevos tipos de campos y atributos avanzados para mejorar la experiencia del usuario.

Nuevos tipos de input

Tipo Uso
email Correo electrónico
date Fecha
number Números
range Barra deslizante
color Selector de color

Ejemplo completo

<form> Nombre: <input type="text" placeholder="Tu nombre" required > <br><br> Correo: <input type="email" autocomplete="email" required > <br><br> Edad: <input type="number" min="1" max="120" > <br><br> <input type="submit"> </form>

Atributos importantes

  • required → campo obligatorio
  • placeholder → texto de ayuda
  • autocomplete → autocompletar
  • autofocus → foco automático
  • readonly → solo lectura
  • disabled → desactivado

Textarea

<textarea name="mensaje"> </textarea>

Select y option

<select> <option>Rojo</option> <option>Azul</option> </select>
method="post" es más seguro que GET.

Mini-test

1. ¿Qué atributo hace obligatorio un campo?

3.5 Etiqueta ARIA

Accesibilidad aria-label

WAI-ARIA mejora la accesibilidad para personas con discapacidad visual.

¿Qué es aria-label?

aria-label proporciona una descripción accesible para lectores de pantalla.

Ejemplo en botón

<button aria-label="Buscar"> 🔍 </button>

Ejemplo en input

<input type="search" aria-label="Buscar en el sitio" >

Buenas prácticas

  • Usar descripciones claras.
  • No repetir texto visible.
  • Complementa la accesibilidad.
  • No sustituye completamente al contenido visual.
aria-label mejora accesibilidad, pero NO influye directamente en SEO.

Mini-test

1. ¿Para qué sirve aria-label?

3.6 Etiquetas SEO

meta SEO responsive

Las etiquetas meta ayudan a los navegadores y motores de búsqueda a comprender mejor una página web.

Meta charset

<meta charset="UTF-8">

Permite usar caracteres especiales y distintos idiomas.

Viewport responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

Descripción SEO

<meta name="description" content="Curso completo HTML5" >

Keywords

<meta name="keywords" content="HTML5, SEO, formularios" >

Robots

<meta name="robots" content="index, follow" >

Autor

<meta name="author" content="Tu nombre" >

Hreflang

<link rel="alternate" href="https://ejemplo.com/es/" hreflang="es" >
Etiqueta Función
description Descripción SEO
viewport Responsive móvil
robots Indexación
keywords tiene poca importancia actualmente en SEO moderno.

Mini-test

1. ¿Qué meta etiqueta hace responsive una web?

Unidad 3 completada · HTML5 y SEO dominados 🚀