HTML - Sintaxe

João E. -

Estrutura Básica de um Documento HTML

Todo documento HTML segue uma estrutura básica que inclui vários elementos principais. Entender essa estrutura é necessário para criar páginas HTML bem formadas e válidas.

O primeiro elemento em um documento HTML é a declaração <!DOCTYPE>. Essa declaração informa ao navegador web sobre a versão do HTML sendo usada. Para o HTML5, o padrão atual, a declaração é simplesmente <!DOCTYPE html>. Ela deve ser colocada no início do documento, antes de qualquer outro elemento.

O próximo elemento é o <html>, que envolve todo o conteúdo da página. Ele é conhecido como o elemento raiz de um documento HTML. Todos os outros elementos devem estar aninhados dentro das tags <html>.

Dentro do elemento <html>, existem duas seções principais: o <head> e o <body>.

O elemento <head> contém metadados sobre o documento HTML, como o título da página, codificação de caracteres e links para arquivos CSS e JavaScript externos. Essas informações não são visíveis na própria página web, mas são usadas por navegadores e mecanismos de busca. Elementos importantes dentro do <head> incluem <title>, <meta>, <link> e <script>.

O elemento <body> contém o conteúdo visível da página web, como títulos, parágrafos, imagens, listas e tabelas. Todo o conteúdo que os usuários veem e com o qual interagem deve ser colocado dentro das tags <body>.

Exemplo: Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>Minha Página Web</title>
</head>
<body>
    <h1>Bem-vindo à minha página web!</h1>
    <p>Este é um parágrafo de texto.</p>
</body>
</html>

Marcações HTML

As marcações HTML são os elementos básicos das páginas web, permitindo estruturar e formatar o conteúdo. As marcações definem elementos como títulos, parágrafos, listas e links. Usar as marcações corretamente é importante para criar um HTML bem estruturado e semântico.

A maioria das marcações HTML tem uma tag de abertura e uma tag de fechamento, que envolvem o conteúdo que definem. As tags de abertura começam com <, seguido pelo nome da tag e >. As tags de fechamento são similares, mas incluem / antes do nome da tag. Por exemplo, um parágrafo é definido usando a tag <p>, assim: <p>Isto é um parágrafo.</p>.

Algumas marcações HTML, conhecidas como tags de fechamento automático ou tags vazias, não precisam de uma tag de fechamento. Essas tags representam elementos que não têm conteúdo dentro deles. Exemplos de tags de fechamento automático incluem <br> para quebras de linha, <img> para imagens e <meta> para metadados. No HTML5, é opcional incluir o / de fechamento para tags de fechamento automático, então tanto <br> quanto <br /> são válidos.

Ao usar várias tags para definir a estrutura do seu conteúdo, aninhá-las corretamente. Isso significa fechar as tags na ordem inversa em que foram abertas. Por exemplo, se você tem uma tag <strong> dentro de uma tag <p>, feche a tag <strong> antes da tag <p>:

Exemplo: This is a paragraph with nested tags

<p>Este é um <strong>parágrafo</strong> com tags aninhadas.</p>

Tags aninhadas incorretamente podem levar a resultados inesperados e tornar seu HTML inválido. Sempre garanta que suas tags estejam aninhadas e fechadas corretamente para manter um documento bem estruturado.

Elementos HTML

Um elemento HTML é uma parte de um documento HTML que tem uma tag de abertura, conteúdo e uma tag de fechamento. Os elementos estruturam e dão significado ao conteúdo de uma página web. A tag de abertura indica o início de um elemento, enquanto a tag de fechamento marca seu fim. O conteúdo entre essas tags pode ser texto, outros elementos HTML ou ambos.

Os elementos HTML também podem ter atributos. Os atributos fornecem informações extras sobre o elemento e são colocados dentro da tag de abertura. Eles têm um nome e um valor, separados por um sinal de igual (=). O nome do atributo mostra a propriedade que está sendo definida, enquanto o valor do atributo fornece o valor para essa propriedade. Por exemplo, o elemento <a>, que cria um hiperlink, usa o atributo href para especificar o destino do link:

Exemplo: Anchor element with href attribute

<a href="https://www.example.com">Visite Example.com</a>

Atributos comuns incluem class e id, que são usados para estilização e direcionamento de elementos com CSS e JavaScript. O atributo class permite agrupar elementos com base em características compartilhadas, enquanto o atributo id fornece um identificador único para um elemento específico dentro do documento.

Alguns elementos HTML, conhecidos como elementos vazios ou elementos void, não têm tag de fechamento e não podem conter nenhum conteúdo. Esses elementos são autocontidos e são usados para inserir ou incorporar conteúdo na página. Exemplos de elementos vazios incluem:

Elemento Descrição
<br> Insere uma quebra de linha
<hr> Cria uma linha horizontal ou quebra temática
<img> Incorpora uma imagem na página
<input> Cria um campo de entrada para interação do usuário
<meta> Fornece metadados sobre o documento HTML

Ao usar elementos vazios, lembre-se de que eles não têm tag de fechamento. No HTML5, a barra invertida (/) de fechamento é opcional para elementos vazios, então tanto <br> quanto <br /> são válidos.

Sensibilidade a Maiúsculas e Minúsculas

Em HTML, os nomes de tags e atributos não diferenciam maiúsculas de minúsculas. Isso significa que, independentemente de usar letras maiúsculas ou minúsculas, o navegador entenderá as tags e atributos da mesma maneira. Por exemplo, <div>, <DIV> e <Div> serão todos tratados como a mesma tag <div> pelo navegador.

No entanto, é uma convenção comum usar letras minúsculas para todos os nomes de tags e atributos em HTML. Essa prática melhora a legibilidade e a consistência do código, facilitando para os desenvolvedores entenderem e manterem o código. O uso de minúsculas também segue a especificação HTML5, que recomenda minúsculas para tags e atributos.

Exemplo de casos de tags

<!-- Válido, mas não recomendado -->
<DIV class="content">
    <P>Este é um parágrafo.</P>
</DIV>

<!-- Recomendado -->
<div class="content">
    <p>Este é um parágrafo.</p>
</div>

Ao escrever nomes de atributos dentro das tags, a mesma convenção se aplica. Nomes de atributos em minúsculas são preferidos para consistência e legibilidade. Por exemplo, ao usar o atributo class, escreva-o como class="exemplo" em vez de CLASS="exemplo".

Exemplo de casos de atributos

<!-- Válido, mas não recomendado -->
<a HREF="https://www.exemplo.com">Visite Exemplo.com</a>

<!-- Recomendado -->
<a href="https://www.exemplo.com">Visite Exemplo.com</a>

Embora o HTML não diferencie maiúsculas de minúsculas, é importante observar que outras tecnologias relacionadas, como CSS e JavaScript, são sensíveis a maiúsculas e minúsculas. Ao referenciar elementos HTML em CSS ou JavaScript, certifique-se de usar a capitalização correta para seletores, propriedades e variáveis.

Aderir à convenção de minúsculas para tags e atributos HTML ajuda a manter a consistência, melhora a legibilidade e torna seu código mais compatível com os padrões da web.

Espaços em branco e indentação

No HTML, espaços em branco entre elementos, como espaços, tabulações e novas linhas, são em grande parte ignorados pelos navegadores ao renderizar a página. Esse comportamento é conhecido como colapso de espaços em branco. Múltiplos espaços, tabulações ou quebras de linha são tratados como um único espaço, e o navegador ajustará automaticamente o layout dos elementos com base no espaço disponível e nos estilos CSS aplicados.

Exemplo: Múltiplos espaços colapsados

<!-- Múltiplos espaços são colapsados em um único espaço -->
<p>Este    é    um    parágrafo.</p>

Embora o navegador colapse os espaços em branco, ainda é importante usar indentação e espaçamento adequados no seu código HTML para legibilidade e manutenibilidade. Um código bem organizado é mais fácil de ler, entender e depurar, especialmente ao trabalhar em projetos maiores ou colaborar com outros desenvolvedores.

Para melhorar a legibilidade do código, siga estas melhores práticas de indentação:

Melhor Prática Descrição
Use indentação consistente Use espaços ou tabulações para indentação, mas mantenha um método para consistência em todo o documento HTML.
Indente elementos aninhados Indente elementos aninhados para mostrar sua hierarquia e relação com elementos pais. Cada nível de aninhamento deve ser indentado por uma quantidade consistente, como 2 ou 4 espaços.
Use linhas em branco Use linhas em branco para separar seções distintas do seu código, como entre diferentes elementos ou grupos de elementos relacionados. Isso facilita a identificação visual da estrutura do seu documento.
Quebre linhas longas Ao lidar com linhas longas de código, considere quebrá-las em várias linhas para melhor legibilidade. Por exemplo, se um elemento tem muitos atributos, você pode colocar cada atributo em uma nova linha e indentá-los para maior clareza.

