¿Los comentarios de HTML dan para un post? ¿Lo merecen siendo tan triviales y fáciles de hacer? Obviamente no dan para un curso de los nuestros, pero para un post 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 (¡a principios de siglo!) 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:
- Aprende bien HTML y CSS, o sea, huye de editores visuales (WYSIWYG). Métete de lleno en el código.
- 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 (desde la 10 dejó de funcionar) 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, una buena práctica al maquetar (especialmente para webs responsive). Aquí es donde entran las feature queries, Modernizr y los Polifylls, pero ese ya es otro tema distinto.
Nota: Si quieres aprender a maquetar bien webs responsive, ahora sí que te voy a recomendar (con la mano en el corazón) nuestro curso online de maquetación web responsive.
Por cierto, si también 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.
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:
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. ;-)
Fecha de publicación: