White Spaces

No place for extra space

If you had experimented with making HTML pages, you would have noticed that HTML treats white spaces i.e., spaces, tabs, and line breaks differently. HTML ignores additional white spaces. It combines consecutive whitespace characters into a single space character. There are no tabs and line breaks require the
element.

If you think about it, this is not a problem at all but an advantage. Web pages are seen in many different devices such as desktops, laptops, and smartphones. The browsers make sure that content flows smoothly in different devices. The way this is achieved is by ignoring the file’s white space structure and using only one space for one contiguous block of space. This means that the text flows and adjusts to the screen. This strategy is used because traditional media like books and newspapers have fixed dimensions and so they can be designed accurately. But in the world of the Internet, since there is a diverse range of devices the free-flowing strategy seems to be the best one.

What if I need those extra spaces

Even though HTML’s whitespace policy is beneficial for most of the time, there may be situations where more traditional whitespace formatting is required. In order to have additional spaces in between text, we need to use the non-breaking space character. Non-breaking space characters are added using the HTML   entity. Usually, when two words are separated by non-breaking spaces, they are grouped together and cannot appear in separate lines. This is particularly useful for product names and other text that need to appear together to make sense. For example, Google Chrome. HTML allows for multiple contiguous non-breaking spaces. So if you ever need multiple spaces use multiple non-breaking spaces instead.


Google Chrome

Need more   space.

Is there any other way?

In some situations, it may become tedious to format text using non-breaking spaces and <br> elements. An example may be a situation where you want to include several verses of a poem. Poems generally have a fixed structure and words not arranged in proper format could affect the rhythm of the poem. The <pre> element can be used in this situation. The <pre> element stands for preformatted element. The content of this element is shown in the format it is written in. This includes additional spaces and line breaks.


<h3><q>The Road Not Taken</q> By Robert Frost</h3>

<pre>
Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;

Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,

And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.

I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.
</pre>