¿Cómo se hacen comentarios en HTML?
Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

¿Cómo se hacen comentarios en HTML?

como-hacer-comentarios-html

¿Los comentarios de HTML dan para un post? ¿Lo merecen siendo tan fáciles de hacer? Yo creo que sí, y si no, me lo cuentas al final en los comentarios.

Quizá te resulte gracioso, pero cuando yo empecé a aprender HTML por mi cuenta (¡Hace más de13 años!) una de las cosas que más me liaban la cabeza eran los comentarios. Por aquel entonces yo era un joven estudiante de Arquitectura (sí, has leído bien) que nunca había visto temas de código más allá de ir a clases de informática en el colegio, cargar juegos desde MS-DOS o dibujar con el DrLogo, así que me fascinaba el concepto.

Por otro lado esta era una relación de amor/odio. Siempre me hacía un lío con dónde iba la dichosa admiración o cuántos guioncitos había que poner. Como diseñador, yo quería aprender a escribir el código de las webs que diseñaba ya que estaba hasta las narices de que Dreamweaver me cambiase todo de sitio a su antojo (ya ves, me gusta tener el control). Por cierto, si eres tan novato como era yo entonces, antes de nada te voy a hacer dos recomendaciones:

  1. Aprende bien HTML y CSS, o sea, huye de editores visuales (WYSIWYG). Métete de lleno en el código.
  2. Aprende con un buen curso. Aprenderás mejor y mucho antes que por tu cuenta. No tiene por qué ser nuestro curso si no quieres (uff, espero que JM Alarcón no me lea ¯\_(ツ)_/¯  ) pero búscate un buen curso.

Bueno y ahora a lo que íbamos.

¿Qué son los comentarios de HTML?

Los comentarios en HTML son unos trocitos de código que nos permiten introducir en nuestra página web contenidos que no se van a ver en el navegador. Si quieres verlos, vas a tener que meterte en el código fuente de la web (“botón derecho->ver código fuente" o algo similar, depende del navegador).

¿Y para que vale esto?

Pues para comentar el código, obviamente, y poner "Esto lo puse aquí por esto, y esto otro porque tal...". Puede parecer una tontería, pero, cuando meses después tengas que volver sobre el código de esa web te aseguro que lo vas a agradecer ya que te habrás olvidado de las razones de poner determinado código. Esto es especialmente importante en lenguajes de programación reales (al fin y al cabo, HTML no lo es). Todos los lenguajes de programación tienen una forma de introducir comentarios.

Los comentarios en HMTL comienzan con el símbolo de "menor que", una admiración y dos guiones, y terminan con dos guiones y el símbolo de "mayor que". O más sencillo: es una etiqueta HTML que empieza con una admiración y dos guiones y termina con dos guiones:

<!-- Esto es un comentario -->
<p>Esto es un párrafo HTML</p>
<!-- Esto es otro comentario -->

Lo podemos usar, por ejemplo, para destacar dónde empieza y acaba una sección del contenido:

<!-- Aquí empieza la cabecera de la web -->
<header>Aquí metemos el contenido de la cabecera de</header>
<!-- Fin de la cabecera -->

Este uso era más útil cuando, antes de HTML5, no existía una etiqueta semántica específica como header y se usaba un div genérico.

En CSS los comentarios empiezan con "/*" y terminan con "*/":

/* Esto es un comentario en CSS*/

Lo puedes usar para "desactivar" estilos temporalmente, ya sea una sola propiedad o la regla completa.

Si tenemos un div con la clase “cabecera”, no se le aplicará el margen de esta declaración, sino el que reciba en herencia:

.cabecera {
    color:red;
    /*margin:3em;*/
    padding:1em;
}

En este caso, ninguna de las propiedades declaradas para la clase “cabecera” se van a aplicar:

/*.cabecera {
    color:red;
    margin:3em;
    padding:1em;
}*/

Comentarios condicionales: un caso especial

En Internet Explorer desde la versión 5 hasta la versión 9 (en la 10 ya no funciona) se podían usar unos comentarios especiales que sólo interpretaba este navegador y que nos permitía discriminar entre diferentes versiones de una manera muy sencilla. Son los Comentarios Condicionales y funcionaban así:

<!--[if IE]>
  Esto sólo lo ve Internet Explorer
<![endif]-->
<!--[if !IE]>
  Esto no lo ve Internet Explorer pero los demás navegadores sí.
<![endif]-->
<!--[if IE 7]>
  Esto sólo lo ve Internet Explorer 7
<![endif]-->
<!--[if IE gt 8]>
  Esto sólo lo ven las versiones de Internet Explorer superiores a IE8
<![endif]-->
<!--[if IE lt 9]>
  Esto sólo lo ven las versiones de Internet Explorer inferiores a IE9
<![endif]-->
<!--[if IE gte 7]>
  Esto sólo lo ven las versiones de Internet Explorer iguales o superiores a IE7
<![endif]-->
<!--[if IE lte 9]>
  Esto sólo lo ven las versiones de Internet Explorer iguales o inferiores a IE9
<![endif]-->

Estos comentarios condicionales eran muy útiles en esa época porque IE no soportaba correctamente la mayoría los estándares web, fruto de la guerra entre navegadores de los años 90. A partir de las versiones 7 y 8 empezó a mejorar la cosa, pero antes, la única manera de maquetar sin tablas (sólo html y css) una web cross-browser era creando hojas de estilos específicas para IE que se enlazaban dentro de comentarios condicionales en función de la versión. Y algo similar ocurría con JavaScript y el manejo del DOM.

Desde la versión 10 de Internet Explorer, Microsoft dejó de soportar los comentarios condicionales para invitar a los desarrolladores  a sumarse a la práctica actual de discriminar por funcionalidades. Aquí es donde entran Modernizr y los Polifylls, pero ese ya es otro tema distinto.

Por cierto, si sueles maquetar emails en HTML, te gustará saber que también existen comentarios condicionales especiales para Outlook. Esto es muy útil, por ejemplo, a la hora de crear emails responsive, pero también es otra batalla en la que no me voy a meter para no desviarme. Simplemente que sepas que existen.

Otros usos creativos de los comentarios

Aparte de los usos obvios de los comentarios, hay quien los usa de una manera mucho más creativa.Me gusta especialmente el caso de Flickr, donde los usan para encontrar y captar candidatos para su equipo de desarrollo. En Flickr asumen, que, si alguien está echando un vistazo al código, como mínimo debe de tener un perfil bastante técnico, además de ser curioso. Y es que se aprende mucho viendo el código de otras páginas web:

oferta-empleo-comentarios-html

Y como veo que te están entrando ganas de hacer ASCII art con tu logo, te diré que puedes hacerlo en esta página. Si sólo se trata de texto, puedes usar este otro. Eso sí, no te olvides de pegarlo en el código dentro de un comentario, o se te desparramará todo por la pantalla del navegador.

Por otro lado, mucho ojo con lo que pones en los comentarios. Recuerda que el código fuente HTML de la web lo puede ver cualquiera desde el navegador. Y además, al final, todo se sabe. ;-)

