Carregando...

Layout HTML

Após a semântica, o layout monta regiões; CSS coloca.

Estrutura primeiro, colocação depois

Clarifique a história; depois colunas — sem tabela gigante.

Resposta direta

Esqueleto com landmarks. Conteúdo único em main. Colunas com CSS. Sem table 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 com landmarks

Header, fila, main+article, aside, footer. div.row só 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>

Ler o esqueleto

História em main
aside relacionado
sem CSS empilha na vertical

CSS mínimo para colunas

Mesmos landmarks; flex em .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>

Ler a prévia flex

Significado igual
main mais largo
não use td para colunas

Tabelas para dados, não para o chrome

Evite tabelas de layout.

Prática

header/main/aside/footer
article em main
sem tabela de layout

Erros fáceis

tabela de layout
omitir main
tratar row como landmark

Resumo

HTML nomeia; CSS coloca
sem tabelas de layout
a seguir: responsivo

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma