HTML - Sintaxe Comentários

Sintaxe de Comentários

O que é? Como usar?

A "sintaxe comentários" é um conjunto de regras que permite ao desenvolvedor adicionar termos explicativos acima da linha de código, que o permite explicar a função dessa determina linha. A maioria, se não todas, as linguagens da web utilizam esse parâmetro.

As mais utilizadas saõ // para comentários de linha única ou /**/ para blocos de linhas em CSS e Java. Já no HTML utiliza-se a sintaxe <!-- seu comentário-->. 

NOTA: Falaremos das demais sintaxes de comentários em tutoriais a frente. Focaremos agora nas sintaxes de comentários em HTML.


Estrutura básica de uma sintaxe de comentário


Quando o texto é colocado dentro das <!-- tags desta maneira -->, ele não aparecerá na página web.

Você pode usar estas tags para adicionar lembretes, avisos ou explicações sobre o código, o que facilita qualquer pessoas a fazer uma leitura mais precisa do seu documento HTML.

Formas de adicionar comentários em um documento

Ele pode ser adicionado em

Linha única:

<!-- Isto é uma área de comentário de linha única -->

Mult-linha:

  <!-- Isto é uma

área de comentário

de Mult-linha

-->

Segue abaixo uma exemplo de comentário de linha única

<html>

<body>

    <!--This is heading Tag-->

    <h1>GeeksforGeeks</h1>

    <!--This is single line comment-->

    <h2>This is <!--given for--> single line comment</h2>

</body>

</html>

Neste código o desenvolvedor adicionou comentários acima das tags H1 e H2 para ajudar outros desenvolvedores  a entenderem o uso delas no documento. As tags <h1> e <h2> são títulos que serão exibidas na página web, enquanto os comentários adicionados acima dessas tags não aparecerão.

Segue abaixo uma exemplo de comentário de multlinha

<html>
<body>
    <!-- This is
         heading tag -->
    <h1>GeeksforGeeks</h1>
    <!-- This is
    multi-line
         comment -->
    <h2>This is multi-line comment</h2>
    <!-- <button style="font-family: Sans-serif;">
           Click Me
         </button> -->

</body>
</html>

Neste exemplo, vemos uma aplicação real de aplicação de sintaxes de comentários no elemento <button>. Ao adicionar as tags de comentários neste elemento, ele não é renderizado ou mostrado na web.

Veja abaixo uma aplicação real de uma tag comment em um projeto HTML em linha única:


Tag "comment" em um projeto HTML em linha única



Note que a cor da linha de código também sofre alteração para facilitar o reconhecimento do código para desenvolvedores.

Agora, veja abaixo uma aplicação em tempo real da tag comment em multlinhas:


Aplicação da tag comment em multlinhas


Nesta aplicação, o código envolvido pela tag fará com que este trecho fique oculto e não apareça para o usuário. Isto pode ser aplicado em botões, textos, imagens ou qualquer elemento html que queira ocultar do usuário.

Uso correto de comentários HTML

Alguma maneiras  e práticas recomendadas para o uso de comentários html:

Organização de códigos: Eles podem ajudar a dividir seus códigos por seções, o que facilita a leitura e a navegação, em especial em projetos maiores.

Colaboração mutua: Se você pensa em adicionar pessoas para desenvolverem projetos juntamente com você, os comentários são cruciais para um bom entendimento de códigos por uso de terceiros. Os comentários neste caso servirão para instruir os membros da equipe.

Depuração: Se você necessitar ocultar ou desabilitar temporariamente algumas partes do seu código HTML que estejam apresentando problemas, os comentários são um ótimo aliado.

Documentar: Os comentários ajudam bastante na documentação de processos de desenvolvimento, o que evita que você tenha de armazenar essas informações em arquivos e programas externos.

Para ajudar ainda mais no uso correto dos comentários veja essas dicas:

1º Escreva comentários curtos
2º Revise os comentários com regularidade
3º Mantenha um formato e estilo claro e uniforme
4º Não adicione informações confidenciais como senhas, chaves de acesso ou dados de documentação pessoal sua ou de clientes.

Comments

Post a Comment

E ai Dev! deixe sua opinião!