Técnicas de Layout em HTML5: Tabelas, DIVs e Elementos Semânticos

Descubra como criar layouts modernos usando tabelas, a técnica tableless com DIVs e os novos elementos semânticos do HTML5, com exemplos práticos e boas práticas de SEO.

Guia completo para desenvolvedores iniciantes

Explicação detalhada dos tópicos

7.1 Criação de layout com tabelas

No início da web, as tabelas eram o recurso principal para dividir a página em áreas distintas. Criava‑se uma grande tabela e cada <td> continha um bloco de conteúdo (menu, artigo, anúncios etc.). Embora funcional, o navegador precisava ler toda a estrutura antes de renderizar, o que gerava atrasos. O código‑exemplo mostra como usar <thead>, <tbody> e <tfoot> para separar cabeçalho, corpo e rodapé, além de colspan e rowspan para mesclar células.

7.2 Criação de layout com o elemento `<div>` (tableless)

Com a evolução do CSS, passou‑se a usar <div> como contêineres flexíveis. Cada área (menu, artigos, parceiros) recebe um id ou class, permitindo estilizar em lote. Essa técnica, chamada “tableless”, melhora a velocidade de renderização porque o navegador processa os elementos sequencialmente. O exemplo demonstra a estrutura de #header, #menu, #artigos, #parceiros e #footer, com CSS que define larguras, alturas e bordas.

7.3 Criação de layout com os novos elementos semânticos/estruturais da HTML5

HTML5 introduziu tags como <header>, <nav>, <section>, <article> e <footer>. Elas descrevem a função do conteúdo, facilitando a indexação por buscadores e a acessibilidade. No exemplo, o <header> contém o menu de navegação, <section id="centro"> agrupa três sub‑seções (#menu, #artigos, #parceiros) e <footer> encerra a página. O CSS permanece semelhante ao da versão div, mas a semântica melhora a compreensão da página.

7.4 A combinação HTML, CSS e JavaScript

HTML fornece a estrutura, CSS define a apresentação e JavaScript adiciona interatividade. Por exemplo, um menu dropdown pode ser criado com JavaScript que escuta cliques e altera classes CSS. As APIs modernas do HTML5 (Canvas, Geolocation, Drag‑and‑Drop) são acessadas via JavaScript, ampliando as possibilidades de desenvolvimento.

7.5 Projeto exemplo

O site da Editora Érica disponibiliza o código‑fonte completo da página inicial, permitindo que o estudante explore a aplicação prática das três técnicas de layout.

7.6 Resumo

As três técnicas – tabelas, div (tableless) e elementos semânticos – produzem o mesmo visual, mas variam em acessibilidade, performance e manutenção. Para iniciantes, recomenda‑se começar com div ou os novos elementos semânticos, pois são mais flexíveis e amigáveis aos motores de busca.

Resumo dos tópicos e subtópicos

1 Evolução das Técnicas de Criação de Layouts
    1.1 Layout com Tabelas
        • Uso de <table>, <thead>, <tbody>, <tfoot>
        • Mesclagem com colspan/rowspan
        • Desvantagens: renderização lenta, má acessibilidade
    1.2 Layout com DIV (Tableless)
        • Contêineres <div id/class>
        • CSS controla posicionamento, largura, altura
        • Vantagens: renderização progressiva, manutenção mais fácil
    1.3 Layout com Elementos Semânticos HTML5
        • Tags: <header>, <nav>, <section>, <article>, <aside>, <footer>
        • Melhor semântica, SEO e acessibilidade
        • Estrutura similar ao exemplo de DIV, porém com significado
2 Combinação HTML, CSS e JavaScript
    • HTML = estrutura
    • CSS = estilo e layout
    • JavaScript = interatividade e APIs HTML5
3 Projeto Exemplo – Editora Érica
    • Download completo da página inicial
    • Exercícios práticos
4 Resumo Final
    • Três técnicas produzem o mesmo visual
    • Recomenda‑se iniciar com DIV ou semântica HTML5
    • Conhecimento de CSS e JS é indispensável

Mapa Mental

mindmap root((Técnicas de Layout HTML5)) sub1(Tabelas) sub1a( <table>, <thead>, <tbody>, <tfoot> ) sub1b(Mesclagem colspan/rowspan) sub1c(Desvantagens: performance, acessibilidade) sub2(DIV – Tableless) sub2a(<div id/class>) sub2b(CSS posicionamento) sub2c(Vantagens: renderização rápida, manutenção) sub3(Elementos Semânticos HTML5) sub3a(<header>, <nav>, <section>, <article>, <footer>) sub3b(SEO e acessibilidade) sub3c(Estrutura similar ao DIV) sub4(HTML + CSS + JS) sub4a(HTML = estrutura) sub4b(CSS = estilo) sub4c(JavaScript = interatividade, APIs)

Questões sobre o assunto

Questão 1 – Qual das alternativas descreve corretamente uma desvantagem do uso de tabelas para layout?

1.50 pontos Média

Escolha a alternativa correta.

A) Tabelas permitem mesclar células com colspan e rowspan. B) O navegador renderiza a página somente após ler toda a estrutura da tabela. C) Tabelas facilitam a acessibilidade para leitores de tela. D) CSS pode ser aplicado diretamente nas células <td>. E) Tabelas são recomendadas para layouts responsivos.