Exemplo de indentação

<div>
  <h1>Título Principal</h1>
  <p>Este é um parágrafo.</p>
  <ul>
    <li>Item da lista 1</li>
    <li>Item da lista 2</li>
  </ul>
</div>

Exemplo: Quebrando linhas longas

<img src="imagem.jpg"
     alt="Imagem de exemplo"
     class="imagem-responsiva"
     width="500"
     height="300">

Lembre-se de que, embora a indentação e o espaçamento adequados não afetem como o navegador renderiza a página, eles são essenciais para tornar seu código mais legível e manutenível. É um bom hábito desenvolver desde cedo, pois ajudará você a escrever código mais limpo e organizado, especialmente à medida que seus projetos crescem em complexidade.

Comentários em HTML

Comentários em HTML adicionam notas, explicações ou lembretes dentro do código sem afetar o conteúdo exibido na página da web. Eles ajudam a documentar seu código, tornando-o mais fácil de entender e manter, especialmente ao trabalhar com outros desenvolvedores ou ao retornar a um projeto após algum tempo.

O HTML suporta dois tipos de comentários: comentários de linha única e comentários de múltiplas linhas.

Comentários de linha única começam com <!-- e terminam com -->. Eles são usados para notas breves ou explicações que cabem em uma única linha. Os navegadores da web ignoram o conteúdo entre as tags de abertura e fechamento do comentário.

Exemplo de comentário de linha única

<!-- Este é um comentário de linha única -->
<p>Este é um parágrafo.</p>

Comentários de múltiplas linhas também começam com <!-- e terminam com -->, mas podem se estender por várias linhas. Eles são úteis para explicações mais longas, remoção temporária de seções de código ou adição de documentação detalhada.

Exemplo de comentário de múltiplas linhas

<!--
  Este é um comentário de múltiplas linhas.
  Ele pode se estender por várias linhas.
  Use-o para explicações mais longas ou para remover temporariamente código.
-->
<div>
  <h1>Título</h1>
  <p>Este é um parágrafo.</p>
</div>

Ao usar comentários em seu código HTML, siga estas melhores práticas:

Melhor Prática Descrição
Use comentários com moderação Embora os comentários possam ser úteis, muitos comentários podem poluir seu código e torná-lo mais difícil de ler. Use comentários apenas quando necessário para esclarecer partes complexas ou não óbvias do seu código.
Mantenha os comentários concisos Os comentários devem ser breves e diretos ao ponto. Evite escrever explicações longas ou repetir informações que já estão claras no próprio código.
Atualize os comentários ao atualizar o código Se você fizer alterações no seu código, certifique-se de que os comentários relacionados sejam atualizados para refletir essas mudanças. Comentários desatualizados podem ser enganosos e causar confusão.
Remova comentários desnecessários antes da implantação Antes de implantar seu código em um ambiente de produção, remova quaisquer comentários que não sejam mais necessários, como aqueles usados para depuração ou remoção temporária de código. Isso ajuda a manter seu código final limpo e otimizado.

Exemplos de comentários inline

<!-- TODO: Adicionar script de validação do formulário -->
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Enviar</button>
</form>

<!--
<div class="secao-obsoleta">
  <p>Esta seção não está mais em uso e será removida em uma atualização futura.</p>
</div>
-->

Erros comuns de sintaxe

Ao escrever HTML, você pode cometer erros de sintaxe, principalmente como iniciante. Esses erros podem levar a resultados inesperados ou fazer com que sua página não seja exibida corretamente. Aqui estão alguns erros comuns de sintaxe que você deve evitar:

