Curso de HTML / Sintaxe HTML: tags, atributos e aninhamento

A sintaxe HTML define como os elementos, tags, atributos, texto e comentários são escritos em um documento HTML. A maioria dos elementos usa uma tag de abertura e uma tag de fechamento, os atributos estão na tag de abertura, e os elementos aninhados devem ser fechados na ordem inversa àquela em que foram abertos.

Sintaxe básica de elementos e tags HTML

Um elemento HTML geralmente é escrito com uma tag de abertura, um conteúdo e uma tag de fechamento.

<tagname>Conteúdo</tagname>

• <tagname> é a tag de abertura que marca o ponto onde o elemento começa.
• Conteúdo é o texto ou outro conteúdo contido pelo elemento.
• </tagname> é a tag de fechamento que marca o ponto onde o elemento termina.

O código a seguir cria um elemento p. A tag de abertura é <p>, o conteúdo é Sintaxe HTML, e a tag de fechamento é </p>.

<p>Sintaxe HTML</p>

Os nomes das tags na sintaxe HTML não diferenciam maiúsculas de minúsculas em ASCII. No entanto, o uso de letras minúsculas é a convenção usual, pois torna a marcação consistente e fácil de ler.

Os elementos vazios não possuem tags de fechamento

Nem todos os elementos HTML usam uma tag de fechamento. Um elemento vazio não pode conter conteúdo e não deve ter uma tag de fechamento.

<br>

<img src="image.webp" alt="Nascer do sol sobre um oceano azul">

<input type="text" name="username">

<meta charset="utf-8">

br, img, input e meta são elementos vazios comuns. Não escreva tags de fechamento inexistentes como </br> ou </img>.

Uma barra final, como em <br />, é permitida em uma tag de abertura HTML para um elemento vazio, mas não possui função de auto-fechamento em HTML e é desnecessária.

Como escrever os atributos HTML

Os atributos configuram um elemento ou fornecem informações adicionais. Eles são escritos dentro da tag de abertura, com o nome do atributo e seu valor separados por um sinal de igual (=). Para um uso prático dos atributos, compare os atributos for, id e name em Associar corretamente label e input .

<tagname attribute="value">Conteúdo</tagname>

Por exemplo, este código dá a um elemento blockquote um atributo id cujo valor é quote-01.

<blockquote id="quote-01">

  Texto citado

</blockquote>

O HTML aceita valores de atributos entre aspas duplas, aspas simples e — em casos restritos — sem aspas. Usar consistentemente aspas duplas é uma convenção prática porque espaços e vários caracteres especiais não são permitidos em valores não citados.

<p style="color: red;">Texto vermelho</p>

No exemplo incorreto a seguir, o espaço termina o valor style não citado após color:. Portanto, o navegador não interpreta o atributo conforme esperado.

<p style=color: red;>Texto vermelho</p>

Atributos booleanos como disabled, checked e required são verdadeiros quando presentes. Eles podem ser escritos usando apenas o nome do atributo.

<input type="text" disabled>

Feche os elementos aninhados na ordem correta

Quando um elemento é colocado dentro de outro, feche o elemento interno antes do elemento externo. A marcação a seguir está corretamente aninhada porque o elemento strong está totalmente contido pelo elemento p.

<p>Esta frase contém <strong>texto importante</strong>.</p>

O exemplo a seguir está incorretamente aninhado porque os intervalos dos dois elementos se sobrepõem.

<p>Esta frase contém <strong>texto importante</p></strong>

Um navegador pode corrigir a marcação malformada durante sua análise, mas o Document Object Model (DOM, modelo de objetos do documento) resultante pode diferir da estrutura que você tinha planejado. Não dependa da correção de erros pelo navegador como substituto para marcação válida.

Como escrever comentários em HTML

Um comentário HTML começa com <!-- e termina com -->. Os comentários não são exibidos como conteúdo da página, portanto, podem documentar o objetivo da marcação ou deixar uma nota temporária para os desenvolvedores.

<!-- Este comentário não aparece na página. -->

Um comentário pode se estender por várias linhas.

<!--

  Isto é um comentário

HTML em várias linhas.

-->

Não aninhe um comentário HTML dentro de outro. Os delimitadores de comentários aninhados podem causar o término do comentário em um local diferente de onde você espera.

<!--

  &lt;!-- Não aninhe os comentários. -->

-->

Estrutura básica de um documento HTML

O exemplo a seguir mostra uma estrutura mínima e prática para um documento HTML em português do Brasil. Pratique encontrar e revalidar os erros em Encontrar erros e validar um documento HTML.

<!doctype html>

<html lang="pt-BR">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Título do documento</title>

  </head>

  <body>

    <h1>Título da página</h1>

    <p>O conteúdo da página está aqui.</p>

  </body>

</html>

• <!doctype html> seleciona o modo de renderização orientado a padrões usado para documentos HTML modernos.
• <html lang="pt-BR"> é o elemento do documento, e lang="pt-BR" identifica o português do Brasil como idioma principal.
• <head> contém os metadados do documento, como a codificação de caracteres, a configuração da janela de exibição e o título do documento.
• <body> contém os títulos, parágrafos, imagens, links e outros conteúdos apresentados na página.

Como verificar a sintaxe HTML

Os navegadores tentam exibir um documento mesmo quando sua marcação contém erros. Uma página aparecendo na tela, portanto, não prova que sua sintaxe esteja correta. Verifique o aninhamento e os atributos, e use o Nu Html Checker para identificar erros e avisos de marcação.

Para regras precisas que abrangem tags, atributos, elementos vazios e comentários, consulte a seção sobre sintaxe HTML da norma viva WHATWG.

Atributos booleanos e caracteres literais

Um atributo booleano é determinado pela sua presença, e não por uma cadeia como "false". checked="false" está sempre presente, então ele começa marcado, e "false" não é um valor válido de atributo booleano conforme. Remova checked para começar desmarcado. Não trate os atributos booleanos como atributos comuns com valor de cadeia.

<label><input type="checkbox" name="news" value="yes" checked> Notícias</label>
<label><input type="checkbox" name="updates" value="yes"> Atualizações</label>

Apenas o primeiro controle deve começar marcado. Para exibir o elemento literal <p>, escreva os sinais de menor e maior como < e >. Use & para um e comercial literal quando o escape for necessário. Diferencie o código exibido como texto da marcação que cria um elemento.

<p>&lt;p&gt; é um elemento de parágrafo. A &amp; B são dois nomes.</p>

Este exemplo exibe colchetes e um e comercial em vez de criar um parágrafo aninhado. Veja as regras HTML para atributos booleanos .

Lista de verificação da sintaxe HTML

• Incluir <!doctype html> no início de um documento HTML completo.
• Usar consistentemente nomes de tags e atributos em minúsculas.
• Colocar os valores dos atributos entre aspas, de preferência aspas duplas para consistência.
• Não adicionar tags de fechamento a elementos vazios.
• Fechar elementos aninhados de dentro para fora.
• Use lang para identificar o idioma do documento.
• Não inclua dados confidenciais nos comentários e no código-fonte da página.
• Valide o documento final em vez de confiar apenas na sua aparência visual.