Para qué sirven los comentarios HTML y cómo insertarlos

El lenguaje de marcado HTML es una de las tecnologías más importantes de internet, pues prácticamente todos los sitios web contienen código escrito en HTML.

A la hora de desarrollar una página web, el código puede volverse cada vez más complejo y difícil de leer e interpretar. Utilizar comentarios en HTML es una forma de facilitar la comprensión del código y conseguir que la resolución de problemas, la implementación de nuevo contenido o funciones, y las modificaciones se puedan realizar de una forma más rápida y sencilla, sin necesidad de perder tiempo buscando o interpretando para qué se utiliza cada línea de código.

Qué son los comentarios HTML y para qué sirven en programación

Los comentarios HTML son textos que se introducen en el código de una página y que no son ejecutados por el navegador web, ni son visibles para los usuarios que acceden a dicha página.

El objetivo de introducir comentarios en el código HTML es el de añadir explicaciones o referencias al código para ayudar a comprender lo que realizan. Gracias a estos comentarios cualquier desarrollador que acceda al código puede entender rápidamente para qué se utiliza un determinado código.

Es habitual que se confundan los comentarios HTML con las cajas de comentarios de HTML. Mientras que los comentarios HTML son textos aclaratorios e indicativos que se adjuntan al código para facilitar su comprensión, las cajas de comentarios son campos donde el usuario puede introducir texto y enviarlos a la web, por lo que normalmente se implementan dentro de formularios web. Para saber cómo poner una caja de comentarios en HTML es necesario disponer de conocimientos en el propio HTML y en JavaScript.

Los comentarios también se utilizan para desactivar un código concreto del HTML sin tener que eliminarlo permanentemente, para poder activarlo en el futuro. De esta manera se pueden probar cambios y solucionar problemas temporalmente de forma mucho más rápida y sencilla.

Cómo ver los comentarios HTML

Los comentarios HTML no se muestran en el navegador web cuando el usuario accede a la página. Para poder verlos es necesario utilizar una opción que los distintos navegadores proporcionan.

Por ejemplo, en Google Chrome, para ver el código HTML de la página y visualizar los comentarios hay que hacer clic en el botón derecho del ratón sobre la web y seleccionar la opción “Ver código fuente de la página”, o pulsar la combinación de teclas “CTRL + U”.

Cómo insertar comentarios en HTML

Veamos cómo poner comentarios en HTML paso a paso.

• Seleccionar el lugar donde se quiere añadir un comentario al código, por ejemplo, después de una línea.
• Antes de introducir el comentario, añadir los siguientes caracteres (dos guiones y el símbolo mayor que).

Todo el texto que se encuentre dentro de <!– –> será considerado como un comentario HTML y no será, ni ejecutado, ni mostrado en el navegador web cuando un usuario acceda a la página.

Ejemplos de comentarios en HTML

Un ejemplo de comentario HTML de una línea de código es el siguiente:

<img alt=”logoempresa” src=”logo.jpg”> <!– imagen del logotipo de la empresa –>

El comentario HTML de esta línea de código indica que ese es el código con el se muestra la imagen del logotipo de la empresa. Si se quisiera modificar los atributos de esa imagen o cambiarla por otra, es mucho más sencilla de localizar dentro de todo el código gracias a estos comentarios.

Para comentar una sección del código se podría utilizar los comentarios de la siguiente forma:

<!– Tabla de valores estadísticos de ventas –>

<table>

<tr>

<td>Producto</td>

<td>Ventas<//td>

</tr>

<tr>

<td>iPhone</td>

<td>10.000<//td>

</tr>

<tr>

<td>Note 10</td>

<td>7.500<//td>

</tr>

</table>

Para localizar la tabla estadística de ventas que se muestra en la web solo es necesario localizar el comentario HTML que se introduce antes de la misma. Así será más fácil poder editar la tabla para añadir nuevos datos o modificar su contenido.

También es habitual utilizar los comentarios para indicar las distintas partes de la estructura de una web.

<!– Inicio de la cabecera de la web –>

<header>

código de la cabecera

</header>

<!– Fin del BODY –> 

<!– Inicio del cuerpo de la web –>

<body>

código del cuerpo de la página

</body>

<!– Fin del BODY –>

Cómo insertar comentarios en CSS

En el lenguaje de estilos CSS los comentarios se introducen de forma similar a HTML, pero utilizando unos caracteres diferentes: /* para comenzar los comentarios y */ para cerrarlos.

Veamos un ejemplo:

 /*Configuración de cabecera*/

.cabecera {

color:red;

margin:3em;

padding:1em;

}

Hemos visto cómo hacer comentarios en HTML para disponer de un código más sencillo de interpretar que acelere cualquier proceso de cambio o de corrección de errores. Se trata de un elemento muy útil para analizar el código de una web y comprender para qué sirve cada etiqueta o trozo de código.