Comentários HTML: aprenda a comentar o seu código

Comentários HTML

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.

Neste artigo você encontrará:

15% OFF

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 através do código fonte.

Fazer um comentário dentro de 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 de comentário serão visiveis 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:

Ainda não tem um www

É 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:

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:

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:

Ou ainda como no exemplo abaixo:

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:

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:

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:

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:

Esse método segue o mesmo padrão dos comentários HTML, portanto, podem conter mais de uma linha de comentário:

Portanto, podemos utilizar o comentário também nas propriedades do CSS, veja o exemplo abaixo:

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:

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 como é 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:

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:

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.

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rafaelmarquesdev/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat