O desenvolvimento web moderno é sustentado por três pilares principais: HTML (estrutura), CSS (estilo) e JavaScript (interatividade). Este guia se concentrará nos dois primeiros, que são essenciais para a fundação de qualquer página da web.
HTML e CSS são a base do Front-end (o lado do cliente). Embora muitas vezes chamadas de "linguagens de programação", é crucial entender que nem HTML, nem CSS são linguagens de programação.
Linguagem | Tipo | Função Principal | Analogia (Corpo Humano) |
HTML | Linguagem de Marcação de Hipertexto | Define a estrutura e o conteúdo da página, organizando elementos como parágrafos, títulos, links, imagens e tabelas. | O Esqueleto. |
CSS | Linguagem de Folhas de Estilo em Cascata | Define a aparência e o estilo visual da página, controlando cores, fontes, tamanhos, espaçamento, layout e animações. | A Pele, Cabelo e Roupas. |
O JavaScript, por sua vez, é a linguagem de programação que adiciona movimento e funcionalidade dinâmica (o Músculo).
O HTML (HyperText Markup Language) é o código usado para estruturar uma página web e seu conteúdo. Ele utiliza elementos para agrupar e delimitar diferentes partes do conteúdo.
Um elemento HTML completo é composto por:
Tag de Abertura: Consiste no nome do elemento envolvido em parênteses angulares (ex.: <p>). Indica onde o elemento começa.
Tag de Fechamento: É igual à tag de abertura, mas inclui uma barra (/) antes do nome do elemento (ex.: </p>). Indica onde o elemento termina. Erro Comum em Concursos/Iniciantes: Esquecer a tag de fechamento pode levar a resultados inesperados.
Conteúdo: O conteúdo propriamente dito (ex.: o texto de um parágrafo).
Elemento: A combinação da tag de abertura, tag de fechamento e o conteúdo.
Exceção: Elementos Vazios. Alguns elementos não possuem conteúdo interno e não requerem tag de fechamento (ex.: <img>, input, br). Eles incorporam algo na página no local onde o código aparece.
Atributos contêm informações extras sobre o elemento que não aparecem no conteúdo real da página.
Exemplo: <p class="nota-editora">Conteúdo.</p>.
class é o nome do atributo, e "nota-editora" é o valor do atributo.
Boas Práticas e SEO (Muito Cobrado): Os atributos são cruciais para estilização (class, id) e, principalmente, para a Acessibilidade e SEO (Search Engine Optimization).
O atributo alt (alternative) no elemento <img> é vital para acessibilidade, fornecendo texto descritivo para usuários que não podem ver a imagem (como leitores de tela). O SEO se beneficia disso, pois mecanismos de busca dão mais importância a palavras-chave incluídas em links e títulos.
Todo documento HTML deve seguir uma estrutura básica para ser interpretado corretamente pelo navegador.
Componente | Função | Exemplo |
| O doctype inicial e obrigatório. Garante que o documento se comporte corretamente. |
|
| O elemento raiz que envolve todo o conteúdo da página. |
|
| Contém tudo o que não é o conteúdo visível ao usuário, como metadados (palavras-chave, descrição para busca), CSS e conjuntos de caracteres. |
|
| Define o conjunto de caracteres para UTF-8, essencial para suportar a maioria dos idiomas escritos. |
|
| Define o título da página que aparece na guia do navegador e é usado em favoritos. |
|
| Contém todo o conteúdo que você deseja mostrar ao público (texto, imagens, vídeos, etc.). |
|
Os cabeçalhos (<h1> a <h6>) definem títulos e subtítulos, com <h1> sendo o nível mais alto.
Regra de Ouro (SEO/Acessibilidade): Não use cabeçalhos para estilizar texto (deixá-lo maior ou em negrito); use-os para criar uma sequência significativa de títulos, sem pular níveis. Isso é fundamental para acessibilidade (leitores de tela) e SEO.
Parágrafos (<p>): Usado para conter blocos de texto regular.
Ênfase Forte (<strong>): Utilizado para destacar uma parte do texto de forma mais relevante, indicando importância.
Ênfase Simples (<em>): Utilizado para enfatizar um trecho, podendo alterar o propósito da frase.
Listas são elementos cruciais e consistem em pelo menos dois elementos: o contêiner da lista e os itens individuais (<li>).
Lista Não Ordenada (<ul>): Usada quando a ordem dos itens não importa (ex.: lista de compras).
Lista Ordenada (<ol>): Usada quando a ordem dos itens é importante (ex.: uma receita).
<a>)Links (âncoras) são o que tornam a web uma "rede".
O elemento <a> é usado para descrever um link.
O atributo href (Hypertext Reference) é obrigatório e contém o endereço web (URL) para onde o link aponta. É importante incluir o protocolo (https:// ou http://) para evitar resultados inesperados.
O CSS (Cascading Style Sheets) é a linguagem de folhas de estilo que permite aplicar estilos seletivamente a elementos em documentos HTML.
O CSS surgiu em 1995 como uma consequência do crescimento do HTML, separando a parte estética da estrutura para evitar arquivos gigantes e confusos.
A sigla significa Folha de Estilos em Cascata.
Cascading (Cascata): Estilos aplicados se propagam para os elementos dentro da página. A cascata permite usar mais de um arquivo CSS para estilizar a aplicação.
Style (Estilo): Indicações para aplicar estilos visuais.
Sheets (Folhas): Os estilos são salvos em arquivos separados com extensão .css.
Toda a estrutura de estilo é chamada de conjunto de regras (ou simplesmente "regra").
Componente | Função | Exemplo (na regra |
Seletor | Nome do elemento HTML no início da regra, que seleciona qual(is) elemento(s) serão estilizados (nesse caso, elementos |
|
Declaração | Uma regra simples que especifica qual propriedade do elemento você deseja estilizar (ex.: |
|
Propriedade | A forma pela qual você estiliza um elemento (ex.: |
|
Valor da Propriedade | O valor que define a aparência escolhida para a propriedade (ex.: |
|
Cada linha de comando (declaração) deve ser envolvida em chaves ({}).
Dentro de cada declaração, use dois pontos (:) para separar a propriedade de seus valores.
Use ponto e vírgula (;) para separar cada declaração da próxima.
Exemplo de múltiplas declarações: p { color: red; width: 500px; border: 1px solid black; }.
Para que o CSS afete a aparência do documento HTML, ele precisa ser aplicado. Geralmente, isso é feito no cabeçalho (<head>) do documento HTML, usando a tag <link>.
<link href="caminho/para/estilo.css" rel="stylesheet" />
O CSS também pode ser escrito diretamente no HTML usando a tag <style> ou como atributo style de um elemento, mas a prática recomendada é em arquivo separado.
Seletores definem quais elementos serão alvo das regras de estilo. Existem muitos tipos de seletores, e o conhecimento detalhado deles é frequentemente exigido em testes e concursos.
Nome do Seletor | O que Seleciona | Exemplo | Aplica-se a: |
Seletor de Elemento (ou Tag/Tipo) | Todos os elementos HTML de um determinado tipo. |
|
|
Seletor de ID | O elemento na página com o ID especificado. Boa Prática/Exceção: Embora seja permitido usar o mesmo ID para vários elementos, a boa prática exige apenas um elemento por ID em uma página. |
|
|
Seletor de Classe | O(s) elemento(s) na página com a classe especificada. Múltiplas instâncias de classe podem aparecer em uma página. |
|
|
Seleção Múltipla | Seleciona vários tipos de elementos para aplicar um único conjunto de regras, separando-os por vírgula. |
| Todos os |
Seletor de Atributo | O(s) elemento(s) na página com o atributo especificado. |
|
|
Seletor de Pseudo-classe | O(s) elemento(s) especificado(s), mas somente quando estiverem em um estado específico (ex.: com o mouse sobre ele). |
|
|
Um conceito fundamental em CSS é o Modelo de Caixas (Box Model). Muitos elementos HTML podem ser considerados caixas, e o layout CSS é baseado principalmente neste modelo.
Cada bloco que ocupa espaço na página possui as seguintes propriedades:
content (Conteúdo): O conteúdo real (geralmente texto, imagem, etc.). A propriedade color afeta a cor do conteúdo.
padding (Preenchimento): O espaço ao redor do conteúdo.
Pode ser definido com 1, 2, 3 ou 4 valores. Quatro valores definem Topo, Direita, Baixo e Esquerda, nessa ordem.
border (Borda): A linha sólida do lado de fora do padding.
margin (Margem): O espaço externo a um elemento (espaço entre caixas).
A propriedade margin: 0 auto; é frequentemente usada para centralizar horizontalmente um elemento de nível de bloco com largura definida (como o body).
Outras propriedades essenciais usadas no modelo de caixas incluem:
width (Largura) e height (Altura).
background-color: A cor atrás do conteúdo e do padding.
display: Bloco vs. Em LinhaA propriedade display define a maneira de dispor um elemento. A distinção entre elementos em nível de bloco e em linha é crucial:
Nível de Bloco (block): Ocupa espaço na página e aceita propriedades de layout como margin e width. O elemento <body> é um exemplo.
Em Linha (inline): Não pode ter margens (e alguns outros valores de espaçamento) aplicadas. Imagens (<img>) são exemplos de elementos em linha.
Exceção e Dica Didática: Para aplicar margens a uma imagem (<img>), que é um elemento em linha, é necessário dar a ela o comportamento de nível de bloco usando display: block;.
Para que o conteúdo seja o mais completo e atualizado possível, priorizamos a semântica, acessibilidade e os sistemas de layout mais modernos do CSS3.
A Semântica HTML (muitas vezes chamada de POSH - Plain Old Semantic HTML) refere-se a utilizar corretamente os elementos HTML, cada qual com seu propósito e significado.
Por que a Semântica é Vital?
SEO: Mecanismos de busca dão mais importância a palavras-chave em títulos e links do que em elementos não-semânticos como <div>. O HTML semântico torna as páginas mais fáceis de serem encontradas.
Acessibilidade: Usuários com deficiência (e leitores de tela) dependem da semântica para interpretar a estrutura da página (o que é um cabeçalho, o que é navegação, etc.).
Desenvolvimento: Torna o código mais limpo, fácil de ler e manter.
O HTML5 introduziu tags que agregam significado à estrutura do documento. Utilizar essas tags em vez de múltiplos <div> é a boa prática moderna.
Elemento Semântico | Função | Exemplo de Uso |
| Representa o cabeçalho de um documento ou seção. Pode conter títulos ( | Cabeçalho do Site/Seção. |
| Especifica o conteúdo principal e de maior relevância na página. Exceção/Regra: Uma página bem construída deve ter apenas um elemento | O corpo central do conteúdo. |
| Representa uma seção temática dentro de um documento, geralmente contendo um título. | Capítulos ou Tópicos de um artigo. |
| Declara um conteúdo que é independente e pode fazer sentido por si só (ex.: um post de blog, um artigo de notícia). | Posts individuais dentro de uma seção. |
| Utilizado para agrupar links de navegação principais (menus). | Menu principal do site. |
| Utilizado para conteúdo de apoio ou adicional que está relacionado, mas separado, do conteúdo principal (ex.: sidebars, links sugeridos). | Box de "Leia Também". |
| Representa o rodapé de um documento ou seção, usado para informações de autoria, direitos autorais, data de criação e links adicionais. | Rodapé do site. |
A linguagem utilizada afeta a acessibilidade.
Evite Linguagem Ambígua em Links: Não utilize apenas "Clique aqui". O rótulo deve ser compreensível e distinto mesmo fora de contexto. Um leitor de tela pode listar todos os links, e a frase "Saiba mais sobre baleias" é preferível a "Para saber mais sobre baleias, clique aqui".
Uso de Rótulos em Formulários (<label>): É fundamental associar um rótulo (<label>) a uma entrada de formulário (<input>) usando o atributo for. Isso garante que o leitor de tela associe a descrição ("Preencha seu nome:") corretamente à caixa de texto, e ainda aumenta a área clicável no navegador.
O CSS3, lançado em 2012, não é um modelo único, mas uma coleção de módulos independentes que adicionaram recursos avançados. Entre os recursos mais importantes para o design responsivo e layouts complexos estão o Flexbox e o Grid Layout.
Layout Responsivo (Crucial para a Web de 2025 e Concursos): O CSS3 permite criar estruturas que se adaptam automaticamente a diferentes tamanhos de tela, dispositivos e orientações. Isso é feito principalmente através de Media Queries, que permitem aplicar estilos diferentes com base nas características do dispositivo (como largura da tela).
O Flexbox (Flexible Box Layout) é um sistema de layout unidimensional que facilita o posicionamento e o alinhamento de elementos em layouts complexos. É ideal para organizar itens em uma única linha ou coluna.
Para usar o Flexbox, você deve transformar o elemento pai em um Flex Container aplicando display: flex; (ou display: inline-flex;). Os elementos filhos dentro dele se tornam Flex Items.
Propriedades Chave do Flex Container (Elemento Pai):
Propriedade | Função | Valores Comuns |
| Define o elemento como um contêiner flexível. |
|
| Define a direção dos itens no contêiner. |
|
| Define se os itens devem quebrar a linha ou não. |
|
| Alinha os itens ao longo do eixo principal do contêiner. |
|
| Alinha os itens ao longo do eixo cruzado (perpendicular ao principal). |
|
| Alinha linhas de flex (útil quando |
|
Propriedades Chave do Flex Item (Elemento Filho):
Propriedade | Função | Exemplo |
| Define a ordem em que um item específico deve aparecer, independentemente da ordem no HTML. O padrão é 0. |
|
| Define a capacidade do item de crescer para preencher o espaço disponível. | Se 1, todos crescem igualmente. |
| Define a capacidade do item de encolher. | |
| Permite sobrescrever o alinhamento definido em |
|
O Grid Layout é um sistema de posicionamento bidimensional (linhas e colunas), facilitando a criação de layouts de página inteira.
Exemplo: display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;.
O CSS3 também popularizou recursos visuais que melhoram a experiência do usuário.
Transições e Animações: Permitem criar movimentos e transformações suaves entre diferentes estados de um elemento. Exemplo de transição: transition: width 0.3s ease-in-out;.
Transformações 3D: Permite rotações e perspectivas em três dimensões.
Sombras: Permitem a criação de sombras em caixas (box-shadow) ou texto (text-shadow) para dar profundidade. A propriedade text-shadow aceita valores para deslocamento horizontal, deslocamento vertical, raio de desfoque e cor.
Gradientes: Criação de gradientes suaves de cor.
Bordas Arredondadas: Aplicação de cantos suaves. Exemplo: border-radius: 10px.
Fontes Personalizadas: Possibilidade de incorporar fontes externas (como Google Fonts) na página para criar uma identidade visual única.
O HTML define o conteúdo e a estrutura (o esqueleto). O CSS define a aparência e o estilo (as roupas e cores). Eles trabalham juntos, mas têm responsabilidades distintas.
Não. HTML é uma linguagem de marcação, e CSS é uma linguagem de folhas de estilo. Eles não podem realizar operações lógicas ou cálculos como o JavaScript.
O uso de tags semânticas corretas (<header>, <nav>, <main>, etc.) é fundamental para:
Acessibilidade: Ajuda leitores de tela e tecnologias assistivas a interpretar corretamente a hierarquia e o propósito do conteúdo.
SEO: Mecanismos de busca (como os de 2025) usam a estrutura semântica para indexar e classificar o conteúdo, tornando sua página mais detectável.
Manutenção: Torna o código mais limpo e compreensível para outros desenvolvedores.
A natureza em cascata refere-se à forma como os estilos são aplicados e podem ser sobrepostos. Estilos definidos no elemento pai se propagam para os filhos, e a ordem de aplicação (incluindo o uso de múltiplos arquivos CSS) segue regras para determinar qual estilo prevalece. Este conceito é a base da Cascata, Especificidade e Herança, um módulo de aprendizado crucial em CSS.
Não é recomendado. Layouts feitos com tabelas são uma relíquia do passado. Eles causam confusão para usuários de leitores de tela e são menos flexíveis do que layouts baseados em CSS (como Flexbox ou Grid). A boa prática é usar elementos semânticos (<header>, <main>, <footer>) e estilos CSS para layout.
Sempre use o atributo alt na tag <img>. O texto alternativo deve ser descritivo e fornecer informações suficientes sobre o que a imagem mostra. Se a imagem for puramente decorativa, use um alt vazio (alt="") ou CSS para exibi-la.
Ambos são sistemas de layout avançados do CSS3 e devem ser aprendidos.
Flexbox é ideal para alinhamento e distribuição em uma dimensão (linha ou coluna).
Grid Layout é ideal para estruturas bidimensionais complexas (linhas e colunas simultaneamente).