¿Cómo Colocar un Comentario en Código HTML? Y Ejemplos

El comentario HTML se introduce en una etiqueta <!-- comentario --> : el texto introducido se muestra en el código, pero no es visible para el visitante de la página web.

Esta es una forma útil para que el desarrollador anote su código, para trabajar en él sin afectar a la visualización de la página web, para mantener un historial de modificaciones o para aislar líneas de código sospechosas. Cuando el sitio se desarrolla como parte de un esfuerzo de colaboración, los comentarios HTML son particularmente útiles.

¿Qué es un Comentario HTML?

El comentario HTML permite al programador insertar texto en el código que el navegador web no muestra. El comentario se rellena dentro de las etiquetas HTML < !-- -- >: cuando el navegador lee el código, no procesa la información contenida en estas etiquetas.

Ejemplo de Comentario HTML

En este ejemplo, el desarrollador quiere aplicar un formato coherente para que la lectura sea más fácil y agradable. Inserta un comentario para recordar que, para cada elemento de la “receta“, la primera palabra de los pasos de la receta debe ir en negrita.

En caso necesario, la anotación es una información que también puede comunicar al desarrollador que se encargue de la codificación de la página web. En cualquier caso, el comentario HTML debidamente insertado no aparece en el texto de la página web.

<div class="receta">
    <!-- La primera palabra de cada párrafo está en negrita -->
<h2>Tarta de chocolate</h2>
<p><strong>Comprobar</strong> que disponga de los siguientes utensilios :</p>
<ul>
<li>Una fuente para hornear</li>
<li>Un cuenco</li>
<li>Un vaso medidor</li>
<li>Una espátula de madera</li>
</ul>
<p><strong>Precalentar</strong> el horno a 210°.</p>
<p><strong>Mezclar</strong> en el recipiente la harina, los huevos, el azúcar, la mantequilla y el chocolate fundido.</p>
<p><strong>Verter</strong> la mezcla en la fuente de horno</p>
<p><strong>¡Mételo en el horno!</strong></p>
  </div>

¿Para qué Sirven los Comentarios HTML?

Los comentarios HTML, invisibles para los visitantes de la página web, se muestran en el código en beneficio de todos los desarrolladores que trabajan en ella.

Insertar un comentario HTML tiene varias ventajas:

• Durante el desarrollo del sitio web: el comentario HTML sirve como recordatorio o explicación, para aclarar el código y facilitar así el trabajo del desarrollador.

• Para corregir un error: los comentarios HTML permiten bloquear temporalmente el navegador para que no muestre una línea de código, con el fin de identificar de dónde procede el error sin necesidad de eliminar el código. Las etiquetas de comentario se insertan sucesivamente al principio y al final de cada línea de código: el desarrollador observa los sucesivos resultados que se muestran en el navegador, hasta que identifica el fallo para resolverlo.
• Para probar la ergonomía de una página web: mediante la etiqueta de comentario HTML, el desarrollador puede activar y desactivar código a voluntad. La etiqueta también permite poner en espera una línea de código, su eliminación posterior desbloquea la línea de código para mostrar el contenido en el navegador.

• Al rediseñar el sitio web: el desarrollador que reestructura el sitio web puede decidir comentar partes de la versión antigua del código, suponiendo que se restaurarán más adelante. Estas partes no se muestran en el navegador, pero permanecen visibles en el código fuente de la página web.

¿Cómo Insertar un Comentario HTML?

Para insertar un comentario HTML, utiliza la etiqueta < !-- -- > y coloca el texto entre los dos guiones dobles.

Ejemplos:

< !-- Comento aquí como recordatorio -- >

< !-- Pongo el párrafo < p > párrafo suspendido < /p > como comentario para desactivarlo temporalmente -- >.

Incluso puedes hacer comentarios para multiples líneas:

    <!-- <section class="algo">
    </section>  -->

Ejemplo de inserción de un comentario HTML para activar y desactivar fácilmente una oferta promocional periódica en un sitio de comercio electrónico:

<div class="oferta promocional">
  <h2>Nuestras ofertas actuales</h2>
    <!-- La oferta sólo se activa en diciembre -->
<p>Utiliza el código promocional "Diciembre" para obtener un 30% de descuento !</p>
  <p><!-- No hay ofertas --></p>
</div>

<div class="oferta promocional">
  <h2>Nuestras ofertas actuales</h2>
    <!-- La oferta sólo se activa en diciembre -->
<!-- <p>Utiliza el código promocional "Diciembre" para obtener un 30% de descuento! --></p>
  <p> No hay ofertas </p>
</div>

Conclusión

Y ahí lo tienes: ¡ahora ya sabes cómo y por qué utilizar comentarios en HTML!

Es ideal para principiantes y no requiere conocimientos previos. Empezarás por lo más básico y desarrollarás tus habilidades a medida que avances.

Gracias por leer y feliz aprendizaje 🙂