Lista de tags HTML5 essenciais com exemplos

🏗️ Estrutura Básica

Define a base de todo documento HTML.

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha primeira página</title>
  </head>
  <body>
    <!-- Comentário HTML -->
  </body>
</html>

<!DOCTYPE html>: indica que usa HTML5.
<html>: raiz do documento.
<head>: contém metadados e configurações.
<meta>: define informações como codificação ou viewport responsiva.
<title>: título que aparece na aba do navegador.
<body>: contém todo o conteúdo visível da página.
<!– Qualquer texto –>: comentário que só o desenvolvedor vê no código.

📝 Texto e Formatação

Organizam e dão estilo ao texto do documento.

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Isto é um parágrafo.</p>
<strong>Texto importante</strong>
<em>Texto com ênfase</em>
<span style="color:red;">Texto em linha</span>
<br> Quebra de linha
<a href="https://exemplo.com">Link</a>

<h1>–<h6>: hierarquia de títulos, sendo <h1> o mais importante e <h6> o menos.
<p>: define um parágrafo.
<strong>: indica importância (texto em negrito).
<em>: destaca com ênfase (texto em itálico).
<span>: contêiner em linha para aplicar estilos.
<br>: insere uma quebra de linha.
<a>: cria um link para outra página ou recurso (atributo href).

🎬 Multimídia

Inserem imagens, vídeos, áudios ou gráficos SVG.

<img src="foto.jpg" alt="Descrição da imagem">

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

<img>: insere uma imagem (o atributo alt descreve seu conteúdo para acessibilidade).
<svg>: permite criar gráficos vetoriais escaláveis.
<video>: exibe um vídeo com controles.
<audio>: reproduz som ou música.
<source>: define os arquivos multimídia dentro de <video> ou <audio>.

🧩 Formulários

Permitem coletar informações do usuário através de campos interativos.

<form action="/enviar" method="post">
  <label>Nome:</label>
  <input type="text" name="nome">

  <label>Idade:</label>
  <input type="number" name="idade">

  <label>Gênero:</label>
  <input type="radio" name="genero" value="homem"> Homem
  <input type="radio" name="genero" value="mulher"> Mulher

  <label>Hobbies:</label>
  <input type="checkbox" name="esporte"> Esporte
  <input type="checkbox" name="musica"> Música

  <label>Comentários:</label>
  <textarea name="comentarios" rows="3" cols="30"></textarea>

  <label>País:</label>
  <select name="pais">
    <option>Espanha</option>
    <option>México</option>
  </select>

  <input type="submit" value="Enviar">
</form>

<form>: agrupa os campos do formulário.
<label>: etiqueta descritiva de um campo.
<input type=”text”>: campo de texto curto.
<input type=”number”>: campo numérico.
<input type=”radio”>: opção única dentro de um grupo.
<input type=”checkbox”>: seleção múltipla.
<textarea>: área para texto longo ou comentários.
<select> / <option>: lista suspensa.
<input type=”submit”>: botão para enviar o formulário.

🧱 Semântica SEO

Organizam o conteúdo de forma estruturada e compreensível para mecanismos de busca.

<header>Cabeçalho do site</header>
<nav>Menu de navegação</nav>
<main>Conteúdo principal</main>
<section>Seção temática</section>
<article>Artigo ou post</article>
<aside>Informação lateral</aside>
<footer>Rodapé da página</footer>

<header>: cabeçalho do site ou seção.
<nav>: contém links de navegação.
<main>: conteúdo principal da página.
<section>: agrupa conteúdos relacionados.
<article>: bloco independente de conteúdo (como um post).
<aside>: informação lateral ou complementar.
<footer>: rodapé da página.

🌈 Outras Tags Úteis

<ul>
  <li>Elemento A</li>
  <li>Elemento B</li>
</ul>

<ol type="A">
  <li>Primeiro item</li>
  <li>Segundo item</li>
</ol>

<table>
  <tr><th>Nome</th><th>Idade</th></tr>
  <tr><td>Ana</td><td>30</td></tr>
</table>

<figure>
  <img src="imagem.jpg" alt="Descrição">
  <figcaption>Legenda da imagem</figcaption>
</figure>

<ul>: lista não ordenada (marcadores).
<ol>: lista ordenada (type="A", "a", "I", "1").
<li>: elemento dentro de uma lista.
<table>: cria tabelas de dados.
<tr>: linha da tabela.
<th>: célula de cabeçalho.
<td>: célula normal de dados.
<figure> e <figcaption>: imagem com legenda descritiva.