HTML e CSS: Guia de Referência para Desenvolvedores Web

HTML (HyperText Markup Language) e CSS (Cascading Style Sheets) são as tecnologias fundamentais da web. Enquanto o HTML estrutura o conteúdo, o CSS define a aparência. Dominar ambas é essencial para criar sites modernos, acessíveis e responsivos. Este guia aborda os elementos semânticos do HTML5, propriedades modernas do CSS3 e boas práticas de acessibilidade para o seu dia a dia como desenvolvedor.

Estrutura Básica de um Documento HTML5

Antes de mergulhar nos elementos semânticos, vale lembrar a estrutura mínima de um documento HTML5. Ela já utiliza algumas tags essenciais que dão significado ao conteúdo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título da página</title>
</head>
<body>
  <header>
    <nav><!-- links de navegação --></nav>
  </header>
  <main>
    <section>
      <h1>Conteúdo principal</h1>
    </section>
  </main>
  <footer>
    <p>Rodapé</p>
  </footer>
</body>
</html>

Perceba o uso de <header>, <nav>, <main>, <section> e <footer>. Esses são os primeiros elementos semânticos que você encontra na prática.

Elementos Semânticos do HTML5

A semântica HTML dá significado ao conteúdo, melhorando a acessibilidade, o SEO e a legibilidade do código. Conheça os principais elementos semânticos introduzidos no HTML5 e como usá-los corretamente:

  • <header> — define o cabeçalho de uma seção ou página. Geralmente contém logotipo, navegação e elementos introdutórios. Pode haver mais de um por página (ex: header da página e header de uma seção).
  • <nav> — agrupa links de navegação principais. Ideal para menus primários. Evite usar <nav> para todo grupo de links; reserve para navegação importante.
  • <main> — conteúdo principal e único da página. Deve haver apenas um por página. Representa o tema central do documento.
  • <section> — representa uma seção temática de conteúdo, geralmente com um título (h1-h6). Use para dividir o conteúdo em blocos lógicos.
  • <article> — conteúdo independente e autossuficiente, como um post, notícia, artigo de blog ou comentário. Pode conter suas próprias seções e cabeçalhos.
  • <aside> — conteúdo periférico, como sidebar, notas, citações ou publicidade. Não essencial para a compreensão do conteúdo principal.
  • <footer> — rodapé da seção ou página. Geralmente contém informações de copyright, links secundários e contato.
  • <figure> — encapsula ilustrações, diagramas, fotos, códigos ou qualquer conteúdo referenciado no texto. Deve vir acompanhado de <figcaption> para legenda.
  • <time> — representa data/hora em formato legível por máquina. Muito útil para eventos, publicações e calendários.
  • <mark> — destaca trechos de texto, como termos de busca ou trechos relevantes. Visualmente equivalente a um marcador de texto.

Exemplo de uso do <figure> com <figcaption>:

<figure>
  <img src="diagrama.png" alt="Diagrama de fluxo do usuário">
  <figcaption>Fluxo de navegação do site</figcaption>
</figure>

Incorporar esses elementos na estrutura da página é fundamental para uma base sólida e acessível. Lembre-se: a escolha correta da tag semântica é o primeiro passo para um código limpo e bem rankeado.

Propriedades Modernas do CSS3

O CSS3 trouxe recursos que transformaram a forma como construímos layouts e interações. Dominá-los é obrigatório para qualquer desenvolvedor front-end. Vamos aos mais importantes:

Flexbox

Flexbox é um modelo de layout unidimensional que distribui espaço entre itens em um container. Ideal para componentes como barras de navegação, cards, centralização e alinhamento de elementos. Propriedades principais:

  • display: flex — ativa o contexto flex.
  • flex-direction — define eixo principal (row, column).
  • justify-content — alinha itens no eixo principal.
  • align-items — alinha itens no eixo cruzado.
  • gap — espaçamento entre itens.
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Flexbox resolve a maioria dos casos de layout em uma dimensão. Use quando precisar distribuir itens de forma dinâmica sem se preocupar com quebras de linha complexas.

CSS Grid

Grid é o sistema de layout bidimensional que permite criar layouts complexos com linhas e colunas declarativas. É a ferramenta certa para páginas inteiras ou componentes que exigem alinhamento nas duas direções.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

