Los comentarios se utilizan para añadir anotaciones sobre partes del código, tal y como se haría en cualquier otro lenguaje. Estas anotaciones son ignoradas por parte de los navegadores web. Los comentarios se pueden colocar en cualquier parte del documento HTML o página web.
Es habitual que los diseñadores web y los programadores añadan comentarios para indicar el principio y el final de secciones de un documento HTML. Esta práctica ayuda a hacer el documento más comprensible para otros diseñadores, y sirven para incluir explicaciones sobre la estructura del documento HTML en cuestión.
Los comentarios se introducen entre las etiquetas <!-- (de apertura) y --> (de cierre). Todo contenido que esté entre estas dos etiquetas HTML será ignorado por parte de los navegadores. Veamos un ejemplo de uso:
<!--<p>Texto comentado</p>-->
<p>Texto no comentado</p>
El resultado será el siguiente:
Texto no comentado
Tal como se puede observar en el ejemplo anterior, el ‘texto comentado’ es ignorado por el navegador web y no aparece. Cabe mencionar que aunque el comentario no se muestre en pantalla para los usuarios, sí que está presente en el código HTML del documento o página web. Por tanto, es muy importante recalcar que no se debe añadir información sensible o confidencial en los comentarios.
En el siguiente ejemplo se muestra como se usan los comentarios para explicar la estructura HTML o el contenido de las etiquetas del documento:
<!-- Menú -->
<ul>
<li>Inicio</li>
<li>Informática</li>
<li>Matemáticas</li>
</ul>
<!-- Fin del menú -->
<!-- Publicidad -->
<div>Nos gusta programar ♥</a></div>
<!-- Fin de la publicidad -->
Validación de comentarios
Los comentarios no se pueden anidar. Por lo tanto, no puede haber un comentario dentro de otro. Además, dentro de un comentario no deben aparecer los dos guiones --; si esto sucede, el navegador considera que se terminó el comentario en este punto, haciendo visible el resto de contenido hasta la etiqueta -->.
Múltiples líneas
La mayoría de los comentarios HTML están formados en una sola línea. Sin embargo, los comentarios pueden contener varias líneas entre las etiquetas de apertura y cierre. Esto es muy útil cuando se necesita hacer invisibles secciones enteras o grandes bloques de contenido. Por ejemplo, estos tres párrafos:
<!--
<p>Párrafo ignorado.</p>
<p>Este también está ignorado.</p>
<p>Y este también...</p>
-->
En el ejemplo de código anterior, los tres párrafos están comentados y serán ignorados por los navegadores web. Nuestro coloreado de sintaxis muestra las partes comentadas en color gris; así el código se entiende mucho mejor.
Comentarios condicionales
Los comentarios condicionales se utilizan para aplicar reglas y estilos diferentes en función del navegador web. Así se pueden hacer correcciones de errores de compatibilidad, de forma específica y sin afectar al resto de navegadores. Estos comentarios sólo funcionan en Internet Explorer (IE), el resto los ignoran.
Este tipo de comentarios son compatibles desde Internet Explorer 5 y permiten aplicar instrucciones condicionales a las diferentes versiones de IE. No obstante, el uso de Internet Explorer se está reduciendo cada vez más, y desde que Microsoft apostó por Edge, cada vez será menos necesario usar este tipo de condicionales.
Ejemplo de uso:
<!--[if IE 6]>
Condiciones especiales para IE 6
<![endif]-->
<!--[if IE 7]>
Condiciones especiales para IE 7
<![endif]-->
<!--[if IE 8]>
Condiciones especiales para IE 8
<![endif]-->
De esta forma se puede cargar hojas de estilo CSS específicas para mejorar la compatibilidad. Sin embargo, más pronto que tarde van a quedar en desuso, dependiendo del tiempo que tarden los usuarios en abandonar por completo el uso de IE y de la voluntad de cada desarrollador web en seguir dándole soporte.
Comentarios dentro de <script>
Si se usa el elemento <script> para insertar código JavaScript en la página web, se puede introducir comentarios de HTML y de JavaScript. Las dos formas son diferentes. Es recomendable usar el formato de comentarios de HTML para asegurar que funcionará en navegadores antiguos.
Los comentarios de HTML dentro de código JavaScript tienen la etiqueta de cierre un poco diferente, ya que empieza con dos barras diagonales. Por tanto, las etiquetas son <!-- (de apertura) y //--> (de cierre). Las dos barras diagonales se utilizan para evitar que JavaScript ejecute la línea.
En el caso de querer usar el formato de comentarios de JavaScript, es suficiente con introducir las dos barras diagonales (//) al principio de la línea, de esta manera no se ejecutará. También se puede introducir el comentario entre la apertura /* y el cierre */. Así es como quedaría:
<script>
/* Comentario de JavaScript */
// Otro comentario
function fibonacci(n) {
if (n < 2) {
return n;
} else {
return fibonacci(n-1) + fibonacci(n-2);
}
}
</script>
Comentarios dentro de <style>
Si por el contrario, se usa el elemento <style> para insertar código de hojas de estilo CSS en la página web, se puede introducir comentarios de la misma forma que en el caso anterior, es decir, usando las etiquetas <!-- (de apertura) y --> de cierre, con las dos barras diagonales.
De igual forma, se puede usar el formato de comentarios propio del CSS, que empieza con /* y termina con */. Por ejemplo:
<style>
/* Comentario de CSS */
.elemento {
color: blue;
}
</style>
