DROPCODING BLOG

Etiqueta Comment en HTML: Qué es y Cómo se usa (Ejemplo)

Hoy veremos una etiqueta que no tiene nombre, y no me refiero en el sentido figurado, sino literalmente, no tiene nombre.

Aunque sí es verdad que es conocida como la etiqueta «comment» o la etiqueta para comentar en HTML.

Como siempre, recuerda que esta lección pertenece al diccionario HTML del canal, donde encontrarás cualquier etiqueta de este lenguaje.

Recuerda que tienes los comentarios de abajo para dejar cualquier duda que tengas.

Qué son los comentarios en HTML

Muy bien, ¿qué son estos comentarios o esta etiqueta «comment» y para qué sirve?

Los comentarios en HTML son una manera de agregar, pues eso, comentarios o anotaciones en nuestro código HTML.

Estos comentarios no se ven en nuestra página web, es decir, no se reflejan en el navegador, sino que solo se ven dentro de nuestro código fuente, es decir, dentro de nuestro código HTML.

La broma que he hecho al principio, diciendo que esta etiqueta no tenía nombre, es porque realmente no tiene nombre.

Esta etiqueta simplemente para utilizarla debemos utilizar el signo de apertura con una exclamación y dos guiones, y luego para cerrar hacemos lo mismo con el cierre y dos guiones sin la exclamación.

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

Así que técnicamente no tiene nombre.

Cómo se utilizan los comentarios en HTML

Para que no sea un lío, vamos a ver un ejemplo en el editor.

Aquí tenemos una estructura de una pequeña página web y dentro de esta página web tenemos una serie de secciones. Lo que hemos hecho es marcar cada sección de la página.

<!-- Inicio del Banner -->
<div id="banner">
  <h1>Título</h1>
  <p>Un pequeño párrafo.</p>
</div>
<!-- Fin del Banner -->

<!-- Inicio del Menú de Navegación -->
<nav>
  <ul>
    <li>Inicio</li>
    <li>Contacto</li>
  </ul>
</nav>
<!-- Fin del Menú de Navegación -->

Por ejemplo, aquí tenemos una parte que se llama «banner», luego tenemos el menú de navegación, tenemos el inicio y el cierre.

Esto es bastante útil, sobre todo para trozos de código que son muy grandes o secciones de nuestra página web que son muy grandes.

Cómo se descomenta el código en HTML (en VSCode)

Ahora bien, seguro que estás preguntando ¿Hay alguna manera más rápida de descomentar?

Sí, la hay.

Os voy a mostrar cómo descomentar en Visual Studio Code, que es el editor que yo normalmente utilizo.

Si queremos descomentar esto rápidamente, simplemente tenemos que darle al atajo de «Alt+Mayus+A«. Así de fácil.

<!-- Para descomentar, selecciona este texto y presiona "Alt+Mayus+A" -->

Si lo quisiéramos volver a comentar, no hace falta que escribamos todo de nuevo, simplemente seleccionamos la parte que queramos comentar y apretamos el mismo atajo de botones, es decir, «Alt+Mayus+A«, y se comenta automáticamente.

<!-- Para comentar de nuevo, selecciona el texto y presiona "Alt+Mayus+A" -->

Ojo, esto es exclusivo para el lenguaje de HTML.

En fin, como ves, el uso de esta etiqueta no es nada complicado y nos puede servir, sobre todo si trabajamos con otras personas.

Bueno, hasta aquí la lección.

Espero que te haya sido útil y ya sabes que si tienes cualquier duda o tienes cualquier sugerencia puedes dejarla en los comentarios.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *