Modulo 1: Comentarios en HTML
Ya hemos hablado de elementos, atributos y cómo estructurar una página, pero ahora vamos a profundizar en algo super útil: ¡el poder de los comentarios HTML!. Son como notas secretas que dejas en tu código, y aunque no se ven en la página web, te pueden salvar la vida (o al menos la cordura) mientras trabajas. Vamos a verlo con más detalle y ejemplos para que le saques todo el jugo.
¿Qué son los comentarios en HTML?
Los comentarios son pequeños textos que puedes agregar en tu código HTML, pero los navegadores los ignoran al mostrar la página. No afectan cómo se ve tu web; son solo para ti o para quien lea tu código después. Piensa en ellos como post-its que dejas pegados en un libro: te ayudan a recordar cosas o a explicarle algo a alguien más.
¿Cómo se escriben?
Los comentarios en HTML usan esta estructura:
<!-- Esto es un comentario -->
- Empiezan con
<!--. - Terminan con
-->(dos guiones y el signo de mayor). - Todo lo que esté entre esos símbolos no aparecerá en la pantalla.
<!-- Sección principal de la página -->
<section>
<h1>Bienvenidos</h1>
<p>Este es el contenido principal.</p>
</section>
2. Dejar notas para otros
Si trabajas en equipo, los comentarios son como mensajes para tus compañeros. Así todos entienden qué hiciste.
```html <!-- Juan: Aquí puse el enlace al formulario, no lo muevas --> <a href="formulario.html">Rellena esto</a>
3. Marcar tareas pendientes
¿Tienes algo que terminar después? Usa un comentario para no olvidarlo.
<!-- TODO: Añadir una imagen de fondo aquí -->
<div>
<p>Contenido provisional.</p>
</div>
4. «Apagar» código temporalmente
Si quieres probar algo sin borrar código, lo comentas para que no se ejecute. Luego lo descomentas cuando lo necesites.
<p>Este texto se ve.</p> <!-- <p>Este texto está "apagado" por ahora.</p> -->
5. Separar secciones grandes
En archivos largos, los comentarios actúan como divisores para que no te pierdas.
<!-- Inicio del encabezado -->
<header>
<h1>Mi Sitio</h1>
</header>
<!-- Contenido principal -->
<main>
<p>Bienvenidos a mi web.</p>
</main>
<!-- Pie de página -->
<footer>
<p>© 2025</p>
</footer>
Comentarios de varias líneas
Los comentarios no tienen que ser cortitos. Puedes escribirlos en varias líneas si necesitas explicar algo más largo o detallado. El navegador sigue ignorándolos igual.
<!--
Este es un comentario largo.
Aquí explico que esta sección es para mostrar productos.
Todavía falta agregar los precios y las imágenes.
-->
<section>
<h2>Productos</h2>
<p>Lista coming soon...</p>
</section>
Ejemplo práctico completo
Vamos a armar una página sencilla con comentarios para que veas cómo se usan en la vida real:
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Configuración básica del documento -->
<meta charset="UTF-8">
<title>Mi Tienda Online</title>
</head>
<body>
<!-- Cabecera con el título y un enlace -->
<header>
<h1>Tienda de Juan</h1>
<p><a href="contacto.html">Contáctame</a></p>
</header>
<!-- Sección de productos (pendiente de completar) -->
<section>
<h2>Nuestros Productos</h2>
<!-- TODO: Agregar lista de productos reales -->
<p>Por ahora, solo un texto de prueba.</p>
</section>
<!-- Pie de página con info legal -->
<footer>
<p>© 2025 - Todos los derechos reservados.</p>
<!-- Nota: Cambiar el año automáticamente con JS más adelante -->
</footer>
</body>
</html>
¿Qué pasa aquí?
- Los comentarios separan las secciones (
header,section,footer). - Hay una tarea pendiente marcada con «TODO».
- Una nota para un cambio futuro en el pie de página.
- Todo queda claro sin afectar la página que ve el usuario.
Cosas a tener en cuenta
1. No abuses
Si pones comentarios en cada línea, tu código se vuelve un desastre y difícil de leer. Úsalos solo cuando aporten valor.
<!-- Mal ejemplo: demasiado comentario --> <p>Texto</p> <!-- Esto es un párrafo --> <h1>Título</h1> <!-- Esto es un título -->
Mejor así:
<!-- Sección de bienvenida --> <p>Texto</p> <h1>Título</h1>
2. No comentes dentro de otros comentarios
Esto no funciona y puede romper tu código:
<!-- Este es un comentario <!-- con otro dentro --> -->
El navegador se confunde porque no sabe dónde termina el comentario. Usa uno a la vez.
3. Cuidado con el contenido sensible
No pongas cosas como contraseñas o datos privados en comentarios, porque cualquiera que vea el código fuente de tu página (clic derecho > «Ver código fuente») puede leerlos.
<!-- ¡No hagas esto! --> <p>Usuario: admin <!-- Contraseña: 1234 --></p>
Truco avanzado: Comentarios condicionales (para navegadores viejos)
En versiones antiguas de HTML, se usaban comentarios especiales para Internet Explorer (un navegador que daba dolores de cabeza). Aunque ya casi no se usan, aquí va un ejemplo por curiosidad:
<!--[if IE]>
<p>Estás usando Internet Explorer, ¡actualiza tu navegador!</p>
<![endif]-->
Esto solo se muestra en IE. Con HTML5 y navegadores modernos, no lo necesitarás mucho, pero es un dato interesante.
Consejos para principiantes
- Empieza simple: Usa comentarios para dividir tu código en partes (inicio, medio, fin).
- Sé claro: Escribe mensajes cortos y útiles, como
<!-- Menú de navegación -->. - Prueba apagando código: Comenta una sección, guarda, y abre en el navegador para ver qué cambia.
- Revisa después: Si dejas un «TODO», no te olvides de volver a él.
Los comentarios en HTML son tus aliados para mantener el código organizado, explicarte a ti mismo o a otros qué estás haciendo, y probar cosas sin perder el rumbo. Con <!-- y -->, puedes escribir desde una línea hasta un párrafo entero, y el navegador ni se entera. Son fáciles de usar, pero poderosos si los aprovechas bien. el próximo capitulo trataremos el modulo 2 de curso.