¿Qué son los comentarios de HTML?
Capítulo 3: Comentarios html
En este tercer capítulo vas a ver lo que son los comentarios, además de para que sirven y como usarlos correctamente.
Los comentarios en html sirven principalmente para dos cosas, para organizar tu página web o para anular partes sin eliminarlas.
Imagina una página muy larga con más de cinco mil líneas. ¿Encontrarías algo fácil?
La respuesta es depende. Depende de como esté organizada la página, si dejas ciertos espacios entre las etiquetas, si utilizas indentación (tabulaciones) y si la tienes bien comentada.
No voy a explicar estos temas aún, de momento nos centramos solo en los comentarios. Utiliza la siguiente página para empezar la práctica de este capítulo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página html</title>
</head>
<body>
<h1>Este es el título principal de mi primera página web.</h1>
<h2>Este es el subtítulo.</h2>
<p>Muy lejos, más allá de las montañas de palabras,
alejados de los países de las vocales y las consonantes,
viven los textos simulados. Viven aislados en casas de
letras, en la costa de la semántica, un gran océano de
lenguas. Un riachuelo llamado Pons fluye por su pueblo
y los abastece con las normas necesarias. Hablamos de un
país paraisomático en el que a uno le caen pedazos de frases
asadas en la boca. Ni siquiera los todopoderosos signos de
puntuación dominan a los textos simulados; una vida,
se puede decir, poco ortográfica.</p>
<p>Pero un buen día, una
pequeña línea de texto simulado, llamada Lorem Ipsum,
decidió aventurarse y salir al vasto mundo de la gramática.
El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
estaban llenas de comas malvadas, signos de interrogación
salvajes y puntos y coma traicioneros, pero el texto simulado
no se dejó atemorizar. Empacó sus siete versales, enfundó su
inicial en el cinturón y se puso en camino. Cuando ya había
escalado las primeras colinas de las montañas cursivas, se
dio media vuelta para dirigir su mirada por última vez, hacia
su ciudad natal Letralandia, el encabezamiento del pueblo
Alfabeto y el subtítulo de su...</p>
</body>
</html>Vamos a añadir algunos comentarios para organizar mejor esta página. Realmente no hace ni falta, ya que es tan corta y tiene tan pocas cosas aún que no hace ni falta. No obstante, lo haremos para practicar y a partir de este capítulo, te recomiendo que vayas utilizando todos los comentarios que quieras al crear cualquier cosa en html.
¿Cómo se escribe un comentario en html?
En html los comentarios se escriben con la apertura <!-- y el cierre -->. Entre estas dos etiquetas, puedes poner el texto que quieras explicando que hace una parte del documento o poner etiquetas para anularlas (ahora explicaré esto).
Todos los comentarios son ignorados por el navegador, de modo que puedes escribir lo que quieras y cuantos quieras.
En el siguiente ejemplo, he exagerado un poco el uso de los comentarios, pero es para que veas su finalidad. No hace falta que detalles tantas cosas, pero si lo quieres hacer, adelante.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--Este es el título de la página que se ve en el nombre de la pestaña del navegador -->
<title>Mi primera página html</title>
</head>
<!-- Aquí empieza lo que ve el usuario -->
<body>
<!--Estos son los títulos de la página -->
<h1>Este es el título principal de mi primera página web.</h1> <!-- Título -->
<h2>Este es el subtítulo.</h2> <!-- Subtítulo -->
<!-- A partir de aquí el contenido de la página -->
<p>Muy lejos, más allá de las montañas de palabras,
alejados de los países de las vocales y las consonantes,
viven los textos simulados. Viven aislados en casas de
letras, en la costa de la semántica, un gran océano de
lenguas. Un riachuelo llamado Pons fluye por su pueblo
y los abastece con las normas necesarias. Hablamos de un
país paraisomático en el que a uno le caen pedazos de frases
asadas en la boca. Ni siquiera los todopoderosos signos de
puntuación dominan a los textos simulados; una vida,
se puede decir, poco ortográfica.</p>
<p>Pero un buen día, una
pequeña línea de texto simulado, llamada Lorem Ipsum,
decidió aventurarse y salir al vasto mundo de la gramática.
El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
estaban llenas de comas malvadas, signos de interrogación
salvajes y puntos y coma traicioneros, pero el texto simulado
no se dejó atemorizar. Empacó sus siete versales, enfundó su
inicial en el cinturón y se puso en camino. Cuando ya había
escalado las primeras colinas de las montañas cursivas, se
dio media vuelta para dirigir su mirada por última vez, hacia
su ciudad natal Letralandia, el encabezamiento del pueblo
Alfabeto y el subtítulo de su...</p>
</body>
</html>Fíjate que todos los comentarios excepto los que ponen título y subtítulo, tienen su propia línea en la página. Esto es para que veas que se puede hacer, puedes hacer un comentario a la derecha o a la izquierda de la línea. El navegador ignora los espacios en blanco, por lo que la página que ves, el navegador la interpreta toda seguida, elemento tras elemento.
El resultado es el mismo, tanto si lo escribes así como de la otra forma. Seguro que ahora entiendes la importancia de colocar bien organizaditas las etiquetas con espacios, para que la página sea legible a nivel humano, ya que el navegador lo entiende, pero a una persona, una página con todas las etiquetas pegadas no es práctico.
Conclusión, el navegador ignora los comentarios y los espacios en blanco, da igual que por ejemplo entre dos etiquetas de párrafo haya quince saltos de línea pulsando la tecla ENTER de tu teclado, el navegador las va a ignorar, por lo que esto sigue funcionando igual que el primer ejemplo, el usuario no los va a ver.
Hagamos una prueba. Escribe 15 líneas en blanco entre los dos párrafos:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--Este es el título de la página que se ve en el nombre de la pestaña del navegador -->
<title>Mi primera página html</title>
</head>
<!-- Aquí empieza lo que ve el usuario -->
<body>
<!--Estos son los títulos de la página -->
<h1>Este es el título principal de mi primera página web.</h1> <!-- Título -->
<h2>Este es el subtítulo.</h2> <!-- Subtítulo -->
<!-- A partir de aquí el contenido de la página -->
<p>Muy lejos, más allá de las montañas de palabras,
alejados de los países de las vocales y las consonantes,
viven los textos simulados. Viven aislados en casas de
letras, en la costa de la semántica, un gran océano de
lenguas. Un riachuelo llamado Pons fluye por su pueblo
y los abastece con las normas necesarias. Hablamos de un
país paraisomático en el que a uno le caen pedazos de frases
asadas en la boca. Ni siquiera los todopoderosos signos de
puntuación dominan a los textos simulados; una vida,
se puede decir, poco ortográfica.</p>
<p>Pero un buen día, una
pequeña línea de texto simulado, llamada Lorem Ipsum,
decidió aventurarse y salir al vasto mundo de la gramática.
El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
estaban llenas de comas malvadas, signos de interrogación
salvajes y puntos y coma traicioneros, pero el texto simulado
no se dejó atemorizar. Empacó sus siete versales, enfundó su
inicial en el cinturón y se puso en camino. Cuando ya había
escalado las primeras colinas de las montañas cursivas, se
dio media vuelta para dirigir su mirada por última vez, hacia
su ciudad natal Letralandia, el encabezamiento del pueblo
Alfabeto y el subtítulo de su...</p>
</body>
</html>Pese a haber dejado quince líneas de espacio entre los párrafos, estas han sigo ignoradas y ha dejado el espacio por defecto que dejan los párrafos.
Comentario multilínea en html
La forma de usar los comentarios que has visto hasta ahora es la de una sola línea. Puedes ocupar varias líneas encapsulando con el comentario varias líneas de la siguiente forma:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página html</title>
</head>
<body>
<h1>Este es el título principal de mi primera página web.</h1>
<h2>Este es el subtítulo.</h2>
<!-- <p>Muy lejos, más allá de las montañas de palabras,
alejados de los países de las vocales y las consonantes,
viven los textos simulados. Viven aislados en casas de
letras, en la costa de la semántica, un gran océano de
lenguas. Un riachuelo llamado Pons fluye por su pueblo
y los abastece con las normas necesarias. Hablamos de un
país paraisomático en el que a uno le caen pedazos de frases
asadas en la boca. Ni siquiera los todopoderosos signos de
puntuación dominan a los textos simulados; una vida,
se puede decir, poco ortográfica.</p>
<p>Pero un buen día, una
pequeña línea de texto simulado, llamada Lorem Ipsum,
decidió aventurarse y salir al vasto mundo de la gramática.
El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
estaban llenas de comas malvadas, signos de interrogación
salvajes y puntos y coma traicioneros, pero el texto simulado
no se dejó atemorizar. Empacó sus siete versales, enfundó su
inicial en el cinturón y se puso en camino. Cuando ya había
escalado las primeras colinas de las montañas cursivas, se
dio media vuelta para dirigir su mirada por última vez, hacia
su ciudad natal Letralandia, el encabezamiento del pueblo
su ciudad natal Letralandia, el encabezamiento del pueblo
Alfabeto y el subtítulo de su...</p>
-->
</body>
</html>El texto ha desaparecido para el usuario ya que el navegador ignora todo lo comentado, no obstante, lo sigues conservando por si lo necesitas más adelante. Esa es la principal función de los comentarios multilínea. La otra sería escribir descripciones de más de una línea de la misma forma.
Ejercicios de html
- Escribe en una página html cualquiera un comentario de una sola línea con el texto que quieras.
- Escribe en una página html cualquiera un comentario de tres líneas con el texto que quieras.
- Escribe dos párrafos en una página html y anula el primero comentándolo.
La solución la encontrarás aquí: Haz click aquí.
Comentarios
Si te quedan dudas sobre el temario, sobre html, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
