El HTML es un lenguaje que se utiliza para crear páginas web; entre sus funciones más destacadas y básicas está la de comentar en HTML. Qué son y para qué sirven o cómo se hacen estos comentarios es algo que debes saber para tener un nivel básico. Y, precisamente, eso vamos a ver: una guía básica para principiantes. Entonces, ¡empecemos por el principio!
Los comentarios en HTML son anotaciones o, como su propio nombre indica, comentarios, que se hacen en el código fuente, pero que no son visibles para el público y no afectan al rendimiento de la página web, explica la consultora digital Cronuts 1.
Estos comentarios no son visibles, como comentábamos, en nuestra página web en HTML, ya que están “en el interior”, por así decirlo. Suelen ser bastante útiles, explica la misma fuente, cuando se trabaja en equipo o para un proyecto al que se regresa después de un tiempo, para poder dejar las anotaciones pertinentes para el resto del equipo o en el momento de retomar el proyecto.
¿Por qué son importantes los comentarios en el desarrollo web?
- 1️⃣ Porque, como hemos adelantado en la definición, favorecen el trabajo colaborativo y en equipo.
- 2️⃣ Porque también permiten hacer aclaraciones necesarias para el código, sin que el usuario final lo note.
- 3️⃣ Porque, en definitiva, facilitan la comprensión del código.
Una vez que tenemos claro qué son y para qué sirven, ¡vamos a ver cómo se hacen!
👆 Te interesa: aprende a editar texto en HTML y darle estructura al contenido de tu página web. ¡Es uno de los puntos básicos más importantes de este lenguaje!
¿Cómo comentar en HTML?
Lo primero que tenemos que saber para comentar en HTML es cuál es la sintaxis básica de los comentarios, es decir, qué hay que escribir para indicar que lo que aparecerá a continuación es un comentario.
<!-- Esto es un comentario -->
✅ Donde aparece el texto “esto es un comentario” es donde tú podrás poner tu comentario, tal y como se ve más arriba en forma de texto. Con ese texto podrás dar una serie de indicaciones necesarias o que consideres pertinentes, que no aparecerán en la página pero sí en su "interior". ¡Puedes escribir cualquier cosa!
Ejemplos prácticos de comentarios
Ya hemos visto la teoría, vamos a ver ahora la práctica, para que tengas una idea más clara de cómo usar los comentarios en HTML y en qué casos son pertinentes. Lo primero de todo, que para hacer un comentario hay que usar la sintaxis <!-- Esto es un comentario --> y poner, a continuación, la información indicada, que puede ser una aclaración, unas correcciones, también un feedback sobre una parte del código, por ejemplo, etc.
✅ Ejemplo de comentarios para organizar el código
En este ejemplo vemos cómo se especifica qué sección hay después del comentario, para sin necesidad de ver el título, tener una estructura ordenada que facilite la legibilidad del código.
👉
✅ Ejemplo de comentarios para pruebas o notas:
Al principio de este fragmento de código vemos la nota que aclara que la sección está en construcción, lo que indica que es un trabajo en curso; una información muy útil para el resto de personas que trabajan en el proyecto. Al final, vemos también una prueba que indica "añadir un nuevo párrafo aquí", para sugerir una mejora en la página.
👈
Seguramente, con estos ejemplos ya te has hecho una idea de para qué sirve esta utilidad de HTML. Puedes hacerlo, obviamente, con el teclado del ordenador, poniendo el cursor en el lugar en el que quieres añadir el comentario y escribiendo la sintaxis con el comentario en el interior. ¡No tiene más misterio!
A diferencia de otros lenguajes como Python, en los que existe una sintaxis para comentar varias líneas, no hay en HTML esta opción. Pero la manera de hacerlo es posible y, además, muy simple: usando la sintaxis de comentario, puedes escribir las líneas que necesites.
En resumen, los comentarios en HTML no tienen límite en cuanto a la extensión, por lo que puedes extender tu texto lo que consideres necesario. Eso sí, cuanto más conciso sea el comentario, más facilitará la compresión, el orden y la armonía del código, tal y como desarrollaremos más adelante.
✅¡Vamos a verlo con un ejemplo muy gráfico y hasta divertido. 👉
Buenas prácticas al comentar en HTML
Igual que hacer un comentario en HTML es sencillo e identificarlo también, el uso inadecuado de los comentarios puede llegar a causar el efecto contrario. Si por ejemplo hay muchos comentarios y/o son tan extensos que al final nos cuesta diferenciar qué es el código y qué el comentario puede provocar que la lectura sea más complicada por tanta interrupción. Para evitar que estos suceda, toma nota de estos consejos para escribir comentarios útiles y claros:
👆 Pero antes: descubre cómo insertar tablas en HTML, y recuerda que no debes usarlas para general la estructura de la página web.
Antes de seguir tu camino, verifica con esta checklist si tu comentario cumple su función o no, y si es pertinente hacerlo o mejor pasar a otra cosa. 😉 De esta lista de buenas prácticas o consejos, se puede deducir también la siguiente, la de los errores más comunes al comentar en HTML que debes evitar. En especial si, precisamente, trabajas en equipo. ¡Los comentarios no son solo para facilitarte a ti las cosas!
Errores comunes al comentar en HTML que debes evitar
Toma nota también de los errores más comunes al usar los comentarios en HTML, evitándolos facilitarás la comprensión del código, y también el trabajo en equipo.
- Duplicar código dentro de un código: si haces esto el rendimiento de la página web se verá afectado.
- Dejar una parte del código con errores porque ya se había especificado en el comentario dicho error.
- Comentar demasiado, esto puede generar más confusión que las aclaraciones e indicaciones para las que están pensadas los comentarios.
Si cada línea de tu código está seguida de un comentario, puede resultar contraproducente. En lugar de aclarar las cosas, una sobrecarga de comentarios puede hacer tu código más difícil de leer y mantener. Así que recuerda: en la moderación está la clave.
Albert Puig, partner de Cronuts Digital
- Evitar los comentarios que no son relevantes, que no aportan: como por ejemplo decir, aquí empieza el título, justo antes del título...
- También utilizar los comentarios para decir que una parte del código está mal o que habría que eliminarla. Lo mejor es hacerlo directamente, para eliminar el código innecesario y la saturación de comentarios.
- Otro error común es no revisar los comentarios, para por ejemplo borrar aquellos que hacían referencia a una corrección que ya está implementada.
Escuchar las siglas HTML puede asustar un poco al principio, pero si sigues paso a paso las instrucciones para aprender algunas de sus funciones, como insertar imágenes en HTML, o vídeos, verás que es bastante intuitivo, sencillo y lógico y que, poco a poco, irás conociendo más utilidades del que te ayudarán a entenderlo mejor. Y quien sabe si algún día a implementarlo... ¿Te atreves?
Bibliografía
- Puig, A. (2024, febrero 1). Comentarios en HTML: descubre todos los puntos clave. CRONUTS.DIGITAL. https://cronuts.digital/es/secretos-comentarios-html-codigo-limpio/
¿Te gustó este artículo? ¡Califícalo!
Loading...
