Comentarios y espacios en blanco

¡Bienvenido a "Fundamentos de HTML"! Hoy vamos a explorar dos superhéroes "invisibles" del desarrollo web: los comentarios y los espacios en blanco. Estos conceptos no cambiarán los diseños coloridos que ven tus visitantes en pantalla, pero te harán la vida como programador muchísimo más fácil. ¡Vamos allá!

¿Qué es un comentario HTML?

Un comentario es una parte especial de texto dentro de tu código que el navegador ignora por completo. Para crear uno, solo tienes que envolver tu texto con un conjunto especial de caracteres.

Empiezas el comentario con <!-- y lo terminas con -->.

Así se ve un comentario entre dos etiquetas de párrafo:

<p>¡Bienvenido a mi sitio web!</p>

<!-- Este es un comentario secreto solo para mí -->

<p>Aquí está mi segundo párrafo.</p>

¿Por qué usar comentarios?

Quizá te preguntes por qué escribirías código que nadie ve. Hay dos razones principales:

• Dejar notas: Piensa en los comentarios como post-its para tu código. Puedes dejar recordatorios útiles para tu "yo" del futuro o explicar cómo funciona una parte difícil para que tu equipo la entienda después.
• Apagar código temporalmente: Si estás probando tu sitio y buscando un error, puedes ocultar temporalmente una parte del código convirtiéndola en comentario. Los desarrolladores llaman a esto "comentar código". Cuando arregles el problema, solo borras los caracteres de comentario y el código vuelve a activarse.

El secreto del navegador

Aquí va un secreto interesante: cuando un visitante normal entra en tu web, el navegador oculta perfectamente todos tus comentarios. Nunca aparecerán en la página visible.

Sin embargo, los comentarios no son totalmente seguros. Cualquier persona puede hacer clic derecho y usar "Ver código fuente" para mirar tu código sin procesar. Como cualquiera puede leer ese archivo oculto, nunca debes poner contraseñas ni información sensible dentro de un comentario HTML.

Colapso de espacios en blanco

Cuando escribes un texto en un procesador de documentos, al pulsar "Espacio" o "Enter" el texto se mueve en pantalla. En HTML no funciona igual.

Los navegadores aplican una regla llamada colapso de espacios en blanco. Esto significa que el navegador ignora los espacios extra y las líneas vacías. Si presionas "Espacio" o "Enter" 50 veces entre dos palabras en tu archivo HTML, el navegador reducirá todo ese espacio a un solo espacio normal en pantalla.

Una analogía rápida: Imagina guardar un abrigo de invierno esponjoso dentro de una bolsa al vacío. No importa cuánto aire (espacios extra) tenga el abrigo, el vacío (el navegador) lo compactará hasta dejar solo lo esencial (tu texto).

¿Por qué hacen esto los navegadores? Porque te permite usar tantos espacios y líneas vacías como quieras para organizar tu archivo y hacerlo fácil de leer, sin romper por accidente el diseño final de la página.

Resumen

¡Lo estás haciendo genial! Repasemos rápidamente lo aprendido:

• Comentarios (<!-- -->) son notas invisibles para ti y para otros desarrolladores.
• Puedes usar comentarios para apagar código temporalmente mientras haces pruebas.
• Los visitantes no ven comentarios en la página, pero sí pueden encontrarlos con "Ver código fuente".
• Los navegadores comprimen espacios y líneas vacías en un solo espacio. Esta regla útil se llama colapso de espacios en blanco.