HTML5 Para Crianças - Comentários

O que são Comentários no Código?

Tal como em praticamente todas as linguagens de programação, tanto o HTML como o CSS permitem colocar comentários no código de forma a facilitar a sua leitura e a comunicar dados importantes a outros programadores que possam estar a trabalhar no mesmo projecto. Para além disso, mesmo que estejas a trabalhar sozinho num documento, podes usar comentários para criar notas para ti próprio.

Como esta informação é apenas auxiliar, os navegadores (ou Internet browsers ou até só browsers) não processam esta informação e, como tal, não aparece no teu site.

Por essa razão, há também muitos programadores que, durante a fase de desenvolvimento, os usam para testar partes do código. Ao comentarem secções de código, fazem com que essas secções não sejam processadas pelo navegador de Internet e assim podem experimentar como é que o site fica com e sem essas secções sem terem que as apagar do código.

Comentários em HTML

Os comentários em HTML colocam-se entre os caracteres  que fecham o comentário.

Usando esta funcionalidade do HTML, podes comentar uma linha de código, várias linhas de código, e até partes do conteúdo dentro de um elemento. Deixo aqui alguns exemplos:

<p>Consegues ver esta frase. <!-- Mas esta não consegues. --></p>

<!-- <p>Neste caso, é o parágrafo todo que não aparece no website.</p> -->

<!--
  <h1>Título Invisível!</h1>
  <p>Podia fartar-me de escrever aqui conteúdos mas é desnecessário porque não vão aparecer no site.</p>
  <p>Tanto o título, como estes dois parágrafos não aparecem no website.</p>
-->
<p>Mas este parágrafo já aparece.</p>

<!DOCTYPE html>
  <html lang="pt">
 
  <!-- Aqui começa o head -->
  <head>
    <meta charset="UTF-8">
    <title>A minha Primeira Página</title>
  </head>
   
  <!-- Aqui começa o body -->
  <body>
   
    <!-- Aqui começa o menu -->
    <h2>Menu</h2>
    <ul>
      <li><a href="pagina.html">Página 1</a></li>
      <li><a href="pagina2.html">Página 2</a></li>
      <li><a href="pagina3.html">Página 3</a></li>
    </ul>
    
    <!-- Aqui começa o conteúdo da página -->
    <h1>Olá!</h1>
 ...

Comentários em CSS

Os comentários em CSS usam-se exactamente pela mesma razão, mas os caracteres usados para os criar são diferentes. Para abrir um comentário usas /* e para fechar, fazes ao contrário */.

h1#titulo-principal {
  background-color:white;
  color:black;
  /* text-align:center; Comentei esta linha para experimentar o texto descentrado */
}

/* Tipografia */ 
 p.letra-grande {
   font-size:18px;
   margin-bottom:18px;
 }
 
 /* Links */
 a {
   font-weight:bold;
   text-decoration:underline;
 }

/*
p.alert {
  color:green;
  font-size:18px;
  margin-bottom:18px;
} 
*/

Não há mais nada para dizer sobre comentários no código. Como vês, são fáceis de usar e podem tornar o nosso código menos confuso e mais fácil de ler. No fundo, existem para nos facilitar a vida.

O que há muito para dizer é sobre os elementos que vamos conhecer no próximo capítulo. Estou a ficar bastante entusiasmado porque, depois de os conheceres, vamos poder começar a falar sobre a estrutura dos websites e como fazer os diversos blocos que a constituem.

Sendo assim, já sabes o que fazer. Basta clicares no botão aí de baixo para passarmos ao Capítulo 9 - Elementos de Seccionamento.

HTML5 para Crianças - Classes e Ids HTML5 para Crianças - Elementos de Seccionamento