Comentarios en HTML: ¿Para que sirven y como usarlos?

Los comentarios en HTML son pequeños secretos que marcan la diferencia en la codificación de una página web. En este artículo, exploraremos cómo poner estos comentarios en HTML, para qué sirven, y te proporcionaremos ejemplos prácticos que te ayudarán a comprender su utilidad, ya sea que estés trabajando en una página web desde cero o usando tu editor favorito como VSCode!!!

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Que son los comentarios en HTML?

Los comentarios en HTML son anotaciones que los desarrolladores pueden agregar al código fuente para explicar o aclarar secciones específicas.

La principal característica de estos comentarios, es que el navegador web los ignora y no se muestran en la página final ni afectan su normal funcionamiento. Pero si son visibles al inspeccionar el código fuente (haciendo «Ctrol + U»).

1.1. Ejemplo de como se ve un comentario en el documento HTML:

En este ejemplo, la parte que esta en verde corresponde a un comentario integrado desde el editor de código fuente gratuito VSCode. Como dijimos, ten presente que este comentario no es visible para el usuario, solo es visible desde el código fuente.

2. ¿Para que sirven estos comentarios HTML?

Como dijimos, los comentarios en HTML son fragmentos de texto que se insertan en el código HTML pero que no son interpretados por el navegador web. Sirven para añadir información adicional al código que no afecta a su funcionamiento en la página.

Funciones principales de los comentarios en HTML:

1. Explicar secciones de código:
   • Aclarar partes del código que podrían resultar complejas o difíciles de entender.
   • Mejorar la legibilidad del código, haciéndolo más fácil de leer y comprender.
   • Facilitar la colaboración entre desarrolladores, explicando las decisiones de diseño y el propósito de ciertas secciones del código.
2. Deshabilitar código temporalmente (ver punto 5):
   • Permitir deshabilitar temporalmente secciones del código sin eliminarlas permanentemente.
   • Útil para la depuración de problemas o para probar diferentes versiones del código.
3. Agregar metadatos:
   • Incluir información como el autor, la fecha de creación o la versión del código.
   • Documentar el código y registrar el proceso de desarrollo y las modificaciones realizadas.
4. Registrar tareas pendientes:
   • Anotar tareas pendientes o áreas del código que requieren mejoras futuras.
   • Sirve como recordatorio para futuras revisiones del código.
5. Mejorar la organización del código:
   • Dividir el código en secciones lógicas y agregar comentarios descriptivos para cada sección.
   • Facilitar la navegación y comprensión del código, especialmente en proyectos grandes o complejos.
6. Proteger código confidencial:
   • Ocultar temporalmente partes del código que contienen información confidencial o sensible.
   • Útil para compartir código con terceros sin revelar información importante.
7. Marcar cambios en el código:
   • Agregar comentarios para indicar cambios realizados en el código, como correcciones de errores o nuevas funciones.
   • Facilitar el seguimiento del historial de cambios y la colaboración en el desarrollo del código.

3. ¿Cómo poner comentarios en el código HTML? Paso a paso.

En HTML, los comentarios se delimitan utilizando los caracteres <!-- para abrir el comentario y --> para cerrarlo.

Aquí tienes un desglose del paso a paso para poner los comentarios en HTML:

1. Apertura del comentario:
   • Para iniciar un comentario en HTML, simplemente utilizas <!--.
   • Esto le indica al navegador que todo lo que sigue a partir de este punto es un comentario y no debe ser interpretado como parte del contenido visible de la página.
2. Contenido del comentario:
   • Después de <!--, puedes escribir cualquier texto que desees incluir en el comentario.
   • Puedes agregar descripciones, notas, recordatorios o cualquier otra información relevante para los desarrolladores que estén leyendo el código HTML.
3. Cierre del comentario:
   • Para finalizar el comentario, debes utilizar -->.
   • Esto indica al navegador que el comentario ha terminado y que debe volver a interpretar el código HTML normalmente a partir de este punto.

Es importante recordar que cualquier cosa que esté dentro de <!-- y --> será tratada como un comentario y no será mostrada en la página web final que ve el usuario. Los comentarios son útiles para incluir documentación sobre el código, explicar partes específicas del mismo o desactivar temporalmente secciones de código durante el desarrollo.

Aquí tienes un ejemplo simple de un comentario en HTML:

<!-- Este es un comentario en HTML. -->

4. ¿Cómo hago para deshabilitar un elemento HTML con un comentario sin eliminarlo?

Para desactivar un código HTML utilizando comentarios sin eliminarlo por completo, simplemente necesitas encerrar la sección de código que deseas desactivar entre los delimitadores de comentarios <!-- y -->. Aquí te muestro cómo hacerlo:

Supongamos que tienes el siguiente código HTML que deseas desactivar temporalmente:

<div class="seccion-desactivada">
    <p>Este es un contenido que deseas desactivar temporalmente.</p>
    <p>Otro contenido aquí.</p>
</div>Lenguaje del código: HTML, XML (xml)

Para desactivar este código sin eliminarlo, simplemente envuélvelo entre los delimitadores de comentarios de esta manera:

<!--
<div class="seccion-desactivada">
    <p>Este es un contenido que deseas desactivar temporalmente.</p>
    <p>Otro contenido aquí.</p>
</div>
-->Lenguaje del código: HTML, XML (xml)

Al incluir <!-- antes del inicio de la sección que deseas desactivar y --> después del final de la misma, estás comentando todo ese bloque de código.

Esto le dice al navegador que ignore esa sección cuando renderiza la página web, pero aún mantienes el código presente para referencia futura o para activarlo nuevamente en el futuro simplemente eliminando los delimitadores de comentarios.

5. ¿Puedo agregar comentario HTML si estoy usando WordPress?.

Si, por ejemplo, si estamos usando el editor de bloques de Gutenberg en WordPress, puedes agregar comentarios HTML de la siguiente manera:

1. Agregar un bloque de HTML:
   • Primero, abre el editor de Gutenberg para la página o entrada en la que deseas agregar comentarios HTML.
   • Haz clic en el símbolo más (+) en la parte superior izquierda o en cualquier lugar donde desees agregar el comentario.
2. Buscar y agregar el bloque de HTML:
   • En el cuadro de búsqueda de bloques, escribe «HTML» o busca el bloque de «HTML» en la sección de «Incrustar».
   • Deberías encontrar un bloque llamado «HTML personalizado» o similar. Haz clic en él para agregarlo a tu página o entrada.
3. Insertar el comentario:
   • Una vez que hayas agregado el bloque de HTML, podrás escribir directamente en él. Simplemente escribe tu comentario entre <!-- y -->.
   • Por ejemplo: <!-- Este es un comentario HTML en Gutenberg -->
4. Guardar tu página o entrada:
   • Una vez que hayas añadido el comentario y realizado cualquier otra edición que desees, asegúrate de guardar tus cambios haciendo clic en el botón «Actualizar» o «Guardar» en el editor de Gutenberg.

Siguiendo estos pasos, podrás agregar comentarios HTML en el editor de bloques de Gutenberg en WordPress.