Lição 25 de 50

Guia Rápido de Tags HTML: Cheatsheet Completo | Web Academy

A especificação do HTML conta com mais de 110 elementos padronizados pelo W3C e pelo WHATWG. No entanto, no dia a dia da engenharia front-end e da arquitetura web, cerca de 35 a 40 dessas tags respondem por mais de 95% de todo o código escrito em aplicações de produção. Este Guia Rápido de Tags HTML (Cheatsheet) foi estruturado como uma central de consulta rápida permanente, agrupando os elementos vitais por finalidade estrutural, textual, multimídia e interativa.

📑 Índice do Conteúdo

1. Estrutura Raiz e Metadados do Documento

Elementos que definem a casca do documento, a comunicação com o motor do navegador e os motores de busca (SEO):

Tag	Tipo	Sintaxe Típica	Finalidade & Papel no Documento
`<!DOCTYPE html>`	Declaração	`<!DOCTYPE html>`	Informa ao navegador que o documento utiliza a especificação moderna do HTML5, ativando o modo Standard.
`<html>`	Par (com fechamento)	`<html lang="pt-BR">`	Elemento raiz de toda a página; envolve obrigatoriamente as tags `<head>` e `<body>`.
`<head>`	Par	`<head>...</head>`	Contém os metadados da página, como charset, título, links de CSS e tags Open Graph para redes sociais.
`<title>`	Par	`<title>Título SEO</title>`	Define o título oficial exibido na aba do navegador e no cabeçalho dos resultados orgânicos do Google.
`<meta>`	Vazia (Self-closing)	`<meta name="description" ...>`	Declara parâmetros de configuração (como codificação UTF-8, viewport mobile e meta-descrições).
`<link>`	Vazia	`<link rel="stylesheet" ...>`	Vincula recursos externos, como arquivos CSS, favicons, fontes e canonical tags.
`<body>`	Par	`<body>...</body>`	Envolve todo o conteúdo visível renderizado na tela do usuário.

2. Elementos Estruturais e Semânticos do HTML5

Substituem os contêineres <div> genéricos, conferindo significado claro aos motores de busca e softwares leitores de tela:

Tag Semântica	Papel Estrutural	Quando Utilizar (Regra de Ouro)
`<header>`	Cabeçalho introdutório	Topo da página ou cabeçalho de um artigo específico (logotipos, títulos e navegação).
`<nav>`	Bloco de navegação	Conjunto primário de links de menu, paginação ou índices de conteúdo.
`<main>`	Conteúdo principal único	O miolo central e exclusivo da página (deve existir apenas um por documento).
`<article>`	Conteúdo autônomo	Postagens de blog, produtos de e-commerce ou cartões que fazem sentido mesmo se distribuídos isoladamente via RSS.
`<section>`	Seção temática	Divisão de conteúdo que possui um tema comum (geralmente acompanhada de um título `<h2>`).
`<aside>`	Conteúdo tangencial/secundário	Barras laterais, widgets de posts relacionados, glossários e banners publicitários.
`<footer>`	Rodapé institucional	Base da página com direitos autorais, links legais, redes sociais e informações de contato.

3. Tipografia, Títulos e Blocos de Texto

Controlam a hierarquia visual e a semântica textual do conteúdo:

Tag	Display	Descrição e Boas Práticas
`<h1>` a `<h6>`	Block	Títulos hierárquicos. O `<h1>` deve ser único na página; `<h2>` a `<h6>` subdividem seções sem pular níveis.
`<p>`	Block	Parágrafo padrão de texto com espaçamentos marginais calculados pelo navegador.
`<blockquote>`	Block	Citação longa de fonte externa (geralmente acompanhada do atributo `cite`).
`<pre>`	Block	Texto pré-formatado: preserva exatamente todos os espaços em branco e quebras de linha digitados.
`<code>`	Inline	Trecho de código-fonte, comandos de terminal ou nomes de variáveis (geralmente em fonte monospace).
`<ul>` e `<ol>`	Block	Listas não-ordenadas (com marcadores) e ordenadas (numeradas sequencialmente).
`<li>`	List-item	Item individual pertencente a uma lista `<ul>` ou `<ol>`.

