Comentario HTML — Frontend Classroom

Un comentario HTML es un fragmento de texto en el código fuente que el navegador ignora completamente al procesar y renderizar la página. No genera ningún elemento visual, no ocupa espacio y no afecta el comportamiento del documento. Su propósito es doble: anotar el código para futuros lectores (incluido vos mismo) y desactivar temporalmente fragmentos de HTML durante el desarrollo.

Cómo funciona

La sintaxis de un comentario empieza con . Todo lo que quede entre esas dos marcas es el comentario.

<!-- Esto es un comentario de una línea -->

<!--
  Esto es un comentario
  de varias líneas.
-->

Los comentarios pueden ir en cualquier lugar del HTML: dentro del <head>, dentro del <body>, entre elementos, dentro de elementos.

<!-- Sección: encabezado del sitio -->
<header>
  <h1>Mi sitio</h1>
</header>

<!-- Sección: contenido principal -->
<main>
  <p>Bienvenido.</p>
</main>

Uso para desactivar código

Una aplicación práctica durante el desarrollo es “comentar” un bloque para sacarlo de la página temporalmente sin borrarlo:

<!--
<p>Este párrafo está desactivado mientras hago pruebas.</p>
<img src="foto.jpg" alt="Foto temporalmente oculta" />
-->

Todo lo que quedó entre  no se renderiza. Para reactivarlo, solo eliminás las marcas de comentario.

Tipos de comentario por lenguaje

HTML tiene un solo tipo de comentario (), que sirve tanto para una línea como para varias. Pero los otros lenguajes del front suelen distinguir dos formas: el comentario de línea (desde la marca hasta el fin de la línea) y el comentario de bloque (todo lo que quede entre una marca de apertura y una de cierre, abarque las líneas que abarque). Conocer la diferencia evita el error más común: usar la sintaxis equivocada en cada archivo.

HTML — solo de bloque ():

<!-- una línea -->

<!--
  varias líneas:
  todo esto es comentario
-->

CSS — solo de bloque (/* */): CSS no tiene comentario de línea; siempre se abre y se cierra.

/* una línea */

/*
  varias líneas
*/

JavaScript — de línea (//) y de bloque (/* */):

// comentario de línea: hasta el fin del renglón

/*
  comentario de bloque:
  varias líneas
*/

Mezclar sintaxis es un error frecuente: escribir  dentro de un <style> o un <script> rompe el código, igual que usar // dentro del HTML.

El gotcha más importante: los comentarios son visibles

Los comentarios no se muestran en la página, pero sí son visibles en el código fuente. Cualquier persona puede abrir las DevTools del navegador (F12) o ver el código fuente (Ctrl+U / Cmd+U) y leer todos los comentarios del HTML.

Nunca uses comentarios para guardar:

Contraseñas o credenciales
Tokens de API o claves secretas
Información privada de usuarios
Rutas internas o comentarios sobre vulnerabilidades

Un error frecuente en sitios reales es dejar en producción comentarios del tipo . Los comentarios son parte del código fuente público.

Ejemplo realista

<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- Meta obligatorio: codificación y viewport -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recetas de cocina</title>
  </head>
  <body>

    <!-- ENCABEZADO -->
    <header>
      <h1>Mis recetas</h1>
    </header>

    <!-- CONTENIDO PRINCIPAL -->
    <main>
      <p>Seleccioná una categoría para empezar.</p>

      <!--
        TODO: agregar lista de categorías cuando esté lista
        la base de datos de recetas
      -->
    </main>

  </body>
</html>

Cuándo usarlos

Los comentarios son útiles cuando:

El código es complejo y el porqué no es obvio leyendo el HTML.
Estás marcando secciones grandes para facilitar la navegación en archivos largos.
Necesitás desactivar temporalmente un bloque durante el desarrollo.
Estás enseñando o documentando código para que otros lo entiendan.

Lo que conviene evitar: comentar lo que el código ya dice claramente.  antes de un <p> no aporta nada.

Notas, gotchas e interacción

-- (doble guión) dentro de un comentario era técnicamente inválido en HTML4/XHTML pero los navegadores modernos lo toleran. Para mayor compatibilidad, evitá usar -- dentro del texto de un comentario.
Los comentarios se descargan. Aunque no se renderizan, forman parte del archivo HTML que el usuario descarga. Demasiados comentarios o comentarios muy largos agregan peso innecesario. Para producción, los minificadores los eliminan automáticamente.

Vigente / legacy

Los comentarios HTML () son parte de la especificación desde HTML 2.0 y siguen siendo la única sintaxis para comentarios en HTML. No hay alternativa ni versión legacy.