Pablo Iglesias Pablo Iglesias es diseñador y responsable de Marketing en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web

Comentarios (6) -

Me parece bien como enseñan en este sitio

Responder

tpeliculas
tpeliculas

excelente inf

Responder

Hola, la verdad que yo soy de las personas que le han sacado provecho a los comentarios porque creo, que gracias a ellos y haciendo un buen uso de ellos, la página tanto para ti como para un futuro diseñador lo agradecerá mucho. Al margen de esto tengo unas dudas que me han surgido.
Como sabemos en javascript los comentarios se introducen con:
// una línea
/* Este es un
   comentario javascript de varias
   lineas */
En CSS:
/* una línea */
/* Este es un
   comentario CSS de varias
   lineas */
Y html pues como bien sale en el articulo.

Si Navegas un poco por google puedes ver como hay quien dice que los comentarios de HTML se pueden usar también en javascript. ¿Es esto cierto? He hecho algunas pruebas y si pones comentarios html en javascript la consola no da ningún error. Es verdad y que antes se hacia mucho envolver las instrucciones javascript para que los navegadores antiguos que no reconocen javascript no lo interpreten como texto. Es un comentario igual pero se le añade // al final. Por eso pienso que si, que, javascript acepta también los comentarios html.

Responder

Pablo Iglesias
Pablo Iglesias

Hola Isaac,

En JavaScript se admiten comentarios HTML siempre que terminen con:

// -->

Ya que de hecho la parte inicial de un comentario HTML (<!--) es JavaScript válido.

Lo que sí debes tener claro es que no sirven para comentar código JavaScript, que tienen su propia sintaxis  ( // ó /* */, según el caso ).

Como bien dices, esto se usaba mucho cuando no todos los navegadores soportaban JavaScript, pero no existe ningún motivo en la actualidad para usar semejantes comentarios. La práctica totalidad de navegadores soportan JavaScript, y en los pocos casos que no lo soportan (o que lo tienen deshabilitado) el navegador sabe que debe obviar el contenido dentro de la etiqueta <script>

Incluso en algún caso (como código JavaScript con operaciones de decremento) podría dar problemas, ya que la especificación de HTML no permite usar "--" dentro de comentarios HTML.

Saludos

Responder

hola, algunas cosas me tiene confundido:
- Ya que de hecho la parte inicial de un comentario HTML (<!--) es JavaScript válido.
-Incluso en algún caso (como código JavaScript con operaciones de decremento) podría dar problemas, ya que la especificación de HTML no permite usar "--" dentro de comentarios HTML.

¿ (<!--) es JavaScript válido?
¿la especificación de HTML no permite usar "--" dentro de comentarios HTML?

Responder

La última pregunta que te puse, si, ya vi que en la especificación la secuencia de caracteres '--' no se puede usar dentro de un comentario HTML.

No entiendo la frase en general, que quieres decirme con ella:
-Incluso en algún caso (como código JavaScript con operaciones de decremento) podría dar problemas, ya que la especificación de HTML no permite usar "--" dentro de comentarios HTML.

pd: es verdad que la consola a mí no me da ningún error al introducir comentarios HTML (en varios navegadores y versiones), pero también es verdad que JavaScript no contempla los comentarios HTML como comentarios JavaScript.

De todas formas todo esto es para despejar dudas ya que jamás he puesto un comentario HTML en JavaScript, solo hace muchos años para el tema de los navegadores antiguo y siempre poniéndole al final el cometario JavaScript(//).

Responder

Agregar comentario