Comentarios HTML, saltos de línea y espacios, con resultados en vivo | We.Inc
Cómo escribir comentarios en HTML y CSS, añadir saltos de línea y espacios extra, y evitar que los espacios se junten. Cada ejemplo es editable y muestra al lado el resultado renderizado.
Comentarios HTML, saltos de línea y espacios
Escribe un comentario HTML como <!-- note -->; los navegadores omiten todo lo que hay entre los marcadores. Fuerza un salto de línea dentro del texto con <br> y empieza un párrafo nuevo con <p>. Los navegadores reducen las series de espacios a uno solo, así que usa para un espacio fijo, o la propiedad CSS white-space para conservar los espacios que escribiste.
Referencia rápida
Quieres
Usa
Notas
Una nota en HTML
<!-- note -->
Visible en el código fuente, nunca en pantalla
Una nota en CSS
La única forma de comentario que tiene CSS
Un salto dentro de una línea de texto
<br>
Direcciones, poemas, letras de canciones
Un bloque de texto nuevo
Da un espaciado que puedes estilizar
Un espacio que nunca se junta ni se parte
Entre un número y su unidad
Conservar cada espacio y salto de línea
white-space: pre-wrap
Sigue ajustando las líneas largas
Cada caso de esta página muestra el código y lo que el navegador dibuja realmente. Edita cualquier ejemplo y el resultado se actualiza, así puedes ver por qué desapareció un espacio o por qué un salto no hizo nada antes de cambiar tu propia página.
Busca en las secciones de abajo el caso que coincide con tu problema: comentarios, saltos, espacios o la propiedad white-space.
Edita el código de la izquierda. El resultado de la derecha es un renderizado real del navegador en un marco aislado, con los scripts desactivados.
Copia en tu página la versión que hace lo que necesitas.
Si el espaciado sigue viéndose mal, revisa los diez errores del final de la página; la mayoría de los problemas de espacios que se juntan son uno de ellos.
Usa los comentarios para explicar por qué el marcado es así, no qué es. Un comentario que dice <!-- nav --> encima de un elemento nav no aporta nada.
Quita los comentarios del HTML de producción si contienen notas internas, porque cualquiera puede leerlos con Ver código fuente.
Recurre a margin o gap en CSS antes que a una pila de etiquetas <br>. El espaciado en CSS puede cambiar según el tamaño de pantalla; una fila de saltos no.
Pon entre valores que deben quedar en la misma línea, como 10 km o Mr. Khan, en lugar de usarlo para sangrar.
Preguntas frecuentes
¿Cómo comento varias líneas de HTML?
Pon <!-- antes de la primera línea y --> después de la última. Todo lo que hay entre medias, en cualquier número de líneas, se ignora. No puedes anidar un comentario dentro de otro, porque el primer --> cierra todo el comentario y el resto aparece como texto.
¿Por qué mi HTML ignora los espacios extra?
HTML trata cualquier serie de espacios, tabulaciones y saltos de línea en texto normal como un solo espacio. Eso te permite sangrar tu código fuente libremente sin cambiar la página. Para conservar varios espacios, usa entidades o aplica white-space: pre-wrap al elemento en CSS.
¿Es <br>, <br/> o <br />?
Las tres funcionan en HTML. <br> es la forma HTML simple. La barra es opcional y el analizador de HTML la ignora, pero JSX en React exige la forma autocerrada <br />.
¿Puedo usar comentarios // en CSS?
No. CSS solo entiende /* */. Una línea que empieza por // no es un comentario: el analizador la trata como código roto y descarta la declaración o incluso toda la regla siguiente, por eso el fallo puede parecer aleatorio.
¿Siguen funcionando los comentarios condicionales?
No. Los comentarios condicionales como <!--[if IE]> solo los leían las versiones antiguas de Internet Explorer y se eliminaron en Internet Explorer 10. Todos los navegadores actuales los tratan como comentarios normales, así que el marcado que contienen nunca aparece.
Cuándo un salto de línea es la herramienta adecuada
Un <br> va donde el salto de línea forma parte del propio contenido: las líneas de una dirección postal, el verso de un poema, un bloque de firma. En esos casos, un lector mantendría el salto si copiara el texto a mano.
En el resto de casos, el salto es diseño, y el diseño va en CSS. Dos párrafos separados por <br><br> se ven bien hasta que el diseño necesita más espacio en escritorio y menos en un móvil. Dos elementos <p> con un margen pueden cambiar en cualquier breakpoint, y los lectores de pantalla los anuncian como párrafos separados.
Por qué se juntan los espacios, y las cuatro formas de evitarlo
El valor por defecto del navegador para el texto normal es white-space: normal, que une cada serie de espacios en blanco en un solo espacio y parte las líneas donde lo necesita. Por eso la sangría de tu código fuente nunca se ve en pantalla.
Para conservar espacios puedes usar entidades ( y las más anchas   y  ), un elemento <pre>, o uno de los valores de white-space pre, pre-wrap, pre-line y break-spaces. Las entidades sirven para uno o dos huecos fijos; los valores de CSS sirven para bloques enteros de texto como código, poemas o notas escritas por usuarios.
Los comentarios son públicos
Los comentarios HTML llegan a cada visitante. No aparecen en la página, pero están en el código fuente, en las copias guardadas y en lo que descargan los buscadores. Nunca dejes contraseñas, direcciones internas, nombres de clientes ni notas TODO sobre fallos de seguridad en un comentario.
La mayoría de las herramientas de compilación pueden quitar los comentarios por ti. Vite y empaquetadores similares eliminan los comentarios de JavaScript y CSS al minificar; los comentarios HTML de tu archivo index pueden necesitar un paso de minificación de HTML si quieres quitarlos.
Comentarios HTML
Un comentario empieza con <!-- y termina con -->. Puede ir entre elementos o envolver bloques enteros para desactivarlos mientras haces pruebas.
Comentarios de una línea y de varias líneas
Solo se dibujan los dos párrafos. Los comentarios, incluido el que envuelve un párrafo entero, no dejan rastro en pantalla.
Por qué no se pueden anidar los comentarios
El primer --> cierra antes de tiempo el comentario exterior, así que el texto sobrante y el --> final aparecen en la página.
Los antiguos comentarios condicionales ya no hacen nada
Solo Internet Explorer 9 y anteriores los leen. Los navegadores actuales omiten el aviso por completo, así que puedes borrar ese viejo truco sin problema.
Saltos de línea: <br>, <p> o margin en CSS
Cuál usar
Elemento
Significado
Úsalo para
<br>
Un salto dentro de un mismo bloque de texto
Direcciones, poemas, letras de canciones
Un párrafo independiente
Cualquier idea o bloque de texto nuevo
margin o gap de CSS
Espacio entre bloques
Espaciado del diseño que cambia según el tamaño de pantalla
<hr>
Un cambio de tema
Una separación temática entre secciones
Una dirección con <br>
Los saltos forman parte de la dirección, así que <br> es la opción correcta aquí.
Etiquetas <br> apiladas frente a párrafos con margen
Las dos se ven parecidas, pero la segunda versión tiene párrafos reales y un hueco que puedes cambiar en un solo sitio.
Añadir espacios: entidades
Entidades de espacio
Entidad
Carácter
Ancho
Uso habitual
U+00A0 espacio de no separación
Espacio normal, nunca se parte
10 kg, página 3
 
