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 5000 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 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 va a interpretar así:

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>

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 15 saltos de línea pulsando la tecla intro 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.

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

5- Escribe en una página html cualquiera un comentario de una sola línea con el texto que quieras.

6- Escribe en una página html cualquiera un comentario de tres líneas con el texto que quieras.

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