📄 HTML

HTML

A linguagem que estrutura tudo na web. Sem HTML não existe página. Com ele, você define o que cada coisa é — e o navegador cuida do resto.

📖 Introdução ao HTML

HTML (HyperText Markup Language) é a linguagem de marcação da web. Você usa tags para dizer ao navegador o que cada pedaço de conteúdo representa.

😂

"Eu sei programar — domino HTML!" — disse alguém que nunca vai ouvir o fim disso em uma entrevista técnica. HTML é uma linguagem de marcação, não de programação. Não tem lógica, não tem variáveis, não tem loops. Mas é a base de tudo na web, e saber bem faz toda a diferença.

Estrutura básica

<!DOCTYPE html>// declara HTML5 — sempre na primeira linha
<html lang="pt-BR">
<head>// metadados invisíveis ao usuário
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Aba</title>
</head>
<body>// tudo que o usuário vê vai aqui
<h1>Olá, mundo!</h1>
</body>
</html>

Anatomia de uma tag

<a href="https://google.com" target="_blank">Clique aqui</a>
tag de abertura  |  atributo="valor"  |  conteúdo  |  tag de fechamento

🏷️ Tags Principais

Títulos e texto

HTML
<!-- Hierarquia de títulos: h1 é o mais importante -->
<h1>Título principal (um por página)</h1>
<h2>Seção</h2>
<h3>Subseção</h3>

<p>Parágrafo de texto corrido.</p>

<p>Isso é <strong>importante</strong> e isso é <em>ênfase</em>.</p>

<p>Código inline: <code>console.log('oi')</code></p>

<blockquote>Uma citação marcante de alguém famoso.</blockquote>

<hr> <!-- linha divisória horizontal, sem fechamento -->
<br> <!-- quebra de linha -->

Links e mídias

HTML
<!-- Link externo -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

<!-- Link interno (âncora) -->
<a href="#contato">Ir para Contato</a>

<!-- Imagem (alt é obrigatório para acessibilidade!) -->
<img src="foto.jpg" alt="Descrição da imagem" width="300" height="200">

<!-- Vídeo nativo -->
<video src="video.mp4" controls width="640"></video>

<!-- Áudio nativo -->
<audio src="musica.mp3" controls></audio>

Listas

HTML
<!-- Lista não ordenada (bullets) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Lista ordenada (numerada) -->
<ol>
  <li>Abra o editor</li>
  <li>Escreva o código</li>
  <li>Salve e abra no browser</li>
</ol>

<!-- Lista de definições -->
<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação da web</dd>
</dl>

📝 Formulários

Formulários são o jeito de coletar dados do usuário. Login, cadastro, pesquisa, carrinho — tudo usa formulário.

HTML — Formulário Completo
<form action="/cadastro" method="POST">

  <!-- label + input vinculados pelo for/id -->
  <label for="nome">Nome completo</label>
  <input type="text" id="nome" name="nome"
         placeholder="Seu nome" required>

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" required>

  <label for="senha">Senha</label>
  <input type="password" id="senha" name="senha"
         minlength="8" required>

  <label for="idade">Idade</label>
  <input type="number" id="idade" name="idade" min="18" max="120">

  <!-- Select -->
  <label for="cidade">Cidade</label>
  <select id="cidade" name="cidade">
    <option value="">Selecione...</option>
    <option value="sp">São Paulo</option>
    <option value="rj">Rio de Janeiro</option>
  </select>

  <!-- Textarea -->
  <label for="bio">Sobre você</label>
  <textarea id="bio" name="bio" rows="4"></textarea>

  <!-- Checkbox -->
  <input type="checkbox" id="termos" name="termos" required>
  <label for="termos">Aceito os termos de uso</label>

  <button type="submit">Cadastrar</button>

</form>

Tipos de input

typeO que faz
textCampo de texto livre
emailValida formato de e-mail automaticamente
passwordEsconde os caracteres digitados
numberSó aceita números, com setas de incremento
checkboxCaixa marcável (múltipla escolha)
radioOpção única de um grupo
fileSeletor de arquivo
dateSeletor de data nativo do navegador
rangeSlider de valor numérico
colorSeletor de cor
hiddenCampo invisível (envia dados sem mostrar)
submitBotão de envio (prefira <button type="submit">)

