style attribute html formatting whitespace

attribute - ¿Por qué HTML requiere que múltiples espacios aparezcan como un único espacio en el navegador?



html tooltip (12)

"¿Por qué se convierten espacios múltiples a espacios individuales?"

Primero, las preguntas sobre "por qué" son difíciles de responder. Está en la especificación. Eso es prácticamente el final.

Considere que hay varios tipos de espacios en blanco.

  • Espacio en blanco entre las etiquetas. <p>/n<b>hi</b>/n</p>

  • Espacio en blanco en el contenido dentro de una etiqueta. <p>Hi <i>everyone</i>.</p>

  • Espacio en blanco en una sección <pre> o CDATA.

Los primeros dos son difíciles de distinguir. El espacio en blanco entre las etiquetas, incluso en XML, es "opcional". Pero cuando tienes lo que se llama un "modelo de contenido mixto" - etiquetas entremezcladas con contenido - la sutileza de "entre etiquetas" y "en el contenido pero entre etiquetas" y "en el contenido pero no entre etiquetas" es imposible clasificar.

Entonces ellos no lo arreglan. El espacio en blanco entre etiquetas y espacios en blanco en el contenido es todo opcional.

Hace tiempo que reconozco que cualquier conjunto de espacios en blanco en un archivo HTML solo se mostrará como un espacio único. Por ejemplo, esto:

<p>Hello. Hello. Hello. Hello. Hello.</p>

muestra como:

Hola. Hola. Hola. Hola. Hola.

Esto está perfectamente bien, como si necesitara varios espacios de texto preformateado, puede usar la etiqueta <pre>. Pero, ¿cuál es el motivo? Más precisamente, ¿por qué está esto en la especificación para HTML?


Como otros han dicho, está en la especificación HTML.

Si desea conservar el espacio en blanco en la salida, puede usar la etiqueta <pre> :

<pre>This text has extra spaces and newlines</pre>

Pero esto generalmente también mostrará el texto en una fuente diferente.



La definición / especificaciones de HTML indica claramente que se debe ignorar el exceso de espacio en blanco.

Si desea incluir espacios adicionales, use la etiqueta <pre> o &nbsp;


Los espacios se compactan en HTML porque hay una distinción entre cómo se formatea HTML y cómo se debe representar. Considera una página como esta:

<html> <body> <a href="mylink">A link</a> </body> </html>

Si el HTML se sangró utilizando espacios, por ejemplo, el enlace estaría precedido por varios espacios.


No solo está en the specification , sino que tiene cierto sentido. Si no se compactaran los espacios, tendrías que poner todo tu html en una sola línea. algo así:

<div> <h1>Title</h1> <p> This is some text <a href="#">Read More</a> </p> </div>

Tendría una alineación extraña con los espacios de todo el lugar. La única forma de hacerlo bien sería compactar ese código, que sería difícil de mantener.


Para responder, ¿por qué está esto en la especificación para HTML? debes considerar los orígenes de HTML.

Tim Berners-Lee diseñó HTML para compartir documentos científicos. Lo basó en ideas de sintaxis preexistentes en SGML, que también tiene tratamientos similares de espacios en blanco.

Uno puede imaginar que los primeros escritores de HTML en el CERN lo hicieron sin la ayuda de las herramientas WYSIWYG, por lo que la capacidad de tratar el espacio en blanco de esta manera ayuda a la legibilidad de dichos archivos fuente escritos a mano.


Para tratar de abordar el "por qué" puede ser porque HTML se basó en SGML que lo había especificado de esa manera. A su vez, se basó en GML desde principios de los años 60. La razón del manejo del espacio en blanco podría ser muy bien porque los datos se ingresaron en una "tarjeta" por vez en ese momento, lo que podría dar lugar a una ruptura no deseada de oraciones y párrafos. Una diferencia en el antiguo GML es que especificó que debe haber dos espacios entre oraciones (como las antiguas reglas de máquina de escribir) que pueden haber establecido un precedente de que los espacios son independientes del marcado.


Por lo general, estas decisiones de diseño no están documentadas en ninguna especificación y solo pueden extraerse de los archivos de discusión de grupos de trabajo que son públicamente accesibles, o explicados por los propios autores de las especificaciones. Sin embargo, en este caso particular, HTML 3.2 indica lo siguiente:

Excepto en el texto literal (por ejemplo, el elemento PRE ), HTML considera que las secuencias contiguas de espacios en blanco son equivalentes a un carácter de espacio simple (ASCII decimal 32). Estas reglas permiten a los autores una gran flexibilidad al editar el texto marcado directamente. Tenga en cuenta que las futuras revisiones de HTML pueden permitir la interpretación del carácter de tabulación horizontal (ASCII decimal 9) con respecto a una regla de tabulación definida por una hoja de estilos asociada.

El comportamiento que ves hoy es, por supuesto, mucho más complicado de lo que se especificó en HTML 3.2, pero creo que el razonamiento aún se aplica. Un ejemplo de dónde puede ser útil esta flexibilidad es cuando tiene un párrafo largo que tiene la intención de ajustar y sangrar:

<H1>Lorem ipsum</H1> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fastidii oportere consulatu no quo. Vix saepe labores an, pri illud mentitum et, ex suas quas duo. Sit utinam volutpat ea, id vis cibo meis dolorum, eam docendi accommodare voluptatibus no. Id quaeque electram vim, ut sed singulis neglegentur, ne graece alterum has. Simul partiendo quaerendum et his.

Si el espacio en blanco no se colapsara, terminaría con un párrafo con huecos inusualmente grandes donde el texto está envuelto por la indentación.

Ninguna otra especificación HTML sugiere ningún tipo de razonamiento detrás de esta decisión de diseño. En particular, HTML 4 solo describe el comportamiento de colapso, y HTML5 y las especificaciones de vida difieren en CSS, lo que tampoco explica nada . Las versiones anteriores de HTML tampoco contienen ninguna explicación, aunque el siguiente extracto aparece en un fragmento de ejemplo en HTML 2.0 :

<OL> ... <UL COMPACT> ... <LI> Whitespace may be used to assist in reading the HTML source. </UL> ... </OL>


Si los navegadores no hicieron esto, podría ser difícil formatear su código HTML para que sea fácilmente legible. Por ejemplo, es posible que desee formatear su código de esta manera:

<html> <body> <div> I like to indent all content that is inside div tags. </div> </body> </html>

Si el navegador no ignora los ocho espacios o menos antes del texto dentro de la etiqueta div, es posible que su página web no se vea de la manera que usted pretendía.


Simple, está en la especificación.

De la especificación HTML, sección 9.1 :

En particular, los agentes de usuario deberían colapsar las secuencias de espacio en blanco de entrada al producir un espacio entre palabras de salida.