Cómo añadir comentarios en HTML

| Última modificación: 15 de noviembre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

HTML, el lenguaje de marcado estándar para la creación de páginas web, proporciona una forma sencilla pero crucial de mejorar la legibilidad del código: los comentarios.

Los comentarios en HTML son anotaciones que los desarrolladores pueden agregarle al código fuente para explicar o aclarar secciones específicas. En este artículo, exploraremos cómo añadir comentarios en HTML y por qué son útiles.

añadir comentarios en html


Sintaxis de comentarios en HTML

Los comentarios en HTML se encapsulan entre <!-- y -->. Cualquier texto o código dentro de estos delimitadores no será interpretado ni mostrado en el navegador, pero será visible al inspeccionar el código fuente.

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

Usos comunes de comentarios en HTML

Descripción de secciones de código

<!-- Header de la Página -->
<header>
    <h1>Nombre de la Página</h1>
    <nav>
        <!-- Menú de Navegación -->
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>

Los comentarios pueden ayudar a dividir el código en secciones lógicas, facilitando la identificación y comprensión de diferentes partes de la página.

Desactivación temporal de código

<!-- 
    <div class="elemento-oculto">
        Contenido oculto temporalmente
    </div>
-->

Al comentar un bloque de código, se desactiva temporalmente su funcionalidad sin tener que eliminarlo por completo. Esto es útil para realizar pruebas o realizar ajustes sin afectar el código principal.

Explicación de decisiones de diseño

<!--
    Decidí usar un enfoque flexbox para el diseño
    debido a su capacidad para gestionar el espacio y
    la alineación de manera eficiente.
-->
<div class="contenedor-flexbox">
    <!-- Contenido aquí -->
</div>

Los comentarios son útiles para documentar las decisiones de diseño y proporcionar un contexto sobre por qué se eligió un enfoque particular.

Colaboración y comunicación

<!-- Revisado por: [Nombre del Revisor] el [Fecha] -->

Incluir información sobre revisiones y colaboradores en comentarios puede ser beneficioso para equipos de desarrollo que trabajan en conjunto.

Beneficios de comentar en HTML

  1. Legibilidad mejorada: Los comentarios hacen que el código sea más comprensible al proporcionar explicaciones y aclaraciones.
  2. Facilita la mantenibilidad: Al documentar el código, los desarrolladores futuros (o incluso tú mismo) podrán entender y mantener el código más fácilmente.
  3. Ahorra tiempo de depuración: Los comentarios claros pueden reducir el tiempo necesario para localizar y corregir errores.
  4. Colaboración eficiente: Los comentarios facilitan la comunicación entre miembros del equipo, especialmente en proyectos colaborativos.


En resumen, comentar en HTML es una práctica valiosa para mejorar la claridad y la eficiencia en el desarrollo web. Utilizarlos de manera reflexiva no solo beneficia a los desarrolladores actuales, sino que también sienta las bases para un mantenimiento futuro más fácil y una colaboración efectiva.

Ahora que sabes cómo añadir comentarios en HTML, ¿quieres seguir adquiriendo conocimientos en el área? Con nuestro Bootcamp Desarrollo Web podrás dominar esta y otras muchas herramientas y tecnologías imprescindibles en el mundillo, como JavaScript, React, microservicios y hasta despliegue de servidores. Te formarás con la guía de grandes expertos en el sector y aprenderás la teoría y la práctica necesarias para, en pocos meses, triunfar en el mercado laboral. ¡Apúntate ahora y transforma tu futuro!

Ramón Maldonado

Full Stack Developer y Responsable de Formación base en KeepCoding.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado