Al igual que los comentarios CSS, agregar comentarios a HTML puede ayudarlo a escribir y limpiar el backend de un sitio web.
Puede agregar comentarios que expliquen su código, lo que facilita la edición en el futuro o la colaboración con otros desarrolladores. También puede usar comentarios para simplificar sus esfuerzos de depuración.
Echemos un vistazo más de cerca a lo que es un comentario en HTML y luego definamos qué significa un «comentario» HTML.
¿Qué es un comentario en HTML?
En HTML, un comentario es texto contenido dentro de etiquetas. < !╌ ╌>. Esta sintaxis le dice al navegador que estos son comentarios y no deben mostrarse en la interfaz de usuario.
Con la etiqueta de comentario, puede dejar notas para recordar dónde dejó el proceso de creación. Puede explicar la funcionalidad prevista de la sección de código, ya sea por el bien de otro desarrollador o de su futura persona.
También puede comunicarse con otros desarrolladores que trabajan en el mismo código simultáneamente. Puede dejar una advertencia para que ejecuten una determinada función solo por la noche, ya que lleva mucho tiempo ejecutarla. También puedes asignarles una tarea o indicar el error con un comentario.
En resumen, los comentarios HTML pueden ayudarlo a trabajar de manera más inteligente y mejor al crear, depurar o rediseñar su sitio. Aquí hay un video que puede hacer eso con más detalle.
Ahora veamos un ejemplo.
Ejemplo de comentario HTML
Suponga que está creando un sitio Bootstrap con un equipo de desarrollo. Desea dejar una nota recordándoles que todos los botones de Bootstrap deben usar la clase de modificador base para que todos tengan el mismo color.
Este es el aspecto que podría tener su código HTML, así como el resultado en la interfaz:
ver la pluma xxgWwoa de Christina Perricone (@hubspot) en CódigoPen.
Como se ve arriba, el comentario se ha ocultado con éxito desde el frente.
Ahora que entendemos cómo comentar en HTML, echemos un vistazo a cómo comentar.
Cómo comentar en HTML
Para «comentar» en HTML, simplemente agregue etiquetas < !╌ ╌> alrededor del código que desea ocultar. Estas etiquetas le dicen a los navegadores que no presenten este código en la interfaz de usuario.
Comentar tiene dos objetivos principales. Uno de ellos es la depuración de código. Cuando se detecta un error, puede comentar las primeras líneas de código, ver si el error aún existe y repetir el proceso hasta que se aísle el código de error.
El segundo objetivo es para el historial de versiones. Dado que comentar significa que el código permanecerá visible en el backend, esta puede ser una forma de mostrar diferentes iteraciones de la base de código para los nuevos desarrolladores que acaban de unirse o heredar un proyecto web.
Veamos un ejemplo. Supongamos que estoy creando una página en Bootstrap: tengo una barra de navegación, un encabezado, un párrafo y un botón.
Aquí está el código HTML y la apariencia de la página en la interfaz:
ver la pluma Página de Bootstrap con barra de navegación y botón de Christina Perricone (@hubspot) en CódigoPen.
Tal vez miro mi trabajo y descubro que hay un error. En ese caso, puedo comentar cada elemento para aislar qué sección del código tiene el error.
O tal vez estoy haciendo una prueba A / B y descubro que no se puede hacer clic en el botón y quiero eliminarlo. En ese caso, podría comentarlo dejando una nota de que el botón CTA en la parte inferior de la página no estaba convirtiendo. Luego, la próxima persona que aparezca e intente optimizar la tasa de conversión de la página sabrá que debe comenzar con una ubicación de botón diferente.
Código comentado
Para «comentar» un botón, o cualquier elemento HTML, simplemente etiquete el elemento< !╌ ╌>. Cualquier cosa entre estas etiquetas no será visible en la interfaz.
<!--Button wasn’t converting so removed in July <button class="btn btn-primary" type="submit">Button</button>-->
El resto del código seguirá siendo el mismo. Todo en el frente también se verá igual, excepto el botón. Puedes verlo por ti mismo a continuación.
ver la pluma yLgKeYz de Christina Perricone (@hubspot) en CódigoPen.
Dejar comentarios en el código HTML
Los comentarios son otra forma de «hablar» con las personas en su código. Puedes agregar notas explicativas para otros colaboradores en tu proyecto web, o dejar notas para recordarte volver a la sección o priorizarla durante el próximo rediseño. ¿La mejor parte? Los comentarios no aparecerán en la interfaz del sitio web y son fáciles de aprender incluso si recién está comenzando a aprender HTML y CSS.
