Cómo añadir comentarios en HTML

Del mismo modo que en otros lenguajes de programación puros, #html también utiliza comentarios dentro del código. Los comentarios HTML se definen como textos escritos en cualquier parte del código HTML del documento, los cuales no son tomados en cuen...
Publicado
Actualizado
Engagements 0 Comentario

Del mismo modo que en otros lenguajes de programación puros, html también utiliza comentarios dentro del código. Los comentarios HTML se definen como textos escritos en cualquier parte del código HTML del documento, los cuales no son tomados en cuenta por los navegadores y que, por lo tanto, no son visibles para los usuarios de la página web.

Los comentarios en HTML son bastante sencillos de agregar, y se construyen de la siguiente manera:

  • Se coloca La etiqueta <!--  para dar apertura a un comentario;
  • Y se coloca la etiqueta --> para cerrarlo.

Ejemplo:

<!-- Esto  es un comentario en HTML -->

Ahora bien, los comentarios no tienen por qué ser de una sola línea. Se podría dar el caso en que algún comentario se encuentre distribuido en varias líneas, y eso es posible siempre y cuando empiece y termine con las etiquetas de apertura y de cierre correspondientes.

Ejemplo:

<!--
        Esto es un 
        comentario HTML
        de varias líneas
        -->

De igual forma, en todo el proceso de codificación de una página web, a veces resulta necesario que el autor de dicha página, coloque una serie de comentarios indicando para que sirve cada parte del código, sobre todo cuando se está trabajando con páginas web complejas. Además, con el uso de comentarios, otras personas que observen el código, podrán saber para qué sirve cada trozo.

Ejemplo:

<!DOCTYPE html>
        <html>
               <head> 
                      <meta charset="utf-8"> <!-- codificación de caracteres utilizada -->
                      <title>Información adicional</title> <!-- título de la página -->
                      <link rel="stylesheet" href="css/estilos.css"> <!-- enlace a hoja de estilos -->
               </head>
               <body>	
                       <h2>Algunos beneficios de caminar</h2> <!-- titular h2-->
                                    <!-- inicio lista de beneficios -->
                       <ul>
                              <li>Ayuda a perder peso.</li> 
                              <li>Previene la aparición de diabetes.</li> 
                              <li>Aumenta los niveles de Vitamina D.</li> 
                       </ul> 
                       <!-- fin lista de beneficios -->
                       <a href="index.html">Volver al inicio</a> <!-- enlace a la pág. principal -->
               </body>
        </html>

Ver ejemplo en codepen

Finalmente, los comentarios HTML también pueden ser utilizados para desactivar algún trozo de código y hacer distintas pruebas, sin tener que borrarlo o añadirlo a cada momento.

Ejemplo:

<h2>Primer párrafo</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet </p>	
        <!-- 
        <h2>Segundo párrafo</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet </p>
        -->	
        <h2>Tercer párrafo</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet </p>

Ver ejemplo en codepen

Comentarios