4. Elementos Inline, Ênfase e Links

Tags aplicadas dentro de frases e parágrafos sem quebrar o fluxo linear da linha:

Tag	Exemplo	Significado Semântico
`<a>`	`<a href="...">Link</a>`	Hiperlink de navegação interna, externa ou âncora.
`<strong>`	`<strong>Importante</strong>`	Importância grave e urgência (leitores de tela enfatizam com entonação firme).
`<em>`	`<em>Ênfase</em>`	Ênfase na entonação de uma palavra (exibida em itálico pelo navegador).
`<span>`	`<span class="...">`	Contêiner inline neutro sem significado semântico, ideal para estilização com CSS.
`<mark>`	`<mark>Destaque</mark>`	Marcação de texto relevante no contexto (efeito visual de “marca-texto”).
`<br>`	`<br>`	Quebra de linha forçada no texto (para poesias, endereços físicos ou letras de música).
`<hr>`	`<hr>`	Linha divisória temática entre parágrafos (mudança de assunto).

5. Formulários e Elementos de Interação

Constroem a interface de coleta de dados e submissão de comandos:

Tag	Atributos Principais	Função
`<form>`	`action`, `method`	Contêiner delimitador que orquestra o envio dos dados via GET ou POST.
`<input>`	`type`, `name`, `required`	Campo versátil de entrada (text, password, email, checkbox, radio, file, submit).
`<textarea>`	`rows`, `cols`, `maxlength`	Campo de entrada de texto longo com múltiplas linhas (mensagens, comentários).
`<button>`	`type="submit\|button"`	Botão de ação clicável capaz de abrigar textos, ícones e HTML interno.
`<label>`	`for="id_do_campo"`	Rótulo acessível obrigatório associado a um campo de entrada.
`<select>`	`name`, `multiple`	Menu suspenso de seleção de opções (dropdown).
`<option>`	`value`, `selected`	Item individual selecionável dentro de um `<select>`.

6. Exemplo Prático: Documento Semântico Modelo no Playground IDE

O exemplo abaixo reúne todas as principais tags deste guia em uma única página funcional e perfeitamente estruturada:

HTML5 — Arquitetura Canônica Completa sem Divite
pagina-semantica-modelo.html

