HTML

Arquitectura HTML profesional para proyectos reales

Define una estructura HTML escalable para landing, blog, e-commerce y dashboard, con convenciones que facilitan mantenimiento y trabajo en equipo.

¿Cuánto sabes de HTML?

📘 Teoría

Principios de arquitectura HTML escalable

Antes de codificar, decide estructura, responsabilidades y límites. 🧭

Una página robusta separa claramente cabecera, navegación, contenido principal, bloques secundarios y pie. Esto evita que todo acabe dentro de `div` genéricos sin contexto.

También conviene definir convenciones de naming y profundidad máxima de anidación. Si todo se anida seis niveles, mantenerlo será caro.

Una región principal por vista (`main`).
Secciones con título real, no cajas sin semántica.
Estructura predecible en todas las páginas del proyecto.
Evita sobreanidar cuando un elemento semántico ya resuelve el caso.

Patrones según tipo de proyecto

Mismo lenguaje HTML, arquitecturas distintas según objetivo del producto.

🚀 Landing

Hero, beneficios, prueba social, CTA final y FAQ.

📰 Blog

Listado (`article`) + detalle con tabla de contenido y bloques relacionados.

🛒 E-commerce

Catálogo, filtros (`aside`), grid de producto y ficha detallada.

📊 Dashboard

Navegación lateral, resumen KPI, tablas y paneles de acción.

Esqueleto base reutilizable

<body>
  <header>
    <nav aria-label="Principal">...</nav>
  </header>

  <main id="contenido">
    <section aria-labelledby="titulo-seccion">
      <h1 id="titulo-seccion">Título principal</h1>
      <p>Resumen del objetivo de la página.</p>
    </section>

    <section aria-labelledby="bloque-secundario">
      <h2 id="bloque-secundario">Bloque secundario</h2>
      <article>
        <h3>Elemento 1</h3>
      </article>
    </section>
  </main>

  <footer>
    <p>© Aprende Web</p>
  </footer>
</body>

Convenciones de equipo que sí aportan

Consistencia > creatividad caótica.

Define criterios simples de equipo: cuándo usar `section`, cuándo usar `article`, cómo nombrar IDs de ancla y cómo estructurar bloques repetibles.

Documenta una plantilla por tipo de página. Así cada feature nueva parte de una base sólida, no de improvisación.

1 Principios de arquitectura HTML escalable 2 Patrones según tipo de proyecto 3 Convenciones de equipo que sí aportan

🧪 Aprende probando

Ejemplo Ejemplo guiado: arquitectura de landing Estructura una landing con bloques semánticos y CTA claros.

⌄

🏁 Retos

Reto Reto: corregir arquitectura base Añade la estructura mínima semántica que falta.

⌄

🧰 Recursos

Enlaces útiles

WAI-ARIA Authoring Practices (landmarks)

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 22

Web Components: Custom Elements, template, slot y Shadow DOM

Lección 24

Reto práctico: página de artículo con semántica completa

›