Introducción a HTML5
HTML5 es la última evolución del estándar que define HTML. El término representa dos conceptos diferentes:
- Es una nueva versión del lenguaje HTML, con nuevos elementos, atributos y comportamientos.
- Es un conjunto más amplio de tecnologías que permite el desarrollo de aplicaciones y sitios web más diversos y potentes.
En este tutorial, aprenderás los fundamentos de HTML5 y cómo utilizarlo para crear sitios web modernos y accesibles.
Estructura básica de un documento HTML5
Un documento HTML5 básico tiene la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<!-- Contenido de la página -->
<h1>Hola Mundo</h1>
<p>Este es un párrafo en HTML5.</p>
</body>
</html>Analicemos cada parte:
1. Declaración DOCTYPE
La declaración <!DOCTYPE html> debe ser lo primero en tu documento HTML5, antes de la etiqueta <html>. No es una etiqueta HTML, sino una instrucción para el navegador sobre qué versión de HTML está utilizando la página.
2. Elemento html
El elemento <html> es el elemento raíz de una página HTML y contiene todo el contenido de la página. El atributo lang especifica el idioma del contenido de la página.
3. Elemento head
El elemento <head> contiene metadatos sobre el documento, como el título, enlaces a hojas de estilo, scripts y otros elementos que no se muestran directamente en la página.
4. Elemento meta
Los elementos <meta> se utilizan para proporcionar información adicional sobre la página:
charset: Especifica la codificación de caracteres para el documento HTML.viewport: Controla cómo se muestra la página en dispositivos móviles.
5. Elemento title
El elemento <title> define el título del documento, que se muestra en la barra de título del navegador o en la pestaña de la página.
6. Elemento body
El elemento <body> contiene todo el contenido visible de la página, como texto, imágenes, enlaces, tablas, listas, etc.
Nuevos elementos semánticos en HTML5
HTML5 introdujo varios elementos semánticos nuevos que ayudan a definir la estructura y el contenido de la página:
| Elemento | Descripción |
|---|---|
<header> |
Define el encabezado de una sección o página. |
<nav> |
Define una sección de navegación. |
<main> |
Define el contenido principal de la página. |
<section> |
Define una sección en un documento. |
<article> |
Define un artículo independiente. |
<aside> |
Define contenido secundario relacionado con el contenido que lo rodea. |
<footer> |
Define el pie de página de una sección o página. |
<figure> |
Representa contenido independiente, a menudo con una leyenda. |
<figcaption> |
Define la leyenda para un elemento <figure>. |
Utilizar estos elementos semánticos en lugar de múltiples <div> mejora la accesibilidad, el SEO y hace que tu código sea más fácil de entender y mantener.
Ejemplo de estructura semántica
Veamos un ejemplo de cómo usar estos elementos semánticos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Sitio Web</title>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Título del Artículo</h2>
<p>Publicado el <time datetime="2025-04-19">19 de Abril de 2025</time></p>
</header>
<section>
<h3>Introducción</h3>
<p>Este es el primer párrafo del artículo.</p>
</section>
<section>
<h3>Desarrollo</h3>
<p>Este es el contenido principal del artículo.</p>
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Leyenda de la imagen</figcaption>
</figure>
</section>
<section>
<h3>Conclusión</h3>
<p>Este es el párrafo final del artículo.</p>
</section>
</article>
<aside>
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>Conclusión
HTML5 ofrece muchas ventajas sobre versiones anteriores de HTML, incluyendo mejores elementos semánticos, mejor soporte para multimedia y formularios más avanzados.
Este tutorial cubre los conceptos básicos de HTML5, pero hay mucho más que aprender. En tutoriales futuros, exploraremos otras características de HTML5 como:
- Formularios HTML5 y sus nuevos tipos de entrada
- Audio y video nativos
- Canvas para gráficos y animaciones
- APIs de geolocalización, almacenamiento y más
Recuerda siempre verificar la compatibilidad de las características de HTML5 en los navegadores que deseas soportar usando recursos como Can I Use.
