Comentarios HTML

Un comentario HTML es una nota en tu marcado que el navegador ignora: no se renderiza en la página y no tiene ningún efecto en el diseño. Los comentarios existen únicamente para las personas que leen y mantienen el código fuente. Te ayudan a explicar por qué existe un fragmento de marcado, dejar recordatorios para más adelante y deshabilitar código temporalmente sin eliminarlo.

Esta página cubre la sintaxis de los comentarios, los comentarios de una y varias líneas, las reglas que hacen válido un comentario (y los errores que lo rompen), cómo comentar código durante la depuración, y los comentarios condicionales de Internet Explorer que aún puedes encontrar en proyectos antiguos.

Sintaxis

Un comentario se abre con <!-- y se cierra con -->. Todo lo que hay entre esos marcadores es ignorado por el navegador:

<!-- This is an HTML comment -->

Puedes colocar un comentario en su propia línea, o después de algún marcado en la misma línea:

<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->

El cierre --> es obligatorio. Si lo olvidas, el navegador continúa tratando todo lo que sigue como parte del comentario hasta que encuentra el siguiente --> (o el final del documento), lo que silenciosamente oculta fragmentos de tu página — un error común y desconcertante.

Por qué usar comentarios

• Explicar la intención. El código muestra qué sucede; un comentario puede registrar por qué. "¿Por qué está vacío este <div>?" se responde con una nota de una línea.
• Colaboración. En una base de código compartida, los comentarios indican a los compañeros de equipo cómo está previsto que funcione una sección.
• Notas TODO / FIXME. Marca trabajo inacabado o problemas conocidos para que sean fáciles de encontrar más adelante (<!-- TODO: add alt text -->).
• Depuración. Oculta temporalmente el marcado para aislar un problema sin perder el código original.

Comentarios de una y varias líneas

La misma sintaxis <!-- --> funciona para una o varias líneas. Un comentario multilínea simplemente abarca varias líneas entre los marcadores de apertura y cierre:

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Everything here is ignored by the browser,
  no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>

HTML no tiene una sintaxis de comentario de bloque separada — a diferencia de CSS, que usa /* ... */, o JavaScript, que usa // y /* ... */. En HTML siempre es <!-- -->.

Comentar código para depuración

Envolver el marcado en un comentario es una forma rápida de deshabilitarlo sin eliminarlo. Esto es muy valioso cuando estás buscando qué elemento está causando un problema:

<h1>The main heading</h1>

<!-- Temporarily disabled while debugging the layout
<aside>
  <p>This sidebar is hidden for now.</p>
</aside>
-->

<a href="https://www.w3docs.com">Homepage</a>

El <aside> anterior no se renderiza y el navegador ni siquiera lo construye en el DOM. Cuando hayas terminado, elimina <!-- y --> para restaurar el código.

Comentarios válidos e inválidos

Un comentario tiene algunas reglas. Si las rompes, el navegador puede tratar tu comentario como texto, o tragarse el marcado que querías conservar.

No puedes anidar comentarios. El primer --> cierra el comentario, por lo que el segundo --> se convierte en texto suelto en la página:

<!-- outer comment <!-- inner comment --> still inside? -->

Aquí el comentario termina en el primer -->. El texto sobrante still inside? --> se renderiza como texto visible — casi nunca es lo que quieres.

Evita -- dentro de un comentario. Según la especificación HTML, el texto de un comentario no debe contener -- excepto como parte del cierre -->. Tampoco debe comenzar con > ni con ->. Estos son válidos:

<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->

Y estos son problemáticos:

<!-- Don't use a -- double dash inside -->   <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker     <-- the rest of the page may vanish

El hábito más seguro: abre con <!--, escribe tu nota usando guiones simples o palabras, y cierra siempre con -->.

Pruébalo: comentarios HTML en un documento completo

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <!-- <p>We want to hide this paragraph temporarily.</p> -->
    <a href="https://www.w3docs.com">Homepage</a>
    <!-- TODO: this link will point to the homepage -->
  </body>
</html>

El navegador renderiza solo el encabezado y el enlace. Las dos líneas comentadas no producen nada en pantalla, como muestra la vista previa en vivo a continuación.

Comentarios condicionales (Internet Explorer heredado)

Las versiones antiguas de Internet Explorer (IE 5 a IE 9) soportaban una sintaxis especial de comentario condicional. Para el resto de los navegadores parecía un comentario ordinario y era ignorado, pero IE leía y ejecutaba el marcado interior cuando la condición coincidía:

<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css">
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an old version of Internet Explorer.</p>
<![endif]-->

Esta fue en su momento una forma estándar de enviar CSS o scripts solo a versiones específicas de IE. Los comentarios condicionales están obsoletos. Internet Explorer 10 eliminó su compatibilidad, y los navegadores modernos nunca los soportaron, por lo que no debes usar esta técnica en código nuevo. Se incluye aquí solo para que los reconozcas en proyectos heredados.

Dónde pueden y no pueden ir los comentarios

Todos los navegadores modernos soportan los comentarios HTML e ignoran su contenido, por lo que la sintaxis es segura para usar en cualquier parte donde tu marcado necesite explicación.

Práctica