Resposta correta: B) O navegador renderiza a página somente após ler toda a estrutura da tabela.

Essa característica gera atraso na exibição, sendo a principal desvantagem citada no conteúdo.

Questão 2 – Sobre a técnica “tableless” com <div>, assinale a alternativa correta.

2.50 pontos Difícil

Selecione a opção que melhor reflete as vantagens da abordagem.

A) Permite que o navegador renderize o conteúdo à medida que os <div> são interpretados. B) Exige o uso de atributos de apresentação (ex.: align, bgcolor) nas tags. C) Impede a aplicação de estilos CSS externos. D) Necessita de colspan para mesclar áreas de conteúdo. E) Só funciona em navegadores antigos (IE6‑8).

Resposta correta: A) Permite que o navegador renderize o conteúdo à medida que os <div> são interpretados.

Essa característica acelera a exibição e é a principal vantagem da técnica tableless.

Questão 3 – Em relação aos novos elementos semânticos do HTML5, assinale a alternativa INCORRETA.

2.50 pontos Difícil

Escolha a opção que não corresponde ao uso recomendado.

A) <header> agrupa o cabeçalho da página, incluindo logotipo e navegação. B) <article> deve ser usado para blocos de conteúdo independente, como notícias. C) <section> pode substituir <nav> para menus de navegação. D) <footer> contém informações de contato e direitos autorais. E) <nav> indica um bloco de links de navegação principal ou secundário.

Resposta correta: C) <section> pode substituir <nav> para menus de navegação.

Embora ambos agrupem conteúdo, <nav> tem significado específico de navegação, enquanto <section> é genérica.

Questão 4 – Considere o seguinte trecho de CSS usado em um layout “tableless”:

3.50 pontos Extrema

#menu { width: 200px; float: left; }
#artigos { width: 648px; float: left; }
#parceiros { width: 150px; float: left; }

Qual o efeito visual esperado ao aplicar esse CSS ao HTML que contém as três divs acima?

A) As três áreas ficarão empilhadas verticalmente, uma abaixo da outra. B) As áreas #menu e #parceiros ficarão ao lado de #artigos, formando três colunas alinhadas horizontalmente. C) Apenas #artigos ocupará toda a largura da página, enquanto #menu e #parceiros serão ocultados. D) #menu ficará acima de #artigos, e #parceiros ficará abaixo de #artigos. E) O layout ficará quebrado porque faltou definir display:flex no contêiner.

Resposta correta: B) As áreas #menu e #parceiros ficarão ao lado de #artigos, formando três colunas alinhadas horizontalmente.

O uso de float:left em cada div faz com que elas se alinhem lado a lado, respeitando as larguras definidas.