Pular para o conteúdo principal

Comentando Código em HTML

 Comentários em HTML

Imagine que você começou um projeto e no final do dia decide parar e continuar depois. Nessa situação é muito fácil e até comum que o programador se perca ou se esqueça de onde parou de programar. O uso de  comentários pode te ajudar muito. Para comentar em html basta  usar os caracteres <!-- e -->  ao redor do comentário a ser criado. Comentários são completamente ignorados pelo navegador.

Por que usar comentários?

Comentários podem ser utilizados por três motivos principais:
  • Explicar parte do código ou funcionalidade
  • Servir como marcação para que o programador se lembre de onde parou
  • Para fazer testes no código e corrigir defeitos no código
Em algumas linguagens os comentários também são utilizados para criar a documentação de um projeto. Focaremos nas três utilidades listadas acima. 

Comentários de Explicação do Código


Quando desejamos explicar ou destacar uma parte do nosso código, podemos usar um comentário para isso. Veja o exemplo abaixo:



Comentário como Lembrete

Caso você pare de escrever seu código, ao retornar para ele dias, semanas, meses ou anos depois você dificilmente se lembrará de onde parou. Para te ajudar nessa tarefa facilita muito deixar um comentário para saber como prosseguir com o desenvolvimento do seu site/aplicativo. Por exemplo:



Comentário para teste

Certas vezes haverá necessidade de testar funcionalidades, identificar erros no código e testar alternativas. Uma forma de fazer isso com muita facilidade é utilizando comentários. Suponha que você não deseja exibir um determinado elemento no seu código ou deseja ver como o documento fica sem ele. Ao invés de excluí-lo, você pode simplesmente envolvê-lo em um comentário e o navegador irá ignorá-lo completamente.

Código sem comentário


Veja agora o mesmo código acima, porém com o elemento <h1> ignorado com um comentário:
Código com comentário

A linha do código é simplesmente ignorada pelo navegador e assim o elemento <h1> não é exibido na tela. É como se a linha de código comentada não existisse. Repare que no editor online, o comentário recebeu até uma coloração cinza, para destacar que a linha não é reconhecida como código. 

Observação: caso você escreve um comentário no bloco de notas, assim como qualquer outra marcação que fizer, não será vista qualquer coloração ou indicação no código, já que essas formatações são próprias de editores de código online e outros aplicativos como VS Code, Sublime, NetBeans, Webstorm etc...

Em postagens futuras falaremos sobre IDEs e editores de código.

Por hoje é isso! Gostou? Pratique bastante e se tiver dúvidas comente. Até a próxima!




Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Estilos Inline no HTML (Não faça isso!)

 Estilos Inline São Rápidos, Mas Perigosos A forma mais rápida de aplicar estilos em elementos é inserindo-os na própria tag html do elemento, através do atributo  style="". Todas propriedades e valores inseridos entre as aspas do atributo style serão aplicados ao elemento que o contiver, porém, não faça isso! Na presente postagem explicaremos melhor o que você deve preferir na hora de estilizar seu código. Por que não devemos usar estilos direto nos elementos (inline) html? Primeiro porque não é considerada uma boa prática misturar código html e css no mesmo local, o que causa desorganização e problemas para pesquisar e corrigir erros. O outro bom motivo para não utilizar estilos inline é que em pequenos projetos como os exemplos html que usamos, onde há poucas linhas de códigos e poucos elementos, você não terá problema em usá-los, porém conforme o código for crescendo e com isso a complexidade dele, você não achará uma boa ideia usar estilos inline. Aqui vai um exemplo: se...
Postar um comentário
Leia mais

Introdução a CSS (Cascading Style Sheets)

O que é CSS  Aprendemos que HTML é a linguagem que estrutura os documentos web, pode ser considerado a espinha dorsal dos documentos web. Da mesma forma, que o html é considerado a espinha dorsal ou estrutura básica dos sites,  CSS (Cascading Style Sheets "Folhas de Estilo em Cascata") é a linguagem responsável por estilizar, colorir e organizar o leiaute da visualização do documento web.  Podemos utilizar uma analogia com o corpo humano para entendermos melhor o papel das CSS em uma página web: Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele...  essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões  de fundo, ed...
Postar um comentário
Leia mais

Como aprender HTML se você não possui computador?

Aprendendo html pelo seu smartphone Se você não possui computador, ainda assim é possível aprender html, através do seu smartphone. Tudo que você precisará é de um navegador de internet e acessar algum site que forneça ferramentas de edição e exibição web (html, css e javascript). Visual do site Codepen (editor online de código) Algumas opções gratuitas desses sites são:  Playground | MDN (mozilla.org)  (pode não funcionar em celulares ou navegadores mais antigos) https://codepen.io/  (funciona bem em diversos aparelhos e navegadores) JSFiddle - Code Playground  (pode não funcionar bem em aparelhos antigos e de tela pequena) Glitch: The friendly community where everyone builds the web  (funciona bem, mas pode ser um pouco confuso de entender a interface no início) Embora sejam todas opções gratuitas, algumas, poderão oferecer melhorias ou recursos extras que são pagos, o que não inviabiliza a utilização básica para a finalidade de aprendizado. Uma má notícia par...
Postar um comentário
Leia mais