Se você desenvolve em HTML, provavelmente já utilizou ou já observou alguns comentários HTML.
Praticamente todas as linguagens de programação disponibilizam esta funcionalidade. Portanto, não poderia ser diferente com as linguagens de marcação, como o HTML. O mesmo acontece com o CSS, com o JavaScript e com o PHP.
Conteúdo
O que são comentários no código?
Um comentário nada mais é que uma informação digitada dentro do seu código-fonte que não altera nada no código. Portanto, o comentário também não é renderizado e nem compilado. Dessa forma, os comentários HTML ficam visíveis apenas para desenvolvedores de software através do código-fonte.
Fazer um comentário em um código permite que o desenvolvedor possa deixar registradas algumas informações importantes. Este é um recurso muito útil, principalmente quando se trabalha em equipes de desenvolvimento, onde outras pessoas precisarão entender e utilizar o código-fonte.
Em um documento HTML é muito comum encontrar comentários HTML em partes do código que precisam de atenção. Também é comum encontrar comentários que funcionam para auxiliar e indicar a marcação do mesmo. Por isso, o uso de comentários HTML é uma prática importante de se conhecer e se utilizar.
Como incluir comentários HTML?
Para incluir um comentário em um código HTML, é muito simples. Inicia-se o comentário com <!– e finaliza-se com –>. Ao fazer isso, tudo que estiver contido dentro das tags HTML de comentário serão visíveis apenas no código-fonte. Portanto, não afetará em nada na renderização da página. Você pode ler mais sobre a tag de comentários HTML na documentação oficial da W3C Schools. Vejamos então o exemplo abaixo de um comentário HTML:
<!-- Meu comentário em HTML -->É importante perceber que o comentário HTML não se restringe apenas a uma única linha. É possível abrir um comentário em uma linha, e encerrá-lo em outra. Portanto, vejamos o exemplo abaixo:
<!--
O comentário pode ter o tamanho que você desejar.
Todas essas linhas são parte do comentário...
...
Todas essas linhas são parte do comentário...
-->Você também pode incluir tags dentro do comentário. As mesmas serão lidas pelo navegador apenas como o formato de um comentário, portanto não farão nenhuma modificação no seu código. Portanto, vejamos o exemplo abaixo:
<!-- <p>essas tags são apenas comentários html</p>-->No exemplo acima, as tags <p> serão lidas como comentários. Portanto, o navegador não executará a renderização da mesma.
Dessa forma, podemos utilizar os comentários HTML para diversos objetivos. Vejamos algumas das principais formas de uso.
Comentários HTML para informação
Podemos utilizar um comentário HTML para informar nalguma parte importante do nosso código. Por exemplo, se temos uma parte que deverá ser repetida posteriormente, podemos indicar isso através dos comentários HTML. Vejamos o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8">
</head>
<body>
<div class="galeria">
<!-- CADA IMAGEM DEVERÁ CONTER O CÓDIGO ABAIXO -->
<div>
<img src="imagens/foto01.jpg">
<p>Texto da Imagem</p>
</div>
<!-- Fim do código de cada imagem -->
</div>
</body>
</html>Ou ainda como no exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8">
</head>
<body>
<!-- essa div contém um flex nowrap, portanto tudo dentro dela estará inline -->
<div class="galeria">
<div class="bloco">
<p>bloco01</p>
</div>
<div class="bloco">
<p>bloco02</p>
</div>
<div class="bloco">
<p>bloco03</p>
</div>
</div>
</body>
</html>Comentários HTML para auxiliar na marcação
Outra prática comum e muito recomendada para desenvolvedores iniciantes, é a utilização de comentários para auxílio na marcação. É muito comum que ao escrever um código, possamos nos confundir com a posição de abertura e fechamento de uma tag. Portanto, podemos utilizar os comentários para nos auxiliar na marcação. Vejamos o exemplo abaixo para melhor entender essa prática:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8">
</head>
<body>
<div id="noticias">
<div id="box01">
<div class="conteudo-header">
<h2>Título</h2>
</div>
<div class="conteudo-texto">
<p>Meu conteudo</p>
<p>Meu conteudo</p>
</div><!--div.conteudo-texto-->
</div><!--div#box01-->
<div id="box02">
<div class="conteudo-header">
<h2>Título</h2>
</div>
<div class="conteudo-texto">
<p>Meu conteudo</p>
<p>Meu conteudo</p>
</div><!--div.conteudo-texto-->
</div><!--div#box02-->
</div><!--div#noticias-->
</body>
</html>Perceba como a utilização dos comentários auxilia a identificar a marcação de fechamento das tags. Dessa forma, se torna muito mais fácil identificar os elementos de cada tag, assim como entender a estrutura de funcionamento do código, o que pode ser bastante útil, principalmente para desenvolvedores iniciantes.
Comentários HTML para desativar uma parte do código
É muito comum durante o desenvolvimento encontrarmos partes do código que queremos alterar. Também é comum nos depararmos com momento em que precisamos testar o código sem determinados elementos. Para isso, podemos utilizar os comentários HTML deixando blocos de código comentado. Digamos que eu tenha três divisões, e quero experimentar como ficaria meu código sem renderizar a segunda divisão. Posso então fazer conforme o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8">
</head>
<body>
<div id="box01">
<img src="image01.jpg">
<img src="image02.jpg">
</div>
<!--
<div id="box02">
<img src="image03.jpg">
<img src="image04.jpg">
</div>
-->
<div id="box03">
<img src="image05.jpg">
<img src="image06.jpg">
</div>
</body>
</html>Repare que todo o conteúdo da div#box02 ficou como um comentário, portanto, não será renderizada no navegador.
Nesse sentido, os comentários HTML são muito utilizados para fins de testes. Contudo, não é recomendado manter partes de código comentados no seu arquivo final. Portanto, utilize, mas lembre-se sempre de apagá-los quando não forem mais necessários.
Comentários HTML para esconder scripts em navegadores que não reconheçam
Existe uma prática que permite esconder scripts em navegadores que não possuem suporte a esse recurso.
Utilize as tags de comentários HTML para esconder códigos de script que não sejam suportados em determinados navegadores. Utilize a tag de abertura <!– no início do código e finalize utilizando a tag //–>. Dessa forma, o script só será reconhecido caso o navegador tenha suporte a essa aplicação, caso contrário, o mesmo será considerado apenas um comentário. Assim, você garante que o script funcionará adequadamente, e quando não o for possível, será escondido em forma de comentário. Observe que as duas barras “//” que vêm antes do fechamento da tag de comentários HTML, funcionará para garantir que, caso o navegador tenha suporte ao script, o fechamento do comentário –> continue sendo lido em forma de comentário em JavaScript.
Vejamos então o exemplo abaixo aplicando a ferramenta explicada anteriormente:
<script>
<!--
document.write("Olá mundo!")
//-->
</script>Como incluir comentários no CSS
Assim como o HTML, o CSS também permite a utilização de comentários. Tanto para folhas de estilos (CSS) dentro da tag <style> quanto para folhas de estilos externas, é possível utilizar as mesmas formas de inserir comentários.
Para incluir um comentário no CSS basta inserir /* para iniciar um comentário, e */ para encerrar um comentário, conforme o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8">
<style>
/* Meu comentário no CSS */
</style>
</head>
<body>
</body>
</html>Esse método segue o mesmo padrão dos comentários HTML, portanto, podem conter mais de uma linha de comentário:
<style>
/* Meu comentário no CSS
Essa linha também faz parte do comentário
Essa linha também faz parte do comentário...
*/
</style>Portanto, podemos utilizar o comentário também nas propriedades do CSS, veja o exemplo abaixo:
<style>
div.box01{
background-color: red;
width: 100px;
height: 100px;
/*color: red*/
}
</style>Neste exemplo, todas as propriedades serão lidas corretamente, exceto a propriedade color, que passou a ser parte de um comentário.
Portanto, podemos também utilizar o comentário da seguinte forma:
<style>
/*div.box01{
background-color: red;
width: 100px;
height: 100px;
color: red
}*/
</style>No exemplo acima, todas as propriedades estão dentro de um comentário, portanto, não serão renderizadas.
Como incluir comentários em JavaScript e PHP
Assim como os Comentários HTML e os comentários em CSS, também é possível incluir comentários em JavaScript e PHP.
Ambos adotam duas formas idênticas de incluir comentários, sendo que o PHP ainda possui uma terceira forma.
Para o JavaScript e o PHP, podemos utilizar o /* */ igualmente conforme utilizado no CSS. Dessa forma podemos fazer comentários longos e que contenham mais de uma linha.
Além disso, existe uma segunda forma de fazer um comentário em JS e PHP. Esta forma é apenas incluir um // no início da linha. Porém, essa forma de comentário serve apenas para comentar uma única linha.
Vejamos os exemplos abaixo para comentários no JavaScript:
<script>
//Meu comentário de uma única linha
/* Meu comentário longo
esta linha também é parte do comentário longo
esta também faz parte do comentário longo */
</script>Conforme informado anteriormente, o PHP tem ainda uma terceira forma de incluir comentários. Assim como o //, podemos incluir comentários de uma única linha utilizando o # no ínicio da mesma. Vejamos então os exemplos abaixo para comentários em PHP:
<?php
#comentário de uma linha
//Comentário de uma linha
/*
Comentários longos...
*/
?>Afinal, utilizar ou não utilizar comentários HTML?
Apesar de ser um recurso bastante útil, e muito utilizado ao longo dos anos, existem desenvolvedores que defendem a prática de não comentar o código. Com a evolução dos programas de versionamento de códigos, e diversos sistemas que auxiliam no desenvolvimento do código, é comum os comentários sejam cada vez menos utilizados, principalmente nas versões finais. Isso acontece, pois você pode manter comentários dentro desses sistemas, sem a necessidade de incluí-los no código em si.
Um comentário consome uma certa quantidade de bits, portanto, o excesso de comentários pode gerar um arquivo com um tamanho significativamente maior.
Por isso, é muito comum ouvir sobre minimização de documentos, principalmente quando se trata de scripts e CSS, os quais removem linhas, espaçamentos e também os comentários do código, deixando o documento final bem mais leve.
Portanto, o recomendado é que os comentários do código sejam amplamente utilizados durante a produção do projeto. Porém, ao finalizar um projeto, recomenda-se remover todos os comentários, ou reduzir ao máximo a quantidade de comentários no código. Assim o código fica limpo e otimizado.
Dicas para o uso dos comentários
Agora que já sabemos como incluir comentários HTML, assim como comentários em CSS, JS e PHP, vamos a algumas dicas de como comentar seu código:
- Durante a produção, utilize os comentários para melhor se organizar;
- Ao finalizar o projeto, remova todos os comentários que puder, e os necessários, mantenha resumidamente;
- Não deixe comentários para qualquer ação que até mesmo desenvolvedores iniciantes entenderiam facilmente, mantenha apenas para as partes críticas do seu código. Apenas comente o que for realmente necessário;
- Não deixe códigos comentados. É preferível removê-los por completo;
- Durante a produção, vale a pena utilizar comentários para auxiliar na marcação;
- Nunca se esqueça de remover os comentários de marcação ao finalizar um código.
Portanto, agora você já sabe a utilidade dos comentários HTML, assim como dos comentários nas diversas linguagens. Vale a pena estar atento às dicas, para utilizar os comentários apenas quando necessário, e sem exageros. Utilize esses recursos principalmente durante a produção do seu código, e assim, aproveite a facilidade e organização que os comentários são capazes de proporcionar.
Um comentário em HTML não aparece no Google, e por isso, não ajuda e nem prejudica o SEO de seu site.