Propriedades essenciais: grid-template-columns, grid-template-rows, gap, grid-column, grid-row. Use a unidade fr para distribuir espaço flexível. Grid é especialmente útil para galerias, dashboards e páginas de landing.

Custom Properties (Variáveis CSS)

Variáveis CSS (--nome) armazenam valores reutilizáveis como cores, tamanhos e espaçamentos. Facilitam a manutenção e permitem criar temas dinâmicos com poucas linhas.

:root {
  --primary-color: #00d9a3;
  --spacing: 1rem;
}
.button {
  background: var(--primary-color);
  margin: var(--spacing);
}

Use variáveis para manter a consistência visual e facilitar alterações globais. Combinadas com JavaScript, permitem criar temas claro/escuro de forma elegante.

Animações e Transições

Transições (transition) suavizam mudanças de estado, enquanto animações (@keyframes) permitem sequências mais elaboradas. Ambas melhoram a experiência do usuário com microinterações.

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Animações são ideais para loading, feedback visual e storytelling. Use com moderação para não prejudicar performance ou acessibilidade (prefers-reduced-motion).

Boas Práticas de Acessibilidade (A11y)

A acessibilidade web garante que todas as pessoas, incluindo aquelas com deficiência, possam navegar e interagir com seu site. Pontos fundamentais:

  • ARIA: atributos como role, aria-label, aria-hidden e aria-expanded complementam a semântica nativa. Use com moderação, prefira sempre elementos HTML semânticos primeiro. Por exemplo, use <button> em vez de <div role="button">.
  • Texto alternativo: toda imagem deve ter o atributo alt descritivo. Imagens decorativas devem ter alt="" para serem ignoradas por leitores de tela. Ex: <img src="foto.jpg" alt="Caio Henrique em sua mesa de trabalho">.
  • Contraste de cores: mantenha taxa de contraste mínima de 4.5:1 para texto normal (nível AA). Ferramentas como o WebAIM Contrast Checker ajudam a verificar. Evite combinações como cinza claro sobre branco.
  • Navegação por teclado: garanta que todos os elementos interativos sejam acessíveis via Tab e tenham foco visível (ex: outline). Teste seu site sem mouse regularmente.
  • Estrutura de títulos: mantenha uma hierarquia lógica (h1 > h2 > h3). Isso ajuda leitores de tela a navegar. Não pule níveis.

Exemplo de ARIA bem usado:

<button aria-expanded="false" aria-controls="menu">Abrir menu</button>

Perguntas Frequentes (FAQ)

Reunimos as dúvidas mais comuns de quem está começando com HTML5 e CSS3:

Qual a diferença entre <div> e <section>?

<div> é um contêiner genérico sem valor semântico. Use quando não houver outro elemento mais apropriado. <section> representa uma seção temática com título próprio. Prefira <section> quando o conteúdo formar uma unidade lógica.

Quando usar article e section?

Use <article> para conteúdo independente que faz sentido por si só (ex: um post de blog, uma notícia). Use <section> para agrupar partes relacionadas de um conteúdo maior. Um <article> pode conter várias <section> internas.

Como centralizar um elemento com Flexbox?

No container pai, use display: flex; justify-content: center; align-items: center;. Se for apenas horizontal, justify-content: center é suficiente.

O que são variáveis CSS e por que usá-las?

Variáveis CSS (custom properties) permitem armazenar valores como cores e tamanhos para reuso. Facilitam a manutenção e a criação de temas dinâmicos. São declaradas com --nome e acessadas com var(--nome).

Qual a importância do contraste de cores?

Um contraste adequado garante que pessoas com baixa visão ou daltonismo consigam ler o conteúdo. A diretriz WCAG recomenda 4.5:1 para texto normal e 3:1 para texto grande. Use ferramentas de verificação no seu processo.

Conclusão

HTML5 e CSS3 são a base de qualquer projeto web. Utilizar elementos semânticos, layouts modernos com Flexbox e Grid, e seguir diretrizes de acessibilidade são práticas que elevam a qualidade do seu trabalho e melhoram o ranqueamento nos mecanismos de busca.

Continue aprendendo: confira nosso guia de JavaScript moderno (ES6+) e veja como aplicamos essas tecnologias no desenvolvimento WordPress. Volte para a página de todas as tecnologias para explorar mais conteúdos. Bônus de boas-vindas até R$1.500