Referência de tags HTML
Explore todas as tags HTML5 com descrições e exemplos de uso.
93 tags
| Tag | Descrição | Exemplo |
|---|---|---|
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<html> | Root element of an HTML page | <html lang="en"> |
<head> | Container for metadata | <head>...</head> |
<title> | Defines the document title shown in browser tab | <title>Page Title</title> |
<body> | Contains the visible page content | <body>...</body> |
<meta> | Defines metadata about the document | <meta charset="UTF-8"> |
<link> | Links to external resources (CSS, icons) | <link rel="stylesheet" href="style.css"> |
<script> | Embeds or references JavaScript | <script src="app.js"></script> |
<style> | Embeds CSS styles | <style>body { margin: 0; }</style> |
<base> | Base URL for all relative URLs in the page | <base href="https://example.com/"> |
<h1>–<h6> | Heading levels 1 through 6 | <h1>Page Title</h1> |
<p> | Paragraph | <p>Paragraph text.</p> |
<br> | Line break | Line one<br>Line two |
<hr> | Thematic break (horizontal rule) | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code here </pre> |
<blockquote> | Long block quotation from another source | <blockquote cite="url">Quote</blockquote> |
<q> | Short inline quotation | <q>Short quote</q> |
<abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
<address> | Contact information for the article or page | <address>Email: contact@example.com</address> |
<cite> | Title of a cited creative work | <cite>Hamlet</cite> |
<code> | Inline code fragment | <code>console.log()</code> |
<dfn> | Term being defined | <dfn>HTML</dfn> is a markup language. |
<kbd> | Keyboard input | Press <kbd>Ctrl+C</kbd> |
<samp> | Sample output from a program | <samp>Error 404</samp> |
<var> | Variable in math or programming | <var>x</var> = 5 |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | E = mc<sup>2</sup> |
<mark> | Highlighted/marked text | <mark>important</mark> |
<del> | Deleted text | <del>old text</del> |
<ins> | Inserted text | <ins>new text</ins> |
<small> | Small print or side comments | <small>Terms apply</small> |
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasized text (italic) | <em>emphasis</em> |
<b> | Bold text (stylistic, no extra importance) | <b>bold</b> |
<i> | Italic text (stylistic, or technical terms) | <i>italic</i> |
<u> | Underlined text | <u>underline</u> |
<s> | Strikethrough text (no longer accurate) | <s>old price</s> |
<span> | Generic inline container for styling | <span class="highlight">text</span> |
<ul> | Unordered list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>Step 1</li></ol> |
<li> | List item (in ul or ol) | <li>List item</li> |
<dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
<dt> | Term in a description list | <dt>HTML</dt> |
<dd> | Description in a description list | <dd>HyperText Markup Language</dd> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<nav> | Navigation links section | <nav>...</nav> |
<header> | Introductory content or navigation | <header><h1>Site Title</h1></header> |
<footer> | Footer for a section or page | <footer>© 2025</footer> |
<main> | Main content of the document | <main>...</main> |
<article> | Self-contained composition (blog post, news) | <article>...</article> |
<section> | Thematic grouping of content | <section>...</section> |
<aside> | Content tangentially related to main content | <aside>Sidebar</aside> |
<div> | Generic block-level container | <div class="card">...</div> |
<details> | Disclosure widget (expandable) | <details><summary>More</summary>...</details> |
<summary> | Summary/caption for a details element | <summary>Show more</summary> |
<dialog> | Dialog box or window | <dialog open>Content</dialog> |
<img> | Embeds an image | <img src="photo.jpg" alt="Description"> |
<audio> | Embeds audio content | <audio src="sound.mp3" controls></audio> |
<video> | Embeds video content | <video src="movie.mp4" controls></video> |
<source> | Media source for audio/video/picture | <source src="video.webm" type="video/webm"> |
<track> | Text tracks for video/audio (subtitles) | <track kind="subtitles" src="sub.vtt"> |
<picture> | Container for multiple image sources | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> | Self-contained content with optional caption | <figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
<figcaption> | Caption for a figure element | <figcaption>Image caption</figcaption> |
<canvas> | Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | Inline SVG vector graphics | <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg> |
<iframe> | Embeds another HTML page | <iframe src="https://example.com"></iframe> |
<embed> | Embeds external content (plugin) | <embed src="file.pdf" type="application/pdf"> |
<object> | Embeds external resource (object) | <object data="file.pdf" type="application/pdf"></object> |
<table> | Table | <table><tr><td>Cell</td></tr></table> |
<thead> | Header rows of a table | <thead><tr><th>Col</th></tr></thead> |
<tbody> | Body rows of a table | <tbody>...</tbody> |
<tfoot> | Footer rows of a table | <tfoot>...</tfoot> |
<tr> | Table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
<th> | Header cell | <th scope="col">Name</th> |
<td> | Data cell | <td>Content</td> |
<caption> | Table caption | <caption>Sales Data 2025</caption> |
<colgroup> | Group of table columns | <colgroup><col span="2"></colgroup> |
<col> | Table column properties | <col style="width: 50%"> |
<form> | HTML form for user input | <form action="/submit" method="POST">...</form> |
<input> | Input control (text, checkbox, radio, etc.) | <input type="text" name="username"> |
<textarea> | Multi-line text input | <textarea rows="4" name="message"></textarea> |
<button> | Clickable button | <button type="submit">Submit</button> |
<select> | Drop-down selection list | <select><option>Option 1</option></select> |
<option> | Option in a select element | <option value="1">Option 1</option> |
<optgroup> | Group of related options in select | <optgroup label="Group"><option>...</option></optgroup> |
<label> | Label for a form element | <label for="email">Email:</label> |
<fieldset> | Group of related form elements | <fieldset><legend>Personal</legend>...</fieldset> |
<legend> | Caption for a fieldset | <legend>Personal Info</legend> |
<datalist> | List of predefined options for an input | <datalist id="browsers"><option value="Chrome"></datalist> |
<output> | Result of a calculation | <output name="result">0</output> |
<progress> | Progress indicator | <progress value="70" max="100">70%</progress> |
<meter> | Scalar measurement within a range | <meter value="0.7" min="0" max="1">70%</meter> |
Sobre esta ferramenta
A referência de tags HTML é uma ferramenta completa que lista todas as tags padrão HTML5 organizadas por categoria.
Cada entrada inclui a finalidade da tag, uma breve descrição e um exemplo de uso prático para acelerar o desenvolvimento e o aprendizado.
Como usar
- Digite o nome de uma tag na caixa de pesquisa ou selecione um filtro de categoria.
- Clique no nome da tag para copiá-lo para a área de transferência.
- Leia a coluna Descrição para entender a finalidade da tag.
- Confira a coluna Exemplo para ver um trecho de código.
Casos de uso
Use quando não se lembrar de uma tag específica, ao explorar elementos HTML5 ou como guia rápido para iniciantes em HTML.
Perguntas frequentes
- Todas as tags HTML5 estão incluídas? — Sim, todas as principais tags definidas na especificação W3C HTML5 estão cobertas.
- Como copio o nome de uma tag? — Clique no nome da tag na tabela e ela será copiada para a área de transferência instantaneamente.
- Como uso o filtro de categorias? — Clique em um dos botões de categoria no topo para mostrar apenas as tags dessa categoria.