Comentarios html - HTML5 básico - Capítulo 3


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:

Etiquetas html

<!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.

Etiquetas html

<!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:

Etiquetas html

<!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>

Resultado en el navegador

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.

Página html básica

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:

Etiquetas html

<!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>

Resultado en el navegador

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 funcion de los comentarios multilínea. La otra sería escribir descripciones de más de una línea de la misma forma.

Página html básica

Ejercicios de html

  1. Escribe en una página html cualquiera un comentario de una sola línea con el texto que quieras.
  2. Escribe en una página html cualquiera un comentario de tres líneas con el texto que quieras.
  3. 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í.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, 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.