📊 Tabelas

Tabelas são para dados tabulares — tipo uma planilha. Nunca use tabelas para fazer layout de página (isso era coisa de 2003).

HTML — Tabela completa
<table>
  <caption>Produtos em estoque</caption>

  <thead>
    <tr>
      <th>Produto</th>
      <th>Preço</th>
      <th>Estoque</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Teclado mecânico</td>
      <td>R$ 350,00</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Mouse gamer</td>
      <td>R$ 180,00</td>
      <td>32</td>
    </tr>
    <tr>
      <!-- colspan: célula ocupa 2 colunas -->
      <td colspan="2">Total</td>
      <td>47</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Dados atualizados hoje</td>
    </tr>
  </tfoot>

</table>

🧠 HTML Semântico

HTML semântico significa usar a tag certa para o conteúdo certo. Em vez de usar <div> para tudo, você usa tags que têm significado.

Benefícios: melhor SEO, acessibilidade, legibilidade e manutenção do código.

❌ Div soup (evite)

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

✅ HTML Semântico (use)

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>
Estrutura
<header>
Cabeçalho da página ou de uma seção. Logo, nav, título.
Estrutura
<nav>
Bloco de links de navegação principal ou secundária.
Estrutura
<main>
Conteúdo principal. Um único por página, nunca aninhado.
Conteúdo
<section>
Seção temática com título próprio (h2, h3...).
Conteúdo
<article>
Conteúdo autônomo: post de blog, notícia, card de produto.
Conteúdo
<aside>
Conteúdo complementar: sidebar, notas, banners.
Texto
<figure> / <figcaption>
Agrupa imagem com sua legenda de forma semântica.
Texto
<time>
Data/hora legível por máquinas: <time datetime="2025-01-01">
Interativo
<details> / <summary>
Accordion nativo do HTML, sem JavaScript.
Estrutura
<footer>
Rodapé da página ou seção. Direitos, links, contato.

♿ Acessibilidade

Acessibilidade (a11y) é fazer com que seu site funcione para todas as pessoas — incluindo quem usa leitor de tela, teclado, tem baixa visão ou dificuldades motoras.

ℹ️

No Brasil, a Lei Brasileira de Inclusão (LBI) e as diretrizes WCAG 2.1 estabelecem padrões de acessibilidade digital. Sites do governo e grandes empresas são legalmente obrigados a seguir essas regras.

HTML — Boas Práticas de Acessibilidade
<!-- 1. Sempre use lang no html -->
<html lang="pt-BR">

<!-- 2. Alt em imagens (string vazia se decorativa) -->
<img src="foto.jpg" alt="Cachorro brincando no parque">
<img src="divider.png" alt="" role="presentation">

<!-- 3. Botões com texto descritivo -->
<button aria-label="Fechar modal">✕</button>

<!-- 4. Links com contexto claro -->
<!-- ❌ Ruim: -->
<a href="/artigo">clique aqui</a>
<!-- ✅ Bom: -->
<a href="/artigo">Leia o artigo sobre HTML semântico</a>

<!-- 5. Label vinculado ao input -->
<label for="email">E-mail</label>
<input type="email" id="email">

<!-- 6. Landmarks ARIA quando tags semânticas não bastam -->
<div role="alert" aria-live="polite">
  Formulário enviado com sucesso!
</div>

<!-- 7. Skip link para pular direto ao conteúdo -->
<a href="#main" class="skip-link">Pular para o conteúdo</a>

Checklist rápida

📌 Resumo HTML

  • HTML é linguagem de marcação — estrutura o conteúdo, não programa lógica
  • Todo documento tem: !DOCTYPE, html, head, body
  • Formulários coletam dados com form, input, label, button
  • Tabelas são para dados tabulares — nunca para layout
  • Tags semânticas (header, main, article...) melhoram SEO e acessibilidade
  • Acessibilidade começa com alt, label, bom contraste e navegação por teclado

Nesta página