U+2002 espacio en
Medio em
Huecos en listas o menús
 
U+2003 espacio em
Un em
Sangrar una sola línea
 
U+2009 espacio fino
Estrecho
Entre grupos de dígitos en algunos estilos
Mantener juntos un valor y su unidad
En la caja estrecha, la primera línea puede partirse entre 50 y km. El espacio de no separación mantiene unida la segunda pareja.
Espacios que se juntan frente a entidades
Cinco espacios escritos se convierten en uno. Cada entidad conserva su propio ancho.
Conservar espacios y saltos de línea con CSS white-space
Valores de white-space
Valor
Espacios
Saltos de línea
Ajusta las líneas largas
Se juntan
Se juntan
Sí
Se juntan
Se juntan
No
Se conservan
Se conservan
No
Se conservan
Se conservan
Sí
Se juntan
Se conservan
Sí
Se conservan y pueden partirse
Se conservan
Sí
pre, pre-wrap y pre-line lado a lado
El mismo texto en tres cajas. pre lo conserva todo pero se sale del borde, pre-wrap lo conserva todo y ajusta las líneas, pre-line conserva solo los saltos de línea.
Mostrar el texto que alguien escribió en un formulario
Las notas de un textarea conservan sus saltos de línea cuando se muestran con pre-line, sin el riesgo de convertir su texto en HTML.
Comentarios en CSS, y por qué // rompe el CSS
El color comentado se ignora y se aplica el verde.
Lo que // hace con la regla siguiente
La línea // se lee como parte de un selector, así que se descarta toda la regla .warning y el texto sigue negro.
10 errores comunes
Errores y soluciones
Error
Qué pasa
Solución
Escribir varios espacios entre palabras
Se juntan en uno
o white-space: pre-wrap
Usar <br><br> para separar párrafos
El espaciado no se adapta al tamaño de pantalla
Elementos <p> separados y un margen
Anidar comentarios
El texto tras el --> interior se cuela en la página
Usa un solo comentario, o borra el bloque
Escribir comentarios // en CSS
La regla siguiente se ignora
Usa /* */
Escribir <!-- --> en un archivo JavaScript
Error de sintaxis o comportamiento extraño
Usa // o /* */ en JS
Dejar notas privadas en comentarios HTML
Cualquiera puede leerlas con Ver código fuente
Quítalas o elimina los comentarios en la compilación
Sangrar texto con filas de
Se rompe en pantallas pequeñas
padding-left o text-indent
Dos guiones dentro de un comentario
Los validadores antiguos lo marcan; se lee mal
Evita -- dentro del texto del comentario
Escribir <br> sin barra en JSX
El compilador de JSX da un error
Escribe <br /> en React
Esperar que se vean los saltos de línea de un textarea