Carregando...
Referência de Tags HTML
Referência de Tags HTML é o alicerce de toda construção web — como tijolos numa casa ou capítulos num livro. Ela lista todos os elementos disponíveis no HTML5, explicando quando e como usá-los de forma eficiente. Para qualquer projeto — seja um portfólio pessoal, blog, loja virtual, site de notícias ou rede social — compreender cada tag permite estruturar o conteúdo corretamente e garantir acessibilidade, performance e SEO.
Este guia cobre todas as tags padrão do HTML5 com exemplos práticos e explicações diretas. Você aprenderá não apenas o que cada tag faz, mas como aplicá-la no mundo real com boas práticas. Tal como decorar uma sala com propósito ou escrever uma carta clara, usar as tags certas no HTML é o primeiro passo para sites bem organizados e responsivos.
Prepare-se para dominar a base estrutural da web com profundidade e clareza.
Exemplo Básico
html
HTML Code
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Exemplo Completo</title>
</head>
<body>
<h1>Referência Completa</h1>
<p>Explorando todas as tags HTML.</p>
</body>
</html>Este exemplo representa a estrutura base de qualquer documento HTML válido. Cada parte cumpre uma função essencial:
<!<a href="/pt/html/html-doctype/" class="smart-link">DOCTYPE</a> html>: Declara que o documento segue o padrão HTML5.<html lang="pt">: Inicia o documento e define o idioma.<head>: Contém metadados como título, charset, e links externos.<title>: Nome visível na aba do navegador.<body>: Onde vai todo o conteúdo visível do site.<h1>e<p>: Elementos básicos de conteúdo e título.
Essa estrutura serve como base para qualquer aplicação — de portfólios simples a sistemas de e-commerce complexos.
Exemplo Prático
html
HTML Code
<article>
<header>
<h2>Nova Promoção</h2>
<time datetime="2025-07-29">29/07/2025</time>
</header>
<p>Ganhe frete grátis acima de R$150!</p>
<a href="/promocao">Ver detalhes</a>
</article>Boas práticas:
- Use tags semânticas como
<article>,<section>,<header>para melhor SEO. - Adicione atributos como
alt,aria-*elabelpara acessibilidade. - Mantenha a estrutura indentada e clara.
-
Evite misturar estilo ou comportamento no HTML — use CSS e JS separadamente.
Erros comuns: -
Aninhar tags de forma incorreta (
<p><div>...). - Usar
<div>para tudo ao invés de elementos com significado. - Esquecer atributos obrigatórios como
altem imagens. - Código não-validado pode funcionar visualmente mas falha em indexação e acessibilidade.
Dica: use https://validator.w3.org/ para validar seus arquivos HTML.
📊 Referência Completa de Tags HTML
| Tag | Descrição | Exemplo |
|---|---|---|
| <a> | Tag HTML: <a> | <a>Exemplo</a> |
| <abbr> | Tag HTML: <abbr> | <abbr>Exemplo</abbr> |
| <address> | Tag HTML: <address> | <address>Exemplo</address> |
| <area> | Tag HTML: <area> | <area /> |
| <article> | Tag HTML: <article> | <article>Exemplo</article> |
| <aside> | Tag HTML: <aside> | <aside>Exemplo</aside> |
| <audio> | Tag HTML: <audio> | <audio>Exemplo</audio> |
| <b> | Tag HTML: <b> | <b>Exemplo</b> |
| <base> | Tag HTML: <base> | <base /> |
| <bdi> | Tag HTML: <bdi> | <bdi>Exemplo</bdi> |
| <bdo> | Tag HTML: <bdo> | <bdo>Exemplo</bdo> |
| <blockquote> | Tag HTML: <blockquote> | <blockquote>Exemplo</blockquote> |
| <body> | Tag HTML: <body> | <body>Exemplo</body> |
| <br> | Tag HTML: <br> | <br /> |
| <button> | Tag HTML: <button> | <button>Exemplo</button> |
| <canvas> | Tag HTML: <canvas> | <canvas>Exemplo</canvas> |
| <caption> | Tag HTML: <caption> | <caption>Exemplo</caption> |
| <cite> | Tag HTML: <cite> | <cite>Exemplo</cite> |
| <col> | Tag HTML: <col> | <col /> |
| <colgroup> | Tag HTML: <colgroup> | <colgroup>Exemplo</colgroup> |
| <data> | Tag HTML: <data> | <data>Exemplo</data> |
| <datalist> | Tag HTML: <datalist> | <datalist>Exemplo</datalist> |
| <dd> | Tag HTML: <dd> | <dd>Exemplo</dd> |
| <del> | Tag HTML: <del> | <del>Exemplo</del> |
| <details> | Tag HTML: <details> | <details>Exemplo</details> |
| <dfn> | Tag HTML: <dfn> | <dfn>Exemplo</dfn> |
| <dialog> | Tag HTML: <dialog> | <dialog>Exemplo</dialog> |
| <div> | Tag HTML: <div> | <div>Exemplo</div> |
| <dl> | Tag HTML: <dl> | <dl>Exemplo</dl> |
| <dt> | Tag HTML: <dt> | <dt>Exemplo</dt> |
| <em> | Tag HTML: <em> | <em>Exemplo</em> |
| <embed> | Tag HTML: <embed> | <embed /> |
| <fieldset> | Tag HTML: <fieldset> | <fieldset>Exemplo</fieldset> |
| <figcaption> | Tag HTML: <figcaption> | <figcaption>Exemplo</figcaption> |
| <figure> | Tag HTML: <figure> | <figure>Exemplo</figure> |
| <footer> | Tag HTML: <footer> | <footer>Exemplo</footer> |
| <form> | Tag HTML: <form> | <form>Exemplo</form> |
| <h1> | Tag HTML: <h1> | <h1>Exemplo</h1> |
| <h2> | Tag HTML: <h2> | <h2>Exemplo</h2> |
| <h3> | Tag HTML: <h3> | <h3>Exemplo</h3> |
| <h4> | Tag HTML: <h4> | <h4>Exemplo</h4> |
| <h5> | Tag HTML: <h5> | <h5>Exemplo</h5> |
| <h6> | Tag HTML: <h6> | <h6>Exemplo</h6> |
| <head> | Tag HTML: <head> | <head>Exemplo</head> |
| <header> | Tag HTML: <header> | <header>Exemplo</header> |
| <hgroup> | Tag HTML: <hgroup> | <hgroup>Exemplo</hgroup> |
| <hr> | Tag HTML: <hr> | <hr /> |
| <html> | Tag HTML: <html> | <html>Exemplo</html> |
| <i> | Tag HTML: <i> | <i>Exemplo</i> |
| <iframe> | Tag HTML: <iframe> | <iframe>Exemplo</iframe> |
| <img> | Tag HTML: <img> | <img /> |
| <input> | Tag HTML: <input> | <input /> |
| <ins> | Tag HTML: <ins> | <ins>Exemplo</ins> |
| <kbd> | Tag HTML: <kbd> | <kbd>Exemplo</kbd> |
| <label> | Tag HTML: <label> | <label>Exemplo</label> |
| <legend> | Tag HTML: <legend> | <legend>Exemplo</legend> |
| <li> | Tag HTML: <li> | <li>Exemplo</li> |
| <link> | Tag HTML: <link> | <link /> |
| <main> | Tag HTML: <main> | <main>Exemplo</main> |
| <map> | Tag HTML: <map> | <map>Exemplo</map> |
| <mark> | Tag HTML: <mark> | <mark>Exemplo</mark> |
| <meta> | Tag HTML: <meta> | <meta /> |
| <meter> | Tag HTML: <meter> | <meter>Exemplo</meter> |
| <nav> | Tag HTML: <nav> | <nav>Exemplo</nav> |
| <noscript> | Tag HTML: <noscript> | <noscript>Exemplo</noscript> |
| <object> | Tag HTML: <object> | <object>Exemplo</object> |
| <ol> | Tag HTML: <ol> | <ol>Exemplo</ol> |
| <optgroup> | Tag HTML: <optgroup> | <optgroup>Exemplo</optgroup> |
| <option> | Tag HTML: <option> | <option>Exemplo</option> |
| <output> | Tag HTML: <output> | <output>Exemplo</output> |
| <p> | Tag HTML: <p> | <p>Exemplo</p> |
| <param> | Tag HTML: <param> | <param>Exemplo</param> |
| <picture> | Tag HTML: <picture> | <picture>Exemplo</picture> |
| <pre> | Tag HTML: <pre> | <pre>Exemplo</pre> |
| <progress> | Tag HTML: <progress> | <progress>Exemplo</progress> |
| <q> | Tag HTML: <q> | <q>Exemplo</q> |
| <rp> | Tag HTML: <rp> | <rp>Exemplo</rp> |
| <rt> | Tag HTML: <rt> | <rt>Exemplo</rt> |
| <ruby> | Tag HTML: <ruby> | <ruby>Exemplo</ruby> |
| <s> | Tag HTML: <s> | <s>Exemplo</s> |
| <samp> | Tag HTML: <samp> | <samp>Exemplo</samp> |
| <script> | Tag HTML: <script> | <script>Exemplo</script> |
| <section> | Tag HTML: <section> | <section>Exemplo</section> |
| <select> | Tag HTML: <select> | <select>Exemplo</select> |
| <small> | Tag HTML: <small> | <small>Exemplo</small> |
| <source> | Tag HTML: <source> | <source /> |
| <span> | Tag HTML: <span> | <span>Exemplo</span> |
| <strong> | Tag HTML: <strong> | <strong>Exemplo</strong> |
| <style> | Tag HTML: <style> | <style>Exemplo</style> |
| <sub> | Tag HTML: <sub> | <sub>Exemplo</sub> |
| <summary> | Tag HTML: <summary> | <summary>Exemplo</summary> |
| <sup> | Tag HTML: <sup> | <sup>Exemplo</sup> |
| <table> | Tag HTML: <table> | <table>Exemplo</table> |
| <tbody> | Tag HTML: <tbody> | <tbody>Exemplo</tbody> |
| <td> | Tag HTML: <td> | <td>Exemplo</td> |
| <template> | Tag HTML: <template> | <template>Exemplo</template> |
| <textarea> | Tag HTML: <textarea> | <textarea>Exemplo</textarea> |
| <tfoot> | Tag HTML: <tfoot> | <tfoot>Exemplo</tfoot> |
| <th> | Tag HTML: <th> | <th>Exemplo</th> |
| <thead> | Tag HTML: <thead> | <thead>Exemplo</thead> |
| <time> | Tag HTML: <time> | <time>Exemplo</time> |
| <title> | Tag HTML: <title> | <title>Exemplo</title> |
| <tr> | Tag HTML: <tr> | <tr>Exemplo</tr> |
| <track> | Tag HTML: <track> | <track /> |
| <u> | Tag HTML: <u> | <u>Exemplo</u> |
| <ul> | Tag HTML: <ul> | <ul>Exemplo</ul> |
| <var> | Tag HTML: <var> | <var>Exemplo</var> |
| <video> | Tag HTML: <video> | <video>Exemplo</video> |
| <wbr> | Tag HTML: <wbr> | <wbr /> |
Resumo:
Você aprendeu todas as tags do HTML5 e como aplicá-las com propósito. O HTML define a estrutura e significado do conteúdo, enquanto CSS cuida da aparência e JavaScript da interação. Ter domínio dessas tags é essencial para criar páginas limpas, acessíveis e fáceis de manter.
Próximos passos:
- Aprenda CSS para estilizar seu HTML.
- Explore JavaScript para interatividade.
- Estude ARIA para acessibilidade.
- Pratique construindo páginas reais e validando seu código.
Esse domínio é o primeiro passo para qualquer desenvolvedor front-end sério.
🧠 Teste Seu Conhecimento
Pronto para Começar
Teste seu Conhecimento
Teste sua compreensão deste tópico com questões práticas.
4
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo