Comentários

Sintaxe básica

Os comentários podem ser usados para vários propósitos: para indicar o que uma marcação faz, para explicar o porque de ter colocado um elemento em determinado lugar e também para mostrar marcações específicas para alguns browsers, especialmente o IE. Comentários não são visíveis na página. Eles começam com <!-- e terminam com -->. Exemplos:

<!-- Comentário de apenas uma linha -->
<!-- Comentário de várias linhas
     Essa é a segunda linha do comentário
     Última linha -->

Comentários condiconais

Comentários condicionais são suportados do IE 5 ao IE 9. Esses browsers interpretam o comentário como uma instrução, enquanto os outros browsers veem esses comentários como comentários comuns. Essa funcionalidade é útil em especial por conta da grande falta de suporte a features comuns que esses browsers tem. Então, para tornar o site compatível com esses browsers, muitas vezes se opta por usar hacks, que só foram feitos para essas versões, que são muito problemáticas. O uso mais comum é a adição de folhas de estilos e scripts específicos para essas versões do IE.

Os browsers que não suportam comentários condicionais, ou seja, todos os browsers, exceto do IE5 ao IE9, são chamados de downlevel. Há dois tipos de comentários condicionais: downlevel-hidden e downlevel-revealed. Você os verá em detalhes a seguir.

Downlevel-hidden

Veja a sintaxe básica desse comentário:

<!--[condição]>
  Marcação que atende à condição especificada, mas sempre tratada como comentário por browsers downlevel.
<![endif]-->

Há várias formas de expressar a condição. Veja abaixo uma delas:

<!--[if IE 7]>
  Marcação incluída apenas no IE 7.
<![endif]-->

Você também pode afetar todas as versões do IE suportadas (IE 5 - IE 9), colocando apenas IE:

<!--[if IE]>
  Marcação incluída em qualquer IE que esteja entre o IE 5 e o IE 9.
<![endif]-->

Você também pode usar um ponto de exclamação para negar uma condição:

<!--[if !IE 7]>
  Marcação incluída em qualquer IE que esteja entre o IE 5 e o IE 9, exceto o IE 7.
<![endif]-->

Você também pode usar gt (greater than / maior que), lt (lower than / menor que), gte (greater than or equals / maior que ou igual), lte (lower than or equals / menor que ou igual). Esses operadores funcionam como operadores relacionais. São usadas letras ao invés de símbolos porque os símbolos desses operadores não podem ser usados no HTML para esse fim, porque já são usados em tags. Veja exemplos que usam cada um desses operadores:

<!--[if gt IE 7]>
  Marcação incluída no IE em versões superiores à versão 7, até a versão 9.
<![endif]-->
<!--[if gte IE 7]>
  Marcação incluída no IE a partir da versão 7 até a versão 9.
<![endif]-->
<!--[if lt IE 7]>
  Marcação incluída nas versões do IE inferiores à versão 7, a partir da versão 5.
<![endif]-->
<!--[if lte IE 7]>
  Marcação incluída nas versões do IE a partir da versão 5, até a versão 7.
<![endif]-->

Downlevel-revealed

No downlevel-revealed, a sintaxe da condição é a mesma do downlevel-hidden. A diferença é que apenas o if e o endif são envolvidos em comentários, e não o bloco inteiro. A marcação não é envolvida em um comentário. Isso faz com que a marcação seja exibida para todos os browsers downlevel. É usada quando se quer usar uma marcação para todos os browsers, exceto para versões específicas do IE. Exemplos:

<!--[if IE 6]>-->
  Marcação incluída em todos os browsers, exceto em versões no IE das versões 5 até a 9, com exceção da versão 6.
<!--[endif]-->
<!--[if gt IE 8]>-->
  Marcação incluída em todos os browsers, exceto em versões do IE inferiores ou iguais ao IE 8, a partir do IE 5.
<!--[endif]-->

Espaço entre elementos inline

Considere a marcação abaixo:

<button class="alert-button">Botão<button>
<button class="warning-button">Botão<button>

Será mostrado um espaço entre os botões. Nesse caso, quando colocamos uma quebra de linha entre dois elementos inline, ou colocamos qualquer outro tipo de espaço entre os elementos, um espaço em branco vai aparecer na página. Às vezes, esse espaço pode ser indesejado. Para removê-lo, você pode comentar o espaço em branco.