Quem sabe o que é HTML, sabe que quando estamos desenvolvendo, muitas vezes nos deparamos com comentários HTML. Quase todas as linguagens possuem essa função, e não seria diferente com linguagens de marcação HTML. O uso desses comentários pode ser útil a iniciantes em desenvolvimento de códigos, e em assuntos de linguagem de programação (JavaScript, PHP, CSS e muitos outros). Vamos entender um pouco mais sobre isso:
Comentário HTML:
Trata-se de uma informação digitada dentro do nosso código fonte, e isso não tem poder de fazer nenhuma alteração no código. Os comentários não são nem renderizados e muito menos compilados.
Os comentários HTML ficam praticamente invisíveis, somente os desenvolvedores conseguem ler por meio do código fonte. A possibilidade de comentar nos códigos fontes, permite que possamos inserir informações importantes. Sendo muito útil para quem trabalha em equipe de desenvolvimento, e outras pessoas podem conseguir entender o código e futuramente usá-lo se for necessário.
Nos documentos html podemos encontrar vários comentários nos códigos que precisam de atenção e correção. Podemos encontrar também comentários para auxiliar e indicar marcações, o uso de comentários é uma das práticas mais importantes para conhecermos e colocarmos em uso.
Motivos para usar os comentários HTML:
Podemos utilizar esses comentários para várias funções, algumas delas podem ser:
Informação:
Utilizamos para informar alguma parte importante em nosso código, se temos uma pequena parte que necessita ser repetida futuramente, poderemos indica-la por meio do comentário HTM. Eles podem ser vistos apenas pelo desenvolvedor, portanto terceiros não vão ter acesso.
Auxilio de marcações:
Muito recomendada para os desenvolvedores que estão iniciando, assim eles podem evitar se confundirem durante a escrita dos códigos. Comentando e auxiliando as marcações com posições de abertura e fechamento de tags por exemplo.
Desativar uma parte do código:
Muitas vezes no decorrer dos códigos, pararmos em pontos que precisam de testes. Para isso podemos usar os comentários deixando os blocos de código comentado, podendo ter três ou mais divisões que deseja experimentar.
Repare que os comentários HTML são utilizados na maioria das vezes, para lembretes e futuramente fazer testes. É recomendado que no arquivo final, esses comentários que possuem os códigos não estejam mais ali. Você pode e deve utilizar sim, mas sempre deve lembrar de voltar e apaga-los quando a necessidade passar ou chegar o momento final.
Incluindo os comentários no HTML:
Para conseguirmos adicionar os comentários em um código, devemos iniciar o comentário com <! - E depois de escrever o que queremos falar, finalizamos com ->. Isso não vai interferir nada na renderização final da página com nossos códigos.
Veja um exemplo: <! – comentário ->
Os comentários também podem ser passados em outra linha, e depois encerrados sem nenhum problema. Veja o exemplo com as sintaxes:
< ! –
Comentário em HTML no código fonte, podendo ter o tamanho que quisermos.
E por fim inserimos o código de encerramento...
->
Dentro dos comentários também podem ter tags, elas serão lidas pelos navegadores como formatos de comentários, não mudar nada no seu código. Por exemplo:
<! - <p> Comentário html com tags do próprio html</p>
Nesse exemplo temos a tag <p> que vão ser lidas como comentários e não como códigos, elas não possuem nenhum valor de execução durante a renderização. Agora vamos conhecer alguns motivos interessantes para usar esse tipo de comentário HTML:
Usando os comentários para informações:
Os comentários HTML também podem ser usados para passar informações em partes dos códigos, quando elas são importantes e queremos nos lembrar disso em momentos mais tarde. Podemos seguir a ordem com as seguintes sintaxes:
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> pagina para comentários HTML </TITLE>
<Meta charset= “utf-8”>
</head>
<body>
<Div class= “galeria”>
As imagens precisam conter o código:
<Div>
<Img Src= “imagens/foto02.webp”> aqui você define o nome da foto e o formato em que ela está (jpeg ou png por exemplo).
<P> texto na imagem </p>
</Div>
<! - Fim do código das imagens com textos ->
</Div>
</Body>
</html>
Observe que definimos os textos de cada imagem e também abrimos e encerramos cada tag, isso é extremamente importante dentro dos códigos. Sempre que abrir uma tag, elemento, ou outro, lembre-se de fecha-los novamente.
Comentários para marcação:
Podemos utilizar os comentários para fazer marcações durante a escrita dos códigos, isso é muito utilizado pelos desenvolvedores que ainda estão iniciando. O uso das marcações evita futuras confusões em momento de início e fechamento das tags.
Para utilizar as marcações devemos iniciar a prática da seguinte sintaxes:
<! DOCTYPE html>
<Html>
<Head>
<Title>nome da página </title>
<Meta charset="utf-8">
<Div class="seu-conteúdo-aqui ">
<H2>nome</h2>
</Div>
<Div class="seu-conteúdo">
<P>seu conteúdo</p>
</body>
</html>
E pronto, conseguimos utilizar as marcações em comentários para futuramente servir como auxilio para fechamento das tags que usamos. Essa pratica ajuda tanto em identificação de tags e dos elementos, quando a estrutura que elas usam para poder ter o funcionamento certo.
Usando comentários HTML para desativação de partes de códigos:
Quando estamos desenvolvendo um código, podemos encontrar algumas partes que queremos mudar ou acharmos alguns que precisam ser testados. Por esse motivo podemos usar os comentários html, por meio de blocos comentando sobre algum código.
Por exemplo, você está criando os códigos e observando eles e acaba notando quatro linhas que precisam ser testas, para ter uma noção de como ela vai ficar no final da renderização.
Para adicionarmos um comentário usamos a sintaxe <! – Para abrir e --! > para encerrar, com esse comentário essa parte do código não será renderizada pelo nosso navegador.
Notou como os comentários HTML são usados? São para lembretes de testes, evitar erros, dar continuidade, e assim por diante. Mas um detalhe importante que devemos sempre ressaltar e que depois de finalizar os códigos, devemos deletar os comentários.
Comentando no CSS:
O CSS nos permite utilizar os comentários, assim como o HTML. Podemos fazer em folhas de estilo dentro da tag <style> e em folha de estilo externas, sendo possível usar as mesmas maneiras de comentar.
Vamos incluir um comentário no CSS utilizando “/*” para dar início, e depois “*/” para dar o encerramento no comentário. Veja o exemplo:
<Title>sua página CSS</title>
<Meta charset="utf-8">
<Style>
/* Meu comentário CSS */
</style>
E para ter mais linhas de comentários digitamos:
/* Meu comentário no CSS
Essa linha também faz parte do comentário
Essa linha também faz parte do comentário...
*/
Observe que os comentários no CSS seguem praticamente os mesmos padrões de sintaxe dos códigos digitando no HTML, a diferença é que podem contar mais números de linhas para comentários. As propriedades que estiverem dentro dos elementos de comentários não serão renderizados no final, ou seja, não vão ser lidas pelos navegadores.
Comentários em JavaScript e no PHP:
Se você conhece JavaScript ou sabe o que é PHP, sabe que também podemos adicionar comentários nessas linguagens, eles possuem formas parecidas para colocar os comentários.
Podemos usar o “/*” para dar início ao comentário, e “*/” para finalizar, igual fizemos com o CSS. Também podemos adicionar comentários longos e com grade quantidade de linhas. Caso seu comentário vá conter apenas uma linha, podemos digitar apenas “/” para abrir e “/” para finalizar! Porém, não poderá ultrapassar uma linha de comentário.
A terceira maneira de adicionar os comentários é utilizando “#”, mas também será de apenas uma linha. Então iniciamos o comentário no código com #e digitamos o comentário, lembrando que será apenas uma linha disponível para a escrita.
Tome cuidado com a quantidade de comentários que você adiciona em seu código, os bits aumentam a cada um que você inclui! Portanto se colocar exageradamente, terá um arquivo com tamanho muito grande e isso não é bom e nem há necessidade. Vá deletando conforme for deixando de ser importante, avalie a necessidade e adicione conforme for passando os códigos.
Conclusão:
Depois que você tiver entendido como adicionar os comentários HTML, em diferentes tipos de linguagens de programação, quais as sintaxes, tags e elementos devemos usar. É importante ter em mente quais técnicas que você pode usar com os comentários, ou seja, como vai usa-los para trazer facilidade na sua produção.
Como dissemos, eles são usados na maioria das vezes para lembrar e auxiliar em possíveis duvidas, futuros testes, lembretes, desativação de códigos que vimos muito tempo depois e assim por diante.
Você pode utilizar para anotar quantas coisas quiser e com várias observações para evitar erros, mas lembre-se de deletar tudo quando não tiver mais nenhuma utilidade. É importante evitar riscos, ou seja, você poderia esquecer de algum comentário e ele apareceria para todos os leitores. Portanto, escreva somente observações de correção, de testes a serem feitos, criticas para corrigir, escreva somente o necessário.
Agora faça testes dos comandos que aprendeu aqui, adicione comentários HTML nas linguagens de programação que você utiliza. Ao decorrer dos testes, anote em algum papel os comandos que você executou sem dificuldade e quais são as funções dele para serem usadas futuramente.
Esses comentários HTML não são vistos no Google, sendo assim, eles não fornecem nenhum benefício e nem causam problemas em SEO de sites. Você pode usar livremente sem se preocupar com problemas de otimização. Para aprender mais sobre Html e hospedagem de sites, acompanhe o blog da ISBrasil diariamente!
Gostou de nosso post? Compartilhe:
