Comentários e espaços em branco

Bem-vindo ao "HTML Foundations"! Hoje, vamos explorar dois super-heróis "invisíveis" do desenvolvimento web: comentários e espaços em branco. Esses conceitos não vão mudar os designs coloridos que seus visitantes veem na tela, mas vão tornar sua vida como programador incrivelmente mais fácil. Vamos lá!

O que é um comentário HTML?

Um comentário é um trecho especial de texto no seu código que o navegador ignora completamente. Para criar um, você simplesmente envolve seu texto em um conjunto especial de caracteres.

Você inicia o comentário com .

Veja como um comentário fica quando colocado entre duas tags de parágrafo:

Editável

<p>Bem-vindo ao meu site!</p>

<!-- Este é um comentário secreto só para mim! -->

<p>Aqui está o meu segundo parágrafo.</p>

Por que usar comentários?

Você pode estar se perguntando por que escreveria um código que ninguém vê. Existem dois motivos principais:

Deixar notas: Pense nos comentários como lembretes adesivos para o seu código. Você pode deixar lembretes úteis para o seu "eu" do futuro, ou explicar como um trecho de código complicado funciona para que seus colegas de equipe entendam mais tarde.
Desativar código: Se você está testando seu site e tentando rastrear um erro, pode esconder temporariamente um trecho de código transformando-o em um comentário. Os desenvolvedores chamam isso de "comentar" o código. Assim que você corrigir o erro, basta apagar os caracteres do comentário para reativar o código!

O segredo do navegador

Aqui vai um segredo divertido: quando um visitante comum olha o seu site, o navegador esconde perfeitamente todos os seus comentários. Eles nunca vão aparecer na página em si.

No entanto, seus comentários não são perfeitamente seguros. Qualquer pessoa que visite o seu site pode clicar com o botão direito do mouse e usar a ferramenta "Ver código fonte" ou "Código fonte da página" para espiar os bastidores do seu código bruto. Como qualquer um pode ler esse arquivo escondido, você nunca deve colocar senhas ou informações sensíveis dentro de um comentário HTML!

Colapso de espaços em branco

Quando você está digitando um texto em um processador de texto comum, pressionar a tecla "Espaço" ou "Enter" move o seu texto pela tela. O HTML não funciona assim.

Os navegadores usam uma regra chamada colapso de espaços em branco (whitespace collapse). Isso significa que o navegador essencialmente ignora espaços em branco extras e linhas vazias. Se você apertar a tecla "Espaço" ou "Enter" 50 vezes entre duas palavras no seu arquivo HTML, o navegador vai espremer todo esse espaço vazio em um único espaço normal na tela.

Uma analogia rápida: Imagine guardar um casaco de inverno fofo em um saco a vácuo. Não importa quanto ar fofo (espaços extras) exista dentro do casaco, o vácuo (o navegador) vai sugar tudo até sobrar apenas o casaco sólido (o seu texto).

Por que os navegadores fazem isso? Isso permite que você use quantos espaços e linhas vazias quiser para organizar seu arquivo de código e deixá-lo fácil de ler, sem bagunçar acidentalmente o layout da sua página final.

Resumo

Você está indo muito bem! Vamos revisar rapidamente o que aprendemos:

Comentários () são lembretes adesivos invisíveis para você e seus colegas desenvolvedores.
Você pode usar comentários para desativar código de forma segura e temporária enquanto testa.
Os visitantes não conseguem ver os comentários na página, mas ainda podem encontrá-los usando a ferramenta "Ver código fonte".
Os navegadores espremem espaços extras e linhas vazias em um único espaço, uma regra útil conhecida como colapso de espaços em branco.