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  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!

Comentários

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...

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...

Introdução a formulários HTML

Criando um formulário de contato simples O que iremos fazer hoje Formulários permitem ao usuário de um site ou aplicativo inserirem e enviarem informações para o site ou programa. Em html temos a tag <form></form> que nos permite criar um formulário em nossos documentos. hoje teremos uma visão bem superficial do assunto, já que a intenção é introduzir a funcionalidade de forma simplificada e não entrar nos detalhes de implementação e estilo neste primeiro momento. Fazendo a nossa marcação básica Abra o bloco de notas e insira a nossa tão conhecida estrutura básica html: <!DOCTYPE html> <html lang="pt-br"> <head> <title>Formulário de Contato</title> <meta charset="utf-8"> </head> <body> </body> </html> Insira um cabeçalho de nível 1 (<h1>) dentro do body com o seguinte texto: Formulário de Contato Salve o documento com o nome...

Aprendendo Web Design Básico

Pesquisar este blog