Docs executáveis de HTML: Tags HTML

Q: Qual a diferença entre tag HTML e elemento HTML?

Uma tag é a marcação que você digita, como ou . Um elemento é o objeto completo que o navegador monta a partir dela: a tag de abertura, seus atributos, o conteúdo e a tag de fechamento. Oi são duas tags que formam um elemento p.

Q: As tags HTML diferenciam maiúsculas de minúsculas?

Não. e geram o mesmo elemento, assim como qualquer mistura de maiúsculas e minúsculas. Minúsculas são o estilo padrão e o que a maioria dos formatadores produz.

O que é uma tag HTML

Uma tag HTML é um nome entre sinais de menor e maior que marca um trecho de conteúdo. A maioria das tags vem em pares: uma tag de abertura como <p> e uma tag de fechamento com barra como </p>. Tudo o que fica entre elas é o conteúdo, e o pacote inteiro é um elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Troque <h1> por <h2> (na tag de abertura e na de fechamento) e o título fica menor. É o nome da tag que diz ao navegador o que é aquele conteúdo.

Anatomia: tags, atributos e elementos

<a href="/docs/html/links" class="nav">Links</a>

Parte	No exemplo
Tag de abertura	`<a href="/docs/html/links" class="nav">`
Nome da tag	`a`
Atributos	`href="/docs/html/links"` e `class="nav"`
Conteúdo	`Links`
Tag de fechamento	`</a>`
Elemento	tudo isso junto

Os atributos sempre vão na tag de abertura, nunca na de fechamento. Eles são explicados na página de atributos.

Os nomes das tags não diferenciam maiúsculas de minúsculas: <P> e <p> são a mesma coisa. Escreva em minúsculas.

Tags vazias: sem tag de fechamento

Alguns elementos não podem conter nada, então têm só a tag de abertura. Eles se chamam elementos vazios (void elements; também se fala em tags auto fechadas):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

A lista completa: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Você pode escrevê-las como <br />, com barra. A barra não faz nada em HTML; ela é permitida para que código no estilo XHTML continue funcionando. Uma barra numa tag normal, como <div />, também é ignorada, o que significa que a div continua aberta.

Aninhando tags

Elementos vão dentro de outros elementos. A regra é: feche as tags na ordem inversa em que você as abriu. A última aberta é a primeira fechada.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Os navegadores não rejeitam um aninhamento quebrado. Eles o consertam, e o conserto nem sempre é o que você queria. Este exemplo entrega dois trechos mal aninhados ao parser do navegador e mostra a estrutura que ele de fato montou:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Acontecem dois consertos. As tags <b> e <i> sobrepostas são divididas em elementos extras. E um <p> não pode conter uma <div>, então o navegador fecha o parágrafo antes da div e transforma o </p> solto num parágrafo novo e vazio. Quando CSS ou JavaScript se comportam de um jeito estranho, aninhamento quebrado é uma das primeiras coisas a verificar.

Elementos block e inline

A maioria das tags cai em dois grupos de exibição. Elementos block (div, p, h1 a h6, ul, section) começam numa linha nova e ocupam a largura toda. Elementos inline (span, a, strong, em, code) ficam dentro de uma linha de texto e têm só a largura do conteúdo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

As caixas azuis se estendem pela página; as âmbar envolvem só o texto. O CSS pode mudar isso com a propriedade display, mas cada tag começa com o seu padrão. Veja div e span para os dois contêineres genéricos.

As tags HTML mais comuns

Tag	Para que serve
`<html>`, `<head>`, `<body>`	O esqueleto do documento
`<title>`, `<meta>`, `<link>`	Informações da página no head
`<h1>` a `<h6>`	Títulos
`<p>`	Parágrafo
`<a>`	Link
`<img>`	Imagem
`<ul>`, `<ol>`, `<li>`	Listas
`<strong>`, `<em>`	Texto importante e texto enfatizado
`<br>`, `<hr>`	Quebra de linha, quebra temática
`<div>`, `<span>`	Contêineres genéricos block e inline
`<table>`, `<tr>`, `<th>`, `<td>`	Tabelas
`<form>`, `<input>`, `<label>`, `<button>`	Formulários
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Estrutura da página com significado

Para uma lista numa página só, que dá para imprimir, veja o guia rápido de HTML.

Tags que não existem

Se você digitar uma tag que o navegador não conhece, ele não falha. Ele cria um elemento desconhecido, mostra o conteúdo e o trata como inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Uma tag desconhecida não tem significado para buscadores nem para leitores de tela, então prefira uma tag real. Se você estiver criando seu próprio componente com JavaScript, dê a ele um nome com hífen (user-badge): nomes com hífen são reservados para elementos personalizados e nunca colidem com futuras tags HTML.

Erros comuns

Esquecer uma tag de fechamento. Um </a> ou </strong> faltando transforma o resto da página em link ou em negrito. Os navegadores fecham algumas tags por você (</p>, </li>), mas não essas.
Fechar uma tag vazia. </br> e </img> não são válidos. Os navegadores chegam a ler </br> como um <br> de abertura, então <br></br> gera duas quebras de linha.
Sobrepor tags. Feche na ordem inversa: <b><i>x</i></b>, nunca <b><i>x</b></i>.
Colocar um bloco dentro de um parágrafo. Uma <div>, lista ou título dentro de <p> encerra o parágrafo antes da hora. Use uma <div> como contêiner externo.
Escolher tags pela aparência. Use <h2> porque é um título, não porque é grande. Tamanho e peso da fonte são coisa do CSS.

Perguntas frequentes

Qual a diferença entre tag HTML e elemento HTML?

Uma tag é a marcação que você digita, como <p> ou </p>. Um elemento é o objeto completo que o navegador monta a partir dela: a tag de abertura, seus atributos, o conteúdo e a tag de fechamento. <p>Oi</p> são duas tags que formam um elemento p.

Quais tags HTML não precisam de tag de fechamento?

Os elementos vazios (void elements) não podem ter conteúdo, então não têm tag de fechamento: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> e <embed>.

Devo escrever <br> ou <br />?

As duas formas são HTML válido. A barra no final é permitida em elementos vazios e o navegador a ignora. Numa tag que não é vazia, como <div />, a barra também é ignorada, então a div continua aberta até um </div>.

As tags HTML diferenciam maiúsculas de minúsculas?

Não. <P> e <p> geram o mesmo elemento, assim como qualquer mistura de maiúsculas e minúsculas. Minúsculas são o estilo padrão e o que a maioria dos formatadores produz.

Quantas tags HTML existem?

O padrão HTML atual define mais de 100 elementos, mas as páginas do dia a dia usam uns 20 a 30: títulos, parágrafos, links, imagens, listas, div, span, formulários e as tags semânticas de layout.

O que acontece se eu usar uma tag que não existe?

O navegador cria um elemento para ela mesmo assim, mostra o conteúdo e o trata como um elemento inline sem significado especial. Elementos personalizados são permitidos se o nome tiver um hífen, como <user-card>.

Conceitos relacionados