Cargando...

Diseño de página HTML

Tras la semántica, el layout ensambla regiones; CSS las coloca.

Primero estructura, luego colocación

Define la historia; luego columnas — no una tabla gigante.

Respuesta directa

Esqueleto con landmarks. Contenido único en main. Columnas con CSS. Sin tabla de layout.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

Esqueleto con landmarks

Header, fila, main+article, aside, footer. div.row solo gancho CSS.

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

Leer el esqueleto

Historia en main
aside relacionado
sin CSS se apila en vertical

CSS mínimo para columnas

Mismos landmarks; flex en .row.

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Leer la vista flex

El significado no cambia
main más ancho
no uses td para columnas

Tablas para datos, no para el marco

Evita tablas de maquetación.

Práctica

header/main/aside/footer
article en main
sin tabla de layout

Errores fáciles

tabla de layout
omitir main
tratar row como landmark

Resumen

HTML nombra; CSS coloca
evita tablas de layout
siguiente: responsive

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma