Un comentario en HTML comienza con <!-- y se cierra con --> .Los comentarios HTML son visibles para cualquiera que vea el código fuente de la página, pero no se renderizan y no se ven cuando el documento HTML es renderizado por un navegador.

Por lo tanto todo lo que va en medio, o entre la apertura y el cierre de estos caracteres o etiquetas que te indico será el comentario HTML.

Puedes añadir comentarios a tu código HTML utilizando la siguiente sintaxis:

<!– Escribe tu comentarios aquí –>

Acuérdate que hay un signo de exclamación (!) en la etiqueta de apertura, pero no en la etiqueta de cierre.

Nota: El navegador no va a mostrar estos comentarios, pero te pueden ayudar a documentar el código fuente HTML.

Ejemplos y ejercicios prácticos

En estos comentarios puedes colocar notificaciones y recordatorios en su HTML:

Ejemplo:

<!– Esto es un comentario(esto NO se vera) –>

<p>Esto es un párrafo.(esto SI se vera)</p>

<!– No olvide añadir más información aquí –>

Veamos lo que ha aprendido, prueba estos ejercicios con HTML:

chica manejando código

Definición y uso

Los comentarios HTML se colocan entre <!– …–> (Etiquetas). Por lo tanto, cualquier contenido colocado entre <!– … –> las etiquetas será tratado como comentario y serán completamente ignorados por el navegador.

Las etiquetas de comentarios se utilizan para insertar comentarios en el código fuente HTML (esto quiere decir que este elemento se utiliza para añadir un comentario a un documento HTML).

Puedes usar estos comentarios para explicar-comentar-recordar acciones en tu código, lo que te puede servir de mucha ayuda cuando edites el código fuente en una fecha posterior. Esto es especialmente útil si tienes mucho código.

También se suele utilizar bastante para excluir algunas partes del documento a la hora de hacer pruebas si no queremos que se rendericen o se vean en un navegador.

Fíjate en este caso cómo se bloqueo parte del código:
<p>The modification process is rather simple...</p>
<!--
<p>To modify the configuration you should:</p> <ol> <li>Locate and open the configuration file in your favorite text editor.</li> <li>Find the parameter you want to modify and replace the value on the right by the new value.</li> </ol>
-->
Lo que se ve tras renderizar el documento:
The modification process is rather simple…

Comentarios HTML multilínea

Los comentarios de bloque HTML o los comentarios multilínea HTML le permiten comentar un código complejo o largo. Funciona como una etiqueta de comentario HTML normal, pero puede tomar varias líneas para explicar una parte más grande del código, donde un comentario de una sola línea no seriá suficiente.

<!–

línea de comentario1
línea de comentario2
línea de comentarios3

–>

Esta etiqueta de comentario funciona de forma similar al elemento que se utiliza para citar un texto más grande.

Los comentarios multilínea en HTML también pueden desactivar un bloque de código. Todo lo que tienes que hacer es incluir una etiqueta de apertura y cierre alrededor del código que desea desactivar.

Comentarios html válidos y no válidos

Los comentarios en html no se anidan, lo que significa que un comentario no se puede poner dentro de otro comentario. En segundo lugar, la secuencia de doble guion “–” puede no aparecer dentro de un comentario, excepto como parte de la etiqueta –> de cierre. También debe asegurarse de que no hay espacios en la cadena de inicio de comentario.

Ejemplo: Aquí, el comentario dado es un comentario válido y será borrado por el navegador.

<!DOCTYPE html>
<html>

<head>
<title>Valid Comment Example</title>
</head>

<body>
<!– This is valid comment –>
<p>Document content goes here…..</p>
</body>

</html>


Pero se renderizará esto:

Document content goes here…..

Pero, la siguiente línea no será un comentario válido y será mostrado por el navegador. Esto se debe a que hay un espacio entre la etiqueta del lado izquierdo y el signo de exclamación.

<!DOCTYPE html>

<html>

<head>

<title>Invalid Comment Example</title> </head>

<body>

< !– This is not a valid comment –>

<p>Document content goes here…..</p> </body>

</html>


Y por tanto se vera esto:

< !– This is not a valid comment –>

Document content goes here…..

HTML5

A la hora de utilizar estos comentarios, da igual si utilizamos HTML 4.01 o HTML5, porque no hay apenas diferencias entre ellos. Prácticamente NINGUNA.

Lo único que debes cuidar es de no usar la etiqueta ….

.. La etiqueta <comment> porque está obsoleta en HTML5. No utilice este elemento.

Hay pocos navegadores que lo soporten para comentar una parte del código HTML.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

Si está usando IE, entonces producirá el siguiente resultado:

This is Internet Explorer.

Pero si no estás usando IE, entonces producirá este otro resultado:

This is not Internet Explorer.

Esto solo funciona en las versiones inferiores a IE 10. Apartir de la version 10 Microsoft dejó de soportar estos comentarios condicionales.

Usos decorativos de los comentarios HTML

Después de todo lo que acabamos de ver, también vamos a agregar el uso creativo y decorativo de los comentarios formando figuras o logos en el código de algunos sitios o algunos programas.

Si quieres ver un buen ejemplo echa un vistazo al código fuente de flickr, que encima le dan un uso, para captar candidatos dejando una url especial y un mensaje; dejare que tu mismo lo averigues.

Si crees que estas figuras se hacen a mano, estas totalmente equivocado, es un proceso automatizado en el que tu también puedes crear tu imagen, logo corporativo o lo que te plazca y pegarlo en tu código fuente para la diversión y asombro de los mirones.

Aquí tienes 2 sitios para crearlos, uno es para crearlo a través de una imagen y el otro con un texto, que puede ser por ejemplo el nombre de tu sitio o tal vez la url.

Y recuerda que es muy importante pegarlo solo dentro de un comentario HTML valido, porque si te equivocas la puedes fastidiar jodiendo tu código. Recuerda también que cualquier cosa que pongas aquí será visible para todo el mundo que indague en tu código, asi que cuida mucho lo que quieres que otros vean de ti y de tu web.

Consejos y notas

También puede utilizar la etiqueta de comentario para “ocultar” algunos scripts de navegadores sin soporte para scripts (para que no se muestren como texto plano):

<script type=”text/javascript”>
<!–
function displayMsg() {
  alert(“Hello World!”)
}
//–>
</script> 

Nota: Las dos barras oblicuas al final de la línea de comentario (//) son el símbolo de comentario de JavaScript. Esto evita que JavaScript ejecute la etiqueta –>.

Nota: Aunque en las etiquetas de comentario observéis una sola raya continua, en realidad son 2 rayas para que el comentario HTML os pueda funcionar correctamente.

ÚLTIMAS ENTRADAS