Guía Completa de HTML5 para Principiantes

Publicado el 15 de Enero, 2025 | Por TechGuías

HTML5 es la quinta versión del lenguaje de marcado HTML y es la base de toda la web moderna. Si estás comenzando tu viaje en el desarrollo web, esta guía te llevará paso a paso por todos los conceptos fundamentales que necesitas conocer.

¿Qué es HTML5?

HTML5 (HyperText Markup Language 5) es el lenguaje estándar para crear y estructurar contenido en la web. A diferencia de sus predecesores, HTML5 introduce nuevas características que permiten crear sitios web más interactivos y multimedia.

Estructura Básica de un Documento HTML5

Todo documento HTML5 comienza con una estructura básica. Aquí tienes un ejemplo:

<!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>
</body>
</html>

Elementos Semánticos de HTML5

HTML5 introduce elementos semánticos que ayudan a estructurar mejor el contenido:

  • <header>: Encabezado de la página o sección
  • <nav>: Navegación principal
  • <main>: Contenido principal
  • <article>: Contenido independiente
  • <section>: Sección temática
  • <aside>: Contenido relacionado (barra lateral)
  • <footer>: Pie de página

Elementos de Texto Fundamentales

HTML5 ofrece una variedad de elementos para formatear texto:

  • <h1> a <h6>: Encabezados (de mayor a menor importancia)
  • <p>: Párrafos
  • <strong>: Texto importante (negrita semántica)
  • <em>: Texto enfatizado (cursiva semántica)
  • <mark>: Texto resaltado
  • <small>: Texto pequeño
  • <del>: Texto eliminado
  • <ins>: Texto insertado

Enlaces e Imágenes

Los enlaces y las imágenes son fundamentales en HTML5:

<!-- Enlace -->
<a href="https://ejemplo.com">Texto del enlace</a>

<!-- Imagen -->
<img src="imagen.jpg" alt="Descripción de la imagen">

Listas

HTML5 soporta tres tipos de listas:

  • Listas ordenadas (<ol>): Numeradas
  • Listas no ordenadas (<ul>): Con viñetas
  • Listas de definición (<dl>): Términos y definiciones

Formularios

HTML5 mejora significativamente los formularios con nuevos tipos de input:

  • email: Para direcciones de correo
  • url: Para URLs
  • number: Para números
  • date: Para fechas
  • color: Para selección de color
  • range: Para rangos de valores

Multimedia

HTML5 introduce elementos nativos para multimedia:

<!-- Video -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta video HTML5.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Tu navegador no soporta audio HTML5.
</audio>

Atributos Globales Importantes

Algunos atributos que puedes usar en casi cualquier elemento:

  • id: Identificador único
  • class: Clase para CSS
  • data-*: Atributos de datos personalizados
  • hidden: Oculta el elemento
  • contenteditable: Permite edición del contenido

Mejores Prácticas

Para escribir HTML5 de calidad:

  1. Usa elementos semánticos apropiados
  2. Siempre incluye texto alternativo en imágenes
  3. Valida tu código HTML
  4. Usa indentación consistente
  5. Comenta tu código cuando sea necesario
  6. Mantén la estructura limpia y lógica

Conclusión

HTML5 es el fundamento del desarrollo web moderno. Dominar estos conceptos básicos te permitirá crear estructuras sólidas para tus sitios web. Recuerda que la práctica es clave: experimenta con estos elementos y construye proyectos pequeños para reforzar tu aprendizaje.

¿Listo para continuar? Te recomendamos aprender CSS para dar estilo a tus páginas HTML5 y JavaScript para añadir interactividad.