HTML 100 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal Modelo Web Academy</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
            background: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        header {
            background: #0f172a;
            color: white;
            padding: 20px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav a {
            color: #38bdf8;
            text-decoration: none;
            margin-left: 18px;
            font-weight: 700;
        }
        .container {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 32px;
        }
        article {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        aside {
            background: #f1f5f9;
            padding: 24px;
            border-radius: 12px;
            height: fit-content;
        }
        footer {
            background: #0f172a;
            color: #94a3b8;
            text-align: center;
            padding: 24px;
            margin-top: 60px;
            font-size: 13px;
        }
    </style>
</head>
<body>
 
    <!-- Cabeçalho da Aplicação -->
    <header>
        <h2 style="margin: 0; font-size: 20px;">Web-ZoneWare</h2>
        <nav aria-label="Menu Principal">
            <a href="#">Início</a>
            <a href="#">Cursos</a>
            <a href="#">Ferramentas</a>
        </nav>
    </header>
 
    <!-- Miolo Central Dividido em Conteúdo e Barra Lateral -->
    <main class="container">
        <article>
            <header>
                <h1 style="color: #0f172a; font-size: 28px; margin-top: 0;">A Revolução Semântica do HTML5</h1>
                <time datetime="2026-10-20" style="color: #64748b; font-size: 13px;">Publicado em 20 de Outubro de 2026</time>
            </header>
 
            <section>
                <p>O uso de tags corretas melhora drasticamente o posicionamento orgânico no Google e a usabilidade para softwares assistivos.</p>
                <blockquote cite="https://w3.org" style="border-left: 4px solid #0284c7; margin: 20px 0; padding-left: 16px; color: #475569;">
                    "A semântica confere inteligência aos dados da web."
                </blockquote>
                <p>Para destacar conceitos vitais, utilize <strong>marcações semânticas</strong> e evite divs genéricas.</p>
            </section>
        </article>
 
        <aside>
            <h3 style="margin-top: 0; font-size: 16px;">Sobre o Autor</h3>
            <p style="font-size: 14px;">Equipe editorial da Web Academy dedicada à capacitação prática de desenvolvedores front-end.</p>
        </aside>
    </main>
 
    <!-- Rodapé Oficial -->
    <footer>
        <span>&copy;&nbsp;2026 Web-ZoneWare. Conteúdo 100% Prático e Acessível.</span>
    </footer>
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Modelo Web Academy</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
background: #f8fafc;
color: #1e293b;
line-height: 1.6;
}
header {
background: #0f172a;
color: white;
padding: 20px 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: #38bdf8;
text-decoration: none;
margin-left: 18px;
font-weight: 700;
}
.container {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
article {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
aside {
background: #f1f5f9;
padding: 24px;
border-radius: 12px;
height: fit-content;
}
footer {
background: #0f172a;
color: #94a3b8;
text-align: center;
padding: 24px;
margin-top: 60px;
font-size: 13px;
}
</style>
</head>
<body>
<!-- Cabeçalho da Aplicação -->
<header>
<h2 style="margin: 0; font-size: 20px;">Web-ZoneWare</h2>
<nav aria-label="Menu Principal">
<a href="#">Início</a>
<a href="#">Cursos</a>
<a href="#">Ferramentas</a>
</nav>
</header>
<!-- Miolo Central Dividido em Conteúdo e Barra Lateral -->
<main class="container">
<article>
<header>
<h1 style="color: #0f172a; font-size: 28px; margin-top: 0;">A Revolução Semântica do HTML5</h1>
<time datetime="2026-10-20" style="color: #64748b; font-size: 13px;">Publicado em 20 de Outubro de 2026</time>
</header>
<section>
<p>O uso de tags corretas melhora drasticamente o posicionamento orgânico no Google e a usabilidade para softwares assistivos.</p>
<blockquote cite="https://w3.org" style="border-left: 4px solid #0284c7; margin: 20px 0; padding-left: 16px; color: #475569;">
"A semântica confere inteligência aos dados da web."
</blockquote>
<p>Para destacar conceitos vitais, utilize <strong>marcações semânticas</strong> e evite divs genéricas.</p>
</section>
</article>
<aside>
<h3 style="margin-top: 0; font-size: 16px;">Sobre o Autor</h3>
<p style="font-size: 14px;">Equipe editorial da Web Academy dedicada à capacitação prática de desenvolvedores front-end.</p>
</aside>
</main>
<!-- Rodapé Oficial -->
<footer>
<span>&copy;&nbsp;2026 Web-ZoneWare. Conteúdo 100% Prático e Acessível.</span>
</footer>
</body>
</html>

Abra e edite este template semântico no editor de código em tempo real:
⚡ Testar no Playground IDE

7. Tags Obsoletas Que Você Deve Banir do Seu Código

O HTML5 descontinuou definitivamente tags puramente estéticas criadas nos primórdios da web. Se você encontrar qualquer uma das tags abaixo em códigos antigos, substitua-as imediatamente por CSS moderno:

<font> $\rightarrow$ Substitua por propriedades CSS font-family e color.
<center> $\rightarrow$ Substitua por text-align: center ou Flexbox/Grid no CSS.
<marquee> $\rightarrow$ Substitua por animações CSS @keyframes (melhora a acessibilidade e o Core Web Vitals).
<strike> $\rightarrow$ Substitua por <del> (se o texto foi excluído) ou <s> (se não é mais relevante).

💡

Higienize Seus Códigos Antigos: Caso precise modernizar arquivos antigos repletos de tags obsoletas e espaçamentos quebrados, passe o código pelo Limpador e Formatador HTML do Web-ZoneWare.

🚀

Próximo Passo Didático: Na Lição 26: Diferenças entre HTML e XHTML (que encerra o Módulo 2), entenderemos o rigor sintático do XHTML baseado em XML, as regras de fechamento de tags vazias e por que o HTML5 adotou uma abordagem mais pragmática e tolerante sem abrir mão da qualidade.