La estructura de una página web se puede entender desde dos perspectivas: la estructura técnica (código) y la estructura visual (layout). Aquí te explico ambas.
1. Estructura técnica (HTML5 semántico)
Es el esqueleto de la página, definido por etiquetas HTML que organizan el contenido de forma lógica y accesible.
<!DOCTYPE html>
<html>
<head>
<!-- Metadatos (título, CSS, scripts, descripción, palabras clave) -->
</head>
<body>
<header> <!-- Cabecera: logotipo, navegación, idiomas -->
</header>
<nav> <!-- Menú de navegación principal -->
</nav>
<main> <!-- Contenido único y principal de la página -->
<section> <!-- Bloque temático (ej. servicios, productos) -->
</section>
<article> <!-- Contenido autónomo (noticia, post, comentario) -->
</article>
<aside> <!-- Contenido complementario (sidebar, banners, enlaces relacionados) -->
</aside>
</main>
<footer> <!-- Pie: copyright, contacto, aviso legal, redes sociales -->
</footer>
</body>
</html>
2. Estructura visual (layout común)
Distribución que ve el usuario. Los patrones más habituales son:
· Cabecera (header) → Logo + menú principal.
· Cuerpo (contenido principal) → Puede tener:
· Una columna (blog, landing page)
· Dos columnas (contenido principal + sidebar)
· Tres columnas (productos, dashboard)
· Layout en cuadrícula (galerías, portafolios)
· Pie (footer) → Información secundaria y enlaces útiles.
3. Árbol DOM (Document Object Model)
Estructuralmente, toda página es un árbol jerárquico donde cada elemento (etiqueta) contiene otros. Ejemplo:
```
html
├── head
└── body
├── header
├── nav
├── main
│ ├── section
│ └── aside
└── footer
```
4. Elementos clave de cualquier estructura web
· Jerarquía visual (títulos H1, H2...)
· Contenedores (div, section, article)
· Enlaces y navegación interna
· Formularios (contacto, búsqueda)
· Metadatos (viewport, charset, title)
Buenas prácticas actuales:
· Diseño responsive (se adapta a móvil/tablet/escritorio)
· Estructura accesible (aria labels, orden lógico para lectores de pantalla)
· Uso de Flexbox o CSS Grid para maquetar sin tablas
· SEO friendly: jerarquía de títulos clara y contenido principal antes del aside.
Para Servicios Enviar Formulario de Contacto
Saludos cordiales eminencia, si fuera tan amable de Suscribirse, para que disfrute de artículos que quizás le pueda interesar. Gracias anticipadas, y bendiciones mil. Aquí también está nuestro Canal de YouTube, favor de Suscribirse y Compartir, entre sus contactos:
