Menu
Does Browsers remove extra spaces when displaying an HTML file? yes, for example if you write <h1>hello, world!
Creating extra spaces before or after text To create extra spaces before, after, or in-between your text, use the (non-breaking space) extended HTML character.
HTML has no rules concerning white space, hard returns (line breaks), tabs, etc., in other words we are free to compose the document however we wish in any textual format. This is still a pretty simple and basic data table.
They allow you to format your code in a way that will make it easily readable by yourself and other people. In fact much of our source code is full of these white space characters (that is, unless you write obfuscated code).
Spaces are compacted in HTML because there's a distinction between how HTML is formatted and how it should be rendered. Consider a page like this:
<html>
<body>
<a href="mylink">A link</a>
</body>
</html>
If the HTML was indented using spaces for example, the link would be preceded by several spaces.
As others have said, it's in the HTML specification.
If you want to preserve whitespace in output, you can use the <pre> tag:
<pre>This text has extra spaces
and
newlines</pre>
But this will also generally display the text in a different font.
To try to address the "why" it may be because HTML was based on SGML which had specified it that way. It was in turn based on GML from the early 60's. The reason for white space handling could very well be because data was entered one "card" at a time back then which could result in undesired breakup of sentences and paragraphs. One difference in the old GML is that it specified that there has to be two spaces between sentences (like the old typewriter rules) which may have established a precedenct that spaces are independent of the markup.
Not only is it in the specification, but there is some sense to it. If spaces weren't compacted, you would have to put all your html on a single line. so something like this:
<div>
<h1>Title</h1>
<p>
This is some text
<a href="#">Read More</a>
</p>
</div>
Would have some strange alignment with spaces all over the place. The only way to get it right would be to compact that code, which would be difficult to maintain.
"Why are multiple spaces converted to single spaces?"
First, "why" questions are hard to answer. It's in the spec. That's pretty much the end of it.
Consider that there are several kinds of white space.
White space between tags. <p>\n<b>hi</b>\n</p>
White space in the content within a tag. <p>Hi <i>everyone</i>.</p>
White space in a <pre> or CDATA section.
The first two are hard to distinguish. Whitespace between tags, even in XML, is "optional". But when you have what is called a "mixed content model" -- tags intermixed with content -- the subtlety of "between tags" and "in the content but between tags" and "in the content but not between tags" is impossible to sort out.
So they don't sort it out. Whitespace between tags and whitespace in the content is all optional.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With