¿Conoces los comentarios HTML en el mundo de la programación? Esta opción es muy útil para el desarrollo de tareas entre los equipos de programación. Esta sección de código cumple una función específica que resulta imprescindible para la comprensión de todo el conjunto.

HTML es el lenguaje estándar para la programación de páginas web y los comentarios forman parte de él. En el Curso de Programación web front end podrás aprender sobre él y convertirte en un samurái de los comentarios.

¿Qué son los comentarios en HTML y para qué sirven?

Empecemos por el principio, el término de comentarios en HTML en el código fuente de un sitio web hace referencia a anotaciones que el programador deja en el código, pero que no pueden ser vistas por el usuario.

Existen diversos motivos por los que dejar este tipo de anotaciones, estos son los más habituales:

• Descripción del código: se emplean para marcar o seccionar las diferentes secciones del código web.
• Ocultación temporal de elementos: al introducir una sección del código como un comentario se oculta al usuario, pero se mantienen escrita para su recuperación. Esta técnica se emplea para realizar pruebas o dejar preparado un contenido para su visualización más adelante.
• Justificación: permite explicar el motivo de una elección concreta en el diseño o la programación.
• Trabajo colaborativo: durante el desarrollo es común dejar indicaciones para los compañeros a través de los comentarios. También se emplea a posteriori para determinar una forma de uso de una sección o web completa.
• Depurar el código: cuando se detectan errores en un código se emplean los comentarios para lograr identificarlos y deshacerlos. Es importante para detectar la falla y eliminarla.

Cómo y dónde añadir comentarios en tu código HTML

Saber cómo añadirlos es el siguiente paso, para ello se emplea una codificación específica. Para escribir un comentario HTML hay que seguir los siguientes pasos:

1. Decidir el punto en el que vas a insertar la anotación.
2. Abrir el etiquetado usando los siguientes símbolos: <!--
3. Escribir el comentario que necesitas usando las líneas que precises.
4. Cerrar la etiqueta con la siguiente simbología: -->

Para visualizarlo nada mejor que un ejemplo, como este que puedes ver a continuación.

El lugar concreto en el que colocar tu comentario depende del objetivo que persigas. En aquellos casos en los que buscas aclarar una sección específica, ponlo en la parte superior. Si es para un comentario genérico del sitio, sitúalo en la parte superior.

Define el uso que vas a darle y piensa dónde te gustaría leerlo para insertarlo.

Buenas prácticas al usar comentarios en HTML

Al emplear estos comentarios es imprescindible seguir un manual de buenas prácticas. No se puede llenar un código de comentarios, ya que, provoca que sea más complejo e ilegible. Estas son algunas recomendaciones que debes seguir:

• Son concisos: usa las mínimas palabras posibles para no crear saturación ni al lector ni al navegador.
• Aportan utilidad: no dejes comentarios banales, siempre deben aportar algo a quien los lea.
• Redirigen a la fuente: si recurres a un código en línea aprovecha los comentarios para dejar la fuente.
• Código nuevo y antiguo: úsalo con independencia de la antigüedad del código.
• Aportar aclaración: responde a preguntas que le surjan a un tercero cuando lea el código.

Comentarios en HTML y su impacto en el SEO

Todo el código presente en una web es leído por el buscador, aunque no sea visible en el navegador. Esto significa que computa a la hora de lograr un buen posicionamiento en los resultados. Estos son los motivos que te afectarán negativamente:

• Código complejo: si hay comentarios excesivos la lectura del código se vuelve compleja pesando demasiado. Este hecho es penalizado en SEO.
• Información errónea: si el comentario aporta información incompleta, errónea o desactualizada, el motor de búsqueda lo detectará y bajará el posicionamiento de la web.

Para garantizar un correcto uso de los comentarios a nivel de SEO es importante que se empleen exclusivamente para explicar secciones complejas e incluir información clave, además, debes ser breves. Por último, puedes emplear un validador de código HTML para asegurarte de que no aparecen problemas.

Herramientas y consejos para la gestión de comentarios en proyectos grandes

En proyectos de gran envergadura el uso de comentarios HTML es muy frecuente. Es importante prestar atención a todos ellos y no dejar que se pierdan a lo largo de todo el código. Para conseguirlo se emplean diversas herramientas.

Algunas de las más comunes son los editores de código que ya incluyen secciones específicas para dejar comentarios y poder acceder a ellos con rapidez:

• Visual Studio Code: cuenta con soporte y extensiones para gestionar los comentarios.
• Sublime Text: dispone de herramientas específicas para los comentarios colaborativos.
• Atom: la interfaz es personalizable, así que, puedes darle más peso a la zona destinada a los comentarios.
• Airtable: en este caso es una herramienta de gestión de proyectos con una extensión para organizar comentarios HTML.

Junto a estas herramientas de edición aparecen otras que son perfectas para limpiar y validar el código. Una vez concluido el desarrollo de la página web se utilizan para eliminar los restos y los comentarios de manera automática como HTML Comment Cleaner o HTML Tidy.

¡Programa en HTML gracias a Tokio School!

¿Quieres aprender a programar en HTML? En Tokio School contamos con un curso específico en el que descubrir los lenguajes de programación. Complementa HTML5 con CSS3 y JavaScript para convertirte en un samurái del Front End.

¡No lo pienses más y rellena el formulario para solicitar más información! Te estamos esperando para que amplies tus habilidades digitales.