Erro Descrição
Esquecer tags de fechamento A maioria dos elementos HTML precisa de uma tag de abertura e uma de fechamento. Não incluir a tag de fechamento pode fazer o navegador interpretar incorretamente a estrutura do seu documento.
Tags aninhadas incorretamente Os elementos HTML devem ser aninhados de forma que os elementos internos sejam fechados antes dos elementos externos. Tags aninhadas incorretamente podem fazer o navegador interpretar mal a estrutura do seu documento.
Tags de abertura e fechamento incompatíveis O nome da tag no fechamento deve corresponder ao nome da tag na abertura. Tags incompatíveis podem fazer o navegador interpretar incorretamente a estrutura do seu documento, levando a elementos não fechados corretamente.
Uso incorreto de aspas em atributos Os valores dos atributos devem sempre estar entre aspas, simples (') ou duplas ("). Não usar aspas ou usar aspas incompatíveis pode fazer o navegador interpretar incorretamente o valor do atributo.

Exemplos:

Exemplo: Esquecer tags de fechamento

<!-- Incorreto -->
<p>Este é um parágrafo.

<!-- Correto -->
<p>Este é um parágrafo.</p>

Exemplo: Tags aninhadas incorretamente

<!-- Incorreto -->
<p><strong>Este é um parágrafo.</p></strong>

<!-- Correto -->
<p><strong>Este é um parágrafo.</strong></p>

Exemplo: Tags de abertura e fechamento incompatíveis

<!-- Incorreto -->
<p>Este é um parágrafo.</div>

<!-- Correto -->
<p>Este é um parágrafo.</p>

Exemplo: Uso incorreto de aspas em atributos

<!-- Incorreto -->
<img src=imagem.jpg alt=Imagem de exemplo>

<!-- Correto -->
<img src="imagem.jpg" alt="Imagem de exemplo">

Para evitar esses erros comuns de sintaxe, siga as melhores práticas, como:

  • Sempre incluir tags de fechamento para elementos que precisam delas
  • Aninhar corretamente os elementos e fechá-los na ordem inversa em que foram abertos
  • Verificar duas vezes se os nomes das tags de abertura e fechamento correspondem exatamente
  • Usar aspas consistentemente em torno dos valores dos atributos e garantir que estejam corretamente combinadas

Entidades HTML

Entidades HTML são códigos especiais usados para representar caracteres que têm um significado específico em HTML ou não podem ser facilmente digitados usando um teclado padrão. Essas entidades garantem que o navegador interprete os caracteres corretamente e os exiba conforme pretendido na página web.

As entidades são úteis ao trabalhar com caracteres reservados em HTML, como <, >, &, " e '. Esses caracteres definem a estrutura e a sintaxe dos elementos HTML, então usá-los diretamente em seu conteúdo pode levar a erros de análise ou comportamento inesperado. Para incluir esses caracteres em seu texto, você precisa usar suas entidades HTML.

Aqui estão algumas entidades HTML comuns para caracteres reservados:

Caractere Nome da Entidade Número da Entidade
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

Para usar uma entidade HTML, você pode usar seu nome de entidade ou número de entidade. Os nomes de entidade começam com um e comercial (&) e terminam com um ponto e vírgula (;), enquanto os números de entidade começam com um e comercial e uma cerquilha (#) e terminam com um ponto e vírgula.

Exemplo: Usando nomes de entidade

<!-- Usando nomes de entidade -->
<p>Este é um elemento &lt;p&gt;.</p>
<p>Para exibir um e comercial, use &amp;amp;.</p>

Exemplo: Usando números de entidade

<!-- Usando números de entidade -->
<p>Este é um elemento &#60;p&#62;.</p>
<p>Para exibir um e comercial, use &#38;amp;.</p>

As entidades HTML não se limitam a caracteres reservados. Elas também podem representar caracteres especiais, como símbolos, letras acentuadas e emojis, que podem não estar disponíveis em todos os teclados ou podem ser difíceis de digitar. Algumas entidades de caracteres especiais comuns incluem:

Caractere Nome da Entidade Número da Entidade
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
€ &euro; &#8364;
£ &pound; &#163;
¿ &iquest; &#191;
ñ &ntilde; &#241;

Exemplo: Entidades de caracteres especiais

<p>Copyright &copy; 2021 Empresa Exemplo.</p>
<p>O preço é &euro;9,99.</p>
<p>A palavra em espanhol para "ano" é "a&ntilde;o".</p>

Usar entidades HTML quando necessário ajuda a garantir que seu conteúdo seja exibido com precisão e consistência em diferentes navegadores e dispositivos. Também evita erros de análise e torna seu código mais legível e fácil de manter.