Tags HTML
Aprenda o que é uma tag HTML: tags de abertura e fechamento, a diferença entre tags, elementos e atributos, elementos void e regras de aninhamento.
Uma tag HTML é uma palavra-chave (um nome de tag) envolta em colchetes angulares, como <p> ou <img>. As tags são os blocos fundamentais do HTML: elas informam ao navegador onde um trecho de conteúdo começa e termina e que tipo de conteúdo é. O navegador lê as tags e constrói a página a partir delas, mas nunca exibe as tags em si.
Esta página explica o que é uma tag, como uma tag de abertura difere de uma tag de fechamento, como as tags se combinam em elementos com atributos, quais tags ficam sozinhas (elementos void) e as regras para aninhar tags corretamente.
Tags de abertura e fechamento
A maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento. A tag de fechamento é idêntica à tag de abertura, mas começa com uma barra (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- A tag de abertura marca onde o conteúdo começa.
- A tag de fechamento marca onde o conteúdo termina.
Tudo entre as duas tags é o conteúdo ao qual as tags se aplicam.
Tag vs. elemento vs. atributo
Esses três termos são frequentemente confundidos, por isso é útil defini-los com precisão.
- Uma tag é a palavra-chave entre colchetes por si só —
<p>ou</p>. - Um elemento é a unidade completa: a tag de abertura, o conteúdo e a tag de fechamento juntos.
- Um atributo é uma informação extra colocada dentro da tag de abertura que configura o elemento.
Aqui está um único elemento de parágrafo dividido em suas partes:
<p class="intro">Hello world</p>| Parte | O que é |
|---|---|
<p ...> | a tag de abertura |
class="intro" | um atributo (nome class, valor "intro") |
Hello world | o conteúdo |
</p> | a tag de fechamento |
| a linha inteira | o elemento |
Portanto, <p> é uma tag, enquanto <p>Hello world</p> é um elemento. Para saber mais, consulte Elementos HTML e Atributos HTML.
Exemplo de um elemento completo
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Elementos void (vazios)
Alguns elementos não têm conteúdo e, portanto, não têm tag de fechamento. Eles são chamados de elementos void (ou elementos vazios). Consistem em uma única tag.
Os elementos void mais comuns são:
<br>— uma quebra de linha<hr>— uma quebra temática (linha horizontal)<img>— uma imagem<input>— um campo de formulário
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">Em HTML, você escreve um elemento void como uma única tag sem barra, por exemplo <br>. A forma de autofechamento <br /> também é aceita e é obrigatória em XHTML, mas é opcional em HTML.
As tags não diferenciam maiúsculas de minúsculas
Os nomes das tags HTML não diferenciam maiúsculas de minúsculas: <P>, <p> e <P> significam a mesma coisa. Por convenção, no entanto, as tags são escritas em letras minúsculas, e esse é o estilo recomendado.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Aninhando tags corretamente
As tags podem conter outras tags. Quando isso acontece, elas devem ser aninhadas corretamente: um elemento interno deve abrir e fechar completamente dentro do seu elemento pai. As tags não podem se sobrepor.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>No exemplo incorreto, <em> é aberto dentro de <p>, mas fechado fora dele. Os navegadores tentam se recuperar de erros como esse, mas o resultado é imprevisível, portanto, sempre feche primeiro a tag mais interna.
Para notas que o navegador ignora em vez de renderizar, consulte Comentários HTML.
Nota histórica: na década de 1990, os autores às vezes envolviam o conteúdo de scripts em marcadores de comentários HTML para ocultá-los de navegadores muito antigos que não entendiam
<script>. Essa técnica é obsoleta e não deve ser usada hoje.