Módulo 07: Estructura Semántica HTML5
Construcción del esqueleto web profesional, accesibilidad y maquetación
Enfoque: Construcción del esqueleto web profesional, accesibilidad y maquetación limpia sin "divitis" para posicionar de forma óptima en Google.
1. Concepto Clave: Semántica Web vs. "Divitis"
El marcado semántico consiste en utilizar la etiqueta HTML correcta según el significado de la información que contiene, y no solo por cómo se ve en pantalla.
El problema de la "Divitis": Abusar de la etiqueta genérica
<div>(ej.<div class="header">,<div class="footer">,<div class="menu">) dificulta la lectura del código, perjudica la accesibilidad para personas con discapacidad visual y confunde a los motores de búsqueda.La solución Semántica: Usar las etiquetas nativas de HTML5 que le indican exactamente a Google qué papel cumple cada bloque dentro del sitio:
<header>: Cabecera principal o de sección (logos, títulos).<nav>: Bloque de enlaces de navegación principal.<main>: El contenido único y central de la página web (solo debe haber uno por documento).<article>: Bloque de contenido independiente y autocontenido (un post de blog, una noticia, una ficha de producto).<section>: Agrupación temática de contenidos afines.<aside>: Contenido secundario o lateral (gadgets, enlaces relacionados, publicidad).<footer>: Pie de página (derechos de autor, enlaces legales, contacto).
2. Estructura Básica de un Documento Semántico
Un diseño limpio y accesible sigue esta jerarquía visual y de código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título Profesional de la Página</title>
</head>
<body>
<header>
<h1>Nombre del Proyecto</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Módulo 07: Estructura Semántica</h2>
<p>Contenido principal del artículo o tutorial...</p>
</article>
<section>
<h3>Recursos Adicionales</h3>
<p>Información complementaria sobre el tema...</p>
</section>
</main>
<aside>
<h3>Gadget o Barra Lateral</h3>
<p>Enlaces de interés o accesos directos.</p>
</aside>
<footer>
<p>© 2026 MaesTec - Todos los derechos reservados.</p>
</footer>
</body>
</html>
3. Escudo Anti-Errores
⚠️ Error común: Utilizar etiquetas de encabezado (
<h1>a<h6>) para cambiar el tamaño del texto o saltearse la jerarquía (ejemplo: usar un<h3>directamente después de un<h1>sin pasar por un<h2>).Solución: Los encabezados son la "tabla de contenidos" para Google. Utiliza un único
<h1>por página para el tema principal,<h2>para las secciones clave y<h3>para los subtemas dentro de cada sección. El tamaño del texto déjaselo a CSS.
4. Prompt de Apoyo para IA
Actúa como un Desarrollador Web Frontend Senior especializado en SEO Técnico. Revisa el siguiente código HTML, identifica si existe "divitis" o mala estructuración y refactorízalo usando etiquetas semánticas de HTML5 (<header>, <nav>, <main>, <article>, <aside>, <footer>) garantizando una correcta jerarquía de H1 a H3.
Comentarios
Publicar un comentario