Docs ejecutables de HTML: Comentarios HTML

Q: ¿Cómo se escribe un comentario en HTML?

Empiézalo con : . Todo lo que hay entre los dos marcadores lo ignora el navegador, incluidas las etiquetas, así que la misma sintaxis sirve para comentar código.

Q: ¿Se pueden anidar los comentarios en HTML?

No. El primer --> cierra el comentario, así que en c --> el texto c --> se muestra en la página. Para comentar un bloque que ya contiene un comentario, quita o cambia primero el comentario interior.

Q: ¿Los comentarios HTML funcionan dentro de CSS o JavaScript?

No. Dentro de un elemento usa / ... /, y dentro de un usa // o / ... /. Un comentario HTML en un bloque de estilos no oculta las reglas CSS que contiene.

Cómo escribir un comentario en HTML

Un comentario HTML empieza con . El navegador ignora todo lo que hay entre los dos marcadores, así que ese texto nunca aparece en la página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Solo aparecen el título y el párrafo. En HTML hay una única sintaxis de comentario, y funciona para una línea o para muchas.

El atajo en VS Code y la mayoría de los editores: selecciona unas líneas y pulsa Ctrl + / (Cmd + / en Mac). El editor añade los marcadores por ti, y las mismas teclas los quitan.

Comentar código

Como el navegador ignora las etiquetas dentro de un comentario, envolver marcado entre  lo oculta sin borrarlo. Es la forma más rápida de probar una página sin un elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Borra  en la línea del banner y vuelve a aparecer. El código comentado se sigue descargando con la página, así que cuando estés seguro de que no lo necesitas, bórralo.

Los comentarios no se pueden anidar

El primer --> siempre cierra el comentario. Si el código que comentas ya contiene un comentario, el comentario exterior termina antes de tiempo y el resto se cuela en la página. Este ejemplo le pasa comentarios anidados al analizador del navegador y muestra lo que queda visible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> se muestra como texto. Antes de comentar un bloque grande, quita los comentarios que tenga dentro (o cambia su --> para que ya no coincida).

Algunas reglas más: un comentario no puede empezar con , así que no pongas ninguno de los dos en el texto del comentario.

Los comentarios son públicos

Los comentarios forman parte del HTML que envía el servidor, así que cualquier visitante puede leerlos con Ver código fuente o las herramientas para desarrolladores. Un script también puede listarlos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Usa los comentarios solo para notas sobre el código. Nada privado (contraseñas, claves de API, URL internas, datos de clientes) debe estar nunca en el HTML, comentado o no. Las herramientas de compilación y los minificadores suelen quitar los comentarios del HTML de producción, lo que además ahorra algunos bytes.

Comentarios en CSS y JavaScript

Los comentarios HTML solo funcionan en HTML. Dentro de <style> y <script> se usa la sintaxis de comentarios de ese lenguaje:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

El título se vuelve azul: el CSS ignora los propios marcadores  y sigue aplicando la regla que hay entre ellos. Solo /* ... */ desactiva el CSS. La página de comentarios en CSS explica esa sintaxis.

Comentarios condicionales

El código antiguo a veces contiene . Eran instrucciones para Internet Explorer 9 y versiones anteriores. Todos los navegadores actuales los tratan como comentarios normales, así que su contenido se ignora y se puede borrar el bloque entero.

Errores comunes

Anidar comentarios. El --> interior cierra el comentario exterior. Quita los comentarios interiores antes de comentar un bloque.
Poner secretos en comentarios. Los comentarios se envían a todos los visitantes.
Falta el -->. Todo lo que va desde <!-- hasta el final del archivo desaparece, y parece que se esfumó media página.
Usar  en CSS. No desactiva las reglas. Usa /* */.
Usar // en HTML. // note se muestra como texto. HTML solo entiende .

Preguntas frecuentes

¿Cómo se escribe un comentario en HTML?

Empiézalo con : . Todo lo que hay entre los dos marcadores lo ignora el navegador, incluidas las etiquetas, así que la misma sintaxis sirve para comentar código.

¿Cómo se hace un comentario de varias líneas en HTML?

HTML tiene una sola sintaxis de comentario, y puede ocupar cualquier número de líneas. Pon  después de la última.

¿Cuál es el atajo para comentar en HTML?

En VS Code y la mayoría de los editores de código, selecciona las líneas y pulsa Ctrl + / (Windows y Linux) o Cmd + / (Mac). El editor envuelve la selección en , y las mismas teclas los quitan.

¿Se pueden anidar los comentarios en HTML?

No. El primer --> cierra el comentario, así que en  c --> el texto c --> se muestra en la página. Para comentar un bloque que ya contiene un comentario, quita o cambia primero el comentario interior.

¿Los usuarios pueden ver los comentarios HTML?

No se muestran, pero se envían al navegador junto con la página. Cualquiera puede leerlos con Ver código fuente o las herramientas para desarrolladores, así que nunca pongas en ellos contraseñas, claves ni notas privadas.

¿Los comentarios HTML funcionan dentro de CSS o JavaScript?

No. Dentro de un elemento <style> usa /* ... */, y dentro de un <script> usa // o /* ... */. Un comentario HTML en un bloque de estilos no oculta las reglas CSS que contiene.

Conceptos relacionados