Integração de HTML Semântico, CSS Box Model e DOM com JavaScript

Apuntes

1. HTML: Semântica e Estrutura O foco aqui não é decorar tag, mas saber por que usar cada uma. O que revisar: A diferença entre tags Semânticas (<main>, <article>, <section>, <nav>) e tags Genéricas (<div>, <span>). A "Pergunta de Prova": "Por que devemos utilizar HTML semântico em vez de construir um site apenas com divs?" A Resposta Chave: Você deve mencionar três pilares: Acessibilidade: Leitores de tela para deficientes visuais entendem melhor a estrutura. SEO (Otimização para buscas): O Google prioriza sites onde ele consegue identificar o que é título, o que é menu e o que é conteúdo principal. Manutenção: O código fica mais legível para outros desenvolvedores. 2. CSS: O Modelo de Caixa (Box Model) Se cair uma questão de CSS, a chance de ser sobre Box Model é de 90%. O que revisar: Todo elemento no CSS é uma caixa. Você precisa saber a ordem (de dentro para fora): Content (conteúdo) → Padding (espaçamento interno) → Border (borda) → Margin (espaçamento externo). A "Pergunta de Prova": "Explique a diferença entre Padding e Margin e como eles afetam o layout." A Resposta Chave: Padding: É o espaço entre o conteúdo e a borda (dentro da caixa). Se a caixa tiver cor de fundo, o pa...