Qué controla el diseño y maquetación de una web: HTML y CSS explicados

La estructura visual de cualquier página web se construye con dos tecnologías núcleo trabajando en tándem:

HTML – Estructura y semántica

• Define qué es el contenido: encabezados (<h1>), párrafos (<p>), listas (<ul>), imágenes (<img>), enlaces (<a>), secciones (<section>, <article>, <nav>).
• Crea el árbol DOM (Document Object Model) que parsean los navegadores.
• Ganchos accesibilidad: alt, aria-*, roles landmark.

CSS – Presentación y maquetación

• Define cómo se ve el HTML: colores, fuentes, espaciado, posicionamiento, breakpoints responsive.
• Módulos clave maquetación:
  • Flexbox – Alineación 1D (barras nav, filas tarjetas).
  • Grid – Maquetación 2D (grillas página, galerías).
  • Flujo / Formato bloque – Flujo documento por defecto.
• Cascada y especificidad determinan qué regla gana.
• Propiedades personalizadas (variables CSS) para theming.

Cómo trabajan juntos

<!-- HTML --> <article class="card"> <img src="photo.jpg" alt="Atardecer"> <h2>Título</h2> <p>Descripción...</p> <a href="#" class="btn">Leer más</a> </article> /* CSS */ .card { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.5rem; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px #0003; } .card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; } .btn { align-self: start; background: #0066cc; color: #fff; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }

Herramientas modernas

• Frameworks: Tailwind CSS, Bootstrap, Material UI – librerías utilidad/componentes.
• Build tools: Vite, Webpack, esbuild – bundle, minify, autoprefix.
• Design systems: Figma → código (Anima, Builder.io).

Papel de JavaScript

JS manipula DOM/CSSOM dinámicamente (React, Vue, Svelte, vanilla) pero no reemplaza HTML/CSS para maquetación — mejora interactividad.