Ejercicio práctico 14: Comentarios en HTML
Aprende a utilizar comentarios en HTML para documentar tu código, facilitar su mantenimiento y mejorar la colaboración entre desarrolladores. Ejercicio práctico ideal para principiantes.
Actividad
Añade comentarios en un documento HTML.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Comentarios</title>
</head>
<body>
<!-- Este es un comentario en HTML -->
<p>Este párrafo está visible.</p>
<!-- <p>Este párrafo está comentado y no se verá.</p> -->
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Documentar secciones del código
A medida que tu HTML crece, los comentarios ayudan a que otros desarrolladores (o vos mismo en el futuro) entiendan la estructura del documento rápidamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Sitio Documentado</title>
<!-- Metaetiquetas SEO para redes sociales -->
<meta property="og:title" content="Mi Sitio Web" />
<meta property="og:description" content="Aprendiendo HTML con ejercicios prácticos." />
<!-- Hoja de estilos principal -->
<link rel="stylesheet" href="css/estilos.css" />
</head>
<body>
<!-- ==================== ENCABEZADO ==================== -->
<header>
<h1>Mi Sitio Web</h1>
<nav>
<!-- Menú de navegación principal -->
<a href="/">Inicio</a>
<a href="/servicios">Servicios</a>
<a href="/contacto">Contacto</a>
</nav>
</header>
<!-- ==================== CONTENIDO PRINCIPAL ==================== -->
<main>
<section>
<!-- Sección de introducción -->
<h2>Bienvenidos</h2>
<p>Este es un sitio de ejemplo para practicar HTML.</p>
</section>
<section>
<!-- Sección de características - pendiente de completar -->
<h2>Características</h2>
<p>Proximamente...</p>
</section>
</main>
<!-- ==================== PIE DE PÁGINA ==================== -->
<footer>
<!-- Información de copyright y enlaces legales -->
<p>© 2026 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Los comentarios de sección (con ====) funcionan como marcadores visuales. Son especialmente útiles en archivos HTML largos donde necesitás identificar bloques rápidamente al hacer scroll.
Variante 2: Comentarios multilínea para decisiones de diseño
A veces necesitás explicar por qué tomaste cierta decisión técnica. Los comentarios multilínea son ideales para este tipo de documentación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Decisiones de Diseño</title>
<!--
Usamos un CSS inline en lugar de un archivo externo
para este prototipo. Cuando pasemos a producción,
moveremos estos estilos a estilos.css.
Decisión tomada: 10/06/2026 por el equipo de frontend.
-->
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #fafafa;
}
.alerta {
padding: 15px;
border-left: 4px solid #ff9800;
background: #fff3e0;
}
</style>
</head>
<body>
<!--
TODO: Reemplazar el contenido de ejemplo con datos reales
cuando el equipo de contenido entregue las copys finales.
Fecha límite estimada: 17/06/2026.
-->
<div class="alerta">
<strong>⚠️ Aviso:</strong> Esta página está en construcción.
</div>
<h1>Prototipo de Landing Page</h1>
<p>
Este es el contenido de ejemplo que será reemplazado durante
la fase de implementación final del proyecto.
</p>
<!--
Sección de testimonios comentada temporalmente.
No eliminamos el código porque lo vamos a necesitar
en la próxima iteración (Sprint 3).
-->
<!--
<section class="testimonios">
<h2>Lo que dicen nuestros clientes</h2>
<blockquote>
<p>Excelente servicio, muy recomendable.</p>
<cite>— Juan Pérez</cite>
</blockquote>
</section>
-->
</body>
</html>
Buenas prácticas en comentarios de decisión:
- Incluí la fecha y el autor de cada decisión importante
- Usá
TODOpara marcar tareas pendientes (muchos editores los resaltan automáticamente) - Al comentar código temporalmente, explicá por qué y cuándo se va a restaurar
Variante 3: Comentarios para debugging
Una de las técnicas más comunes durante el desarrollo es comentar y descomentar código para identificar problemas. Esto se conoce como "debugging por aislamiento".
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Debugging con Comentarios</title>
</head>
<body>
<h1>Página de Prueba</h1>
<!-- El párrafo 1 funciona correctamente -->
<p>Este es el párrafo 1. Se ve sin problemas.</p>
<!-- El párrafo 2 está comentado para probar si causa conflicto -->
<!-- <p>Este es el párrafo 2. Comentado para debugging.</p> -->
<!--
El párrafo 3 se desactivó porque el enlace a Google
estaba causando un error de CORS en el entorno de desarrollo.
Se restaurará cuando configuremos el proxy.
-->
<!--
<p>
Buscá más información en
<a href="https://www.google.com" target="_blank">Google</a>
</p>
-->
<p>Este es el párrafo 4. Funciona perfectamente.</p>
<!-- Fin de la página de prueba -->
</body>
</html>
Esta técnica te permite aislar secciones problemáticas sin borrar código. Si al comentar un bloque el problema desaparece, encontraste al culpable.
Variante 4: Comentarios condicionales para navegadores (histórico)
Antes de la estandarización de HTML5, se usaban comentarios condicionales de Internet Explorer para cargar código específico según la versión del navegador. Aunque hoy no se usan, es importante conocerlos si trabajás con sitios legacy (antiguos).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Compatibilidad Legacy</title>
<!-- Hoja de estilos para navegadores modernos -->
<link rel="stylesheet" href="css/moderno.css" />
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css" />
<![endif]-->
<!--[if lt IE 9]>
<p class="alerta-antigua">
Estás usando un navegador desactualizado.
<a href="https://browsehappy.com">Actualizalo acá</a>.
</p>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Sitio Web</h1>
<p>
Los comentarios condicionales solo eran interpretados por
Internet Explorer 9 e inferior. Los navegadores modernos
los tratan como comentarios normales (los ignoran).
</p>
</body>
</html>
Nota importante: Los comentarios condicionales dejaron de funcionar en Internet Explorer 10 en adelante. Hoy el enfoque recomendado es usar feature detection con JavaScript (Modernizr o @supports en CSS) y definir una estrategia mobile-first con meta viewport.
Buenas y Malas Prácticas
| ✅ Buena práctica | ❌ Mala práctica |
|---|---|
Documentar secciones del código (<!-- header -->) | Dejar código comentado sin explicación durante meses |
Usar TODO para marcar tareas pendientes con fecha | Comentar información sensible (claves, tokens, URLs privadas) |
| Explicar decisiones técnicas complejas en comentarios | Comentar en exceso código que ya es auto-explicativo |
| Comentar bloques temporalmente para debugging | Entregar código a producción con bloques comentados de debugging |
Usar comentarios de sección (====) en archivos largos | Anidar comentarios (<!-- <!-- --> -->) — no funciona, el primer --> cierra todo |
| Eliminar código innecesario en vez de comentarlo | Usar comentarios condicionales de IE en proyectos nuevos |
Preguntas Frecuentes (FAQ)
¿Los comentarios en HTML afectan el rendimiento de la página?
Mínimamente. Los comentarios aumentan el tamaño del archivo HTML (unos pocos bytes cada uno). En sitios con miles de comentarios podría notarse una diferencia marginal en el tiempo de descarga, pero en la práctica no es un problema. El navegador los ignora al renderizar, así que no afectan la velocidad de visualización.
¿Se pueden ver los comentarios desde el navegador?
Sí. Cualquier persona puede ver los comentarios de tu HTML inspeccionando el código fuente (Ctrl+U o clic derecho → Ver código fuente). Nunca incluyas información sensible como contraseñas, tokens de API, nombres de tablas de base de datos, direcciones IP internas o lógica de negocio confidencial en los comentarios.
¿Puedo anidar comentarios en HTML?
No. HTML no soporta comentarios anidados. El primer --> que aparece después de <!-- cierra el comentario, sin importar cuántos <!-- adicionales haya. Si necesitás "comentar un comentario", tendrás que eliminar o modificar el comentario original.
¿Debería comentar mi código HTML si uso Git?
Sí, pero con diferente propósito. Git registra el historial de cambios (quién, cuándo y por qué se modificó algo). Los comentarios en el código documentan el estado actual (qué hace esta sección, por qué se tomó esta decisión). Son complementarios: el commit message explica el cambio, el comentario explica el código resultante.
💡 Los comentarios son una herramienta de comunicación entre desarrolladores (incluyendo a tu yo del futuro). Un buen comentario no dice qué hace el código (eso ya lo dice el HTML), sino por qué lo hace de esa manera. Aprendé más sobre buenas prácticas en Estructura básica de un documento HTML.