¿Cómo añadir comentarios en HTML?

En esta guía paso a paso, aprenderás qué son los comentarios en HTML, cómo usarlos correctamente y las mejores prácticas para implementarlos.

Si estás dando tus primeros pasos en el desarrollo web, es fundamental conocer los comentarios en HTML. Estos permiten organizar mejor el código y hacerlo más comprensible tanto para ti como para otras personas que puedan trabajar en el mismo proyecto. 

¿Qué es un comentario en HTML?

Un comentario en HTML es una anotación dentro del código que el navegador ignora. Su objetivo es proporcionar información adicional o explicaciones sin afectar la visualización de la página web.

La sintaxis de un comentario en HTML es:

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

Cualquier texto que se encuentre entre <!-- y --> será ignorado por el navegador y no se mostrará en la página web.

¿Para qué sirven los comentarios en HTML?

Los comentarios en HTML son especialmente útiles para:

• Explicar el código: Ayudan a entender la función de ciertas secciones del código.
• Deshabilitar partes del código temporalmente: Si estás probando cambios, puedes comentar algunas líneas en lugar de eliminarlas.
• Facilitar la colaboración: Cuando varias personas trabajan en el mismo proyecto, los comentarios ayudan a comprender mejor el código.
• Organizar el código: Se pueden usar para dividir y etiquetar diferentes secciones.

Cómo agregar comentarios en HTML paso a paso

• Abrir tu editor de código: Puedes usar cualquier editor de texto o herramientas como VS Code, Sublime Text o incluso el bloc de notas.

• Identificar la parte del código donde deseas agregar el comentario.

• Escribir el comentario usando la sintaxis correcta:

<!-- Este es un comentario -->

• Guardar los cambios y probar en el navegador: Abre el archivo HTML en un navegador y verifica que el comentario no aparece en la página.

Si necesitas comentar varias líneas, puedes hacerlo de la siguiente manera:

<!--
Este es un comentario
que ocupa múltiples líneas.
-->

Mejores prácticas para usar comentarios en HTML

• Usa comentarios descriptivos: En lugar de <!-- Esto es un div -->, utiliza <!-- Contenedor principal de la sección de contacto -->.
• No abuses de los comentarios: Si el código está bien estructurado, no necesitas demasiados comentarios.
• Evita incluir información sensible: Los comentarios pueden ser visibles en el código fuente de la página.
• Mantén actualizados los comentarios: Si realizas cambios en el código, revisa que los comentarios sigan siendo relevantes.
• Usa comentarios para dividir el código en secciones: Cuando trabajes en proyectos grandes, agregar comentarios como <!-- Inicio de la sección de navegación --> puede mejorar la comprensión y organización del código.
• No uses comentarios para ocultar código malo: Es preferible refactorizar o mejorar el código en lugar de simplemente comentarlo.

Casos en los que NO debes usar comentarios en HTML

Aunque los comentarios son útiles, hay situaciones en las que pueden ser contraproducentes:

1. No uses comentarios para esconder contraseñas o datos sensibles. Aunque no sean visibles en la página, cualquier persona puede inspeccionar el código fuente.
2. Evita sobrecargar el código con comentarios innecesarios. Un código limpio y bien estructurado se explica por sí mismo en la mayoría de los casos.
3. No abuses de comentarios como solución temporal. Si bien es útil comentar código para pruebas, es recomendable eliminar las líneas innecesarias una vez que el código esté estable.

Los comentarios en HTML son una herramienta esencial para escribir código limpio, organizado y fácil de mantener. Usarlos correctamente puede facilitar el trabajo en equipo, mejorar la documentación del código y hacer que los proyectos sean más manejables a largo plazo.

Ahora que conoces la importancia de los comentarios en HTML y cómo utilizarlos correctamente, te recomendamos practicar en tus propios proyectos. ¡No dudes en experimentar y mejorar tus habilidades en desarrollo web!

Te recomendamos en video