HTML5
«HTML5 no es solo una versión del lenguaje de marcado; es la columna vertebral de la web moderna. Desde su lanzamiento, transformó internet de un conjunto de documentos estáticos en una plataforma de aplicaciones interactivas, multimedia y accesibles. En este artículo, exploraremos la anatomía completa de HTML5, detallando cada etiqueta y sus atributos para que domines la estructura de cualquier proyecto web.»
Estructura y Etiquetas de HTML5
Dada la enorme cantidad de etiquetas (existen más de 100), las hemos agrupado por categorías funcionales para tu artículo:
1. Etiquetas de Raíz y Metadatos
Definen la configuración del documento.
<html>: El contenedor raíz. Atributo principal:lang(idioma).<head>: Contenedor de metadatos (no visibles).<meta>: Información sobre el documento. Atributos:charset,name,content.<title>: El nombre de la página que aparece en la pestaña del navegador.<link>: Conecta recursos externos (como CSS). Atributos:rel,href.
2. Etiquetas Semánticas (Estructura)
Introducidas en HTML5 para que los buscadores entiendan el contenido.
<header>: Cabecera de una sección o página.<nav>: Contenedor de enlaces de navegación.<main>: Contenido principal y único del documento.<article>: Contenido independiente y distribuible (ej. un post).<section>: Agrupa contenido temático relacionado.<aside>: Contenido tangencial (barras laterales).<footer>: Pie de página o sección.
3. Etiquetas de Contenido y Texto
<h1>a<h6>: Títulos por orden de jerarquía.<p>: Párrafos de texto.<a>: Hipervínculos. Atributos:href(destino),target(donde abrir).<ul>,<ol>,<li>: Listas desordenadas, ordenadas y sus elementos.<div>: Contenedor genérico de bloque (usar solo si no hay opción semántica).<span>: Contenedor genérico de línea.
4. Multimedia e Interactividad
<img>: Imágenes. Atributos:src(fuente),alt(texto alternativo).<video>: Reproductor de video. Atributos:controls,autoplay,loop,poster.<audio>: Reproductor de sonido. Atributos:src,controls.<canvas>: Para dibujar gráficos y animaciones vía JavaScript.<svg>: Para gráficos vectoriales escalables.
5. Formularios y Entrada de Datos
<form>: Contenedor del formulario. Atributos:action,method.<input>: Campo de entrada. Atributos:type(text, email, password, date, etc.),placeholder,value,required.<button>: Botón ejecutable.<select>y<option>: Listas desplegables.
Atributos Globales (Funcionan en casi todas las etiquetas)
Para tu artículo, es vital mencionar que estos atributos se pueden aplicar a cualquier elemento:
id: Identificador único en toda la página.class: Identificador para grupos de elementos (usado en CSS).style: Reglas de diseño CSS directas.title: Información extra que aparece al pasar el ratón.data-*: Atributos personalizados para almacenar datos privados del desarrollador.
Recursos recomendados para ampliar
Para profundizar en la documentación técnica oficial mientras redactas, te sugiero consultar la Referencia de HTML en MDN Web Docs o revisar los estándares actuales en el W3C.
1. La Estructura Raíz
html
<!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 tu Articulo - Mi Web</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!-- El contenido va aquí -->
</body>
</html>Todo documento HTML5 en 2026 debe comenzar con esta base mínima obligatoria para que el navegador lo interprete correctamente:
2. Ejemplo Completo Integrado (Demo)
Este código agrupa todas las etiquetas mencionadas con sus atributos clave. He incluido el Canvas con un pequeño script para que sea funcional y el SVG integrado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo Completa HTML5 - 2026</title>
</head>
<body>
<header id="main-header">
<h1>Guía Maestra de HTML5</h1>
<nav>
<ul>
<li><a href="#articulos" title="Ir a artículos">Artículos</a></li>
<li><a href="#contacto" title="Ir a contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="articulos">
<article>
<header>
<h2>Entendiendo la Semántica</h2>
<p>Publicado por <span style="color: blue;">Redacción</span></p>
</header>
<p>HTML5 permite separar el contenido de la estructura.</p>
<!-- Ejemplo de Multimedia -->
<figure>
<img src="imagen-demo.jpg" alt="Descripción de la imagen" width="300">
<figcaption>Figura 1: Ejemplo de imagen local.</figcaption>
</figure>
<audio controls src="audio-demo.mp3">Tu navegador no soporta audio.</audio>
<br>
<video controls width="400" poster="miniatura.jpg">
<source src="video-demo.mp4" type="video/mp4">
</video>
</article>
<aside>
<h3>Recursos Extra</h3>
<p>Contenido relacionado que no es vital para el artículo principal.</p>
</aside>
</section>
<!-- Sección de Gráficos (Canvas y SVG) -->
<section id="graficos">
<h2>Gráficos Avanzados</h2>
<!-- SVG: Gráfico vectorial -->
<div class="svg-container">
<p>Círculo dibujado con <strong>SVG</strong>:</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
<!-- Canvas: Dibujo por Script -->
<div class="canvas-container">
<p>Cuadrado dibujado con <strong>Canvas</strong>:</p>
<canvas id="miCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const c = document.getElementById("miCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 60);
</script>
</div>
</section>
<section id="contacto">
<h2>Formulario de Registro</h2>
<form action="/enviar" method="POST">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
<label for="interes">Interés:</label>
<select id="interes" name="interes">
<option value="web">Diseño Web</option>
<option value="dev">Desarrollo App</option>
</select>
<button type="submit">Enviar Datos</button>
</form>
</section>
</main>
<footer class="site-footer">
<p>© 2026 Mi Web Educativa - Creado con HTML5.</p>
</footer>
</body>
</html>
3. Explicación de SVG (Scalable Vector Graphics)
Para tu artículo, es fundamental explicar por qué SVG es diferente a una imagen normal (.jpg o .png):
- ¿Qué es?: Es un formato basado en XML para describir gráficos en 2D. A diferencia de las imágenes de píxeles (bitmaps), el SVG se define mediante fórmulas matemáticas (puntos, líneas, curvas).
- Escalabilidad Infinita: La mayor ventaja es que puedes ampliar un SVG tanto como quieras (incluso al tamaño de una valla publicitaria) y nunca perderá resolución ni se verá «pixelado».
- Interactividad: Al ser código HTML, puedes cambiar el color de un círculo o una línea usando CSS o animarlo con JavaScript directamente en el navegador.
- Peso: Suelen ser archivos muy ligeros porque solo guardan instrucciones de dibujo, no datos de cada píxel.
4. Diferencia clave: Canvas vs SVG
Es un punto excelente para tu blog:
- Canvas: Se dibuja mediante píxeles a través de JavaScript. Es ideal para juegos o animaciones complejas de muchos elementos (como lluvia o fuego). Una vez dibujado algo, el navegador «olvida» qué es; solo ve píxeles.
- SVG: Se dibuja mediante objetos. Cada elemento (un círculo, un texto) es un nodo en el DOM. Es ideal para iconos, logotipos e ilustraciones que deben ser nítidas en cualquier pantalla.