What is whitespace and how does it differ from indentation?

Question

What is whitespace and how does it differ from indentation?

Answer

Whitespace is any character or series of characters which creates space on a page but does not display a visible mark. Common whitespace characters include tabs and spaces.

Indentation is a type of horizontal whitespace strategically used to enhance the readability of our code. For example, in HTML it is best practice to consistently indent our code to clearly illustrate nestings.

29 Likes

How do you use whitespace

5 Likes

Why do we need to learn this?

4 Likes

The better question is why not? Think of it as broadening one’s programming vocabulary by adding not only a new word, but a new and important concept. space around objects.

<body><div><p>This markup contains no whitespace.</p></div></body>

It is possible to compose an entire HTML document with little or no use of whitespace. Imagine what a mess this would be to debug, edit and revise, or even just to read, let alone have a search engine or other user agent be able to determine anything about the structure? Note that whitespace also includes vertical spacing, as well, meaing newlines and linebreaks.

<body>
  <div>
    <p>This markup contains no whitespace.</p>
  </div>
</body>

The above markup uses whitespace to help delineate the various objects in the document. We see clearly where an element begins and ends, as well as the nesting levels.

Bottom line, whitespace makes reading and organization way more clear, to both ourselves and other readers.

115 Likes

That defies logic: why would whitespace in the HTML file affect a search engine or user agent’s ability to determine the structure?

1 Like

From what little I know about SEO, it trawls through thousands of different aspects of your site/web page, and format of code is one of those pieces it judges with ranking. Can’t really speak on how it would effect their ability to read a page though.

1 Like

Are we allowed to use vertical whitespaces? If we (for example) want to make some space between <div(s)> or <section(s)> to make the file easier to read, are we allowed to use vertical whitespaces?

There is no restriction on whitespace, either lots, or none. The main purpose is readability and being able to identify nested structures. Keep in mind that too much whitespace can make the document appear ragged, so whatever amount you use, keep it consistent and don’t lose sight of the nesting.

Over time, you will likely find your markup will naturally need less vertical whitespace, so don’t resist it as you gain more recognition of the page elements and how they all fit together to form a finished document.

32 Likes

can I use the enter key on the keyboard to create a whitespace?

2 Likes

Yes, you can. It inserts a line-break, which is also whitespace. In HTML, line-breaks and other forms of whitespace are ignored so do not render.

Something of note though, a line-break will introduce a space character.

<p>A quick brown foxjumps over the lazy dog</p>

renders as we see it above.

A quick brown foxjumps over the lazy dog

Now if we insert a line-break,

<p>A quick brown fox
jumps over the lazy dog</p>

it renders as,

A quick brown fox jumps over the lazy dog

Also note,

<p>A quick brown fox




jumps over the lazy dog</p>

still renders as,

A quick brown fox jumps over the lazy dog

Something else to consider, as well is multiple space characters in text are ignored, but for one of them.

<p>A quick    brown    fox jumps over    the lazy dog</p>

renders, as,

A quick brown fox jumps over the lazy dog

We have two ways of inserting extra space (known as padding)

  • Use the none-breaking-space entity, &nbsp; which can be repeated and which renders as a space character; or,
  • use a <span></span> element which can be given left and right margins.

If your browser will not recognize the margins, given SPAN is an inline element, then declare it an inline-block.

Using repeated entities can get messy and hard to decipher, so the latter approach is probably the better choice.

&nbsp;

in real terms is meant to be inserted between two words we do not want separated due to line wrapping, such as a proper name.

Wee&nbsp;Gillis

Should those words appear near the end of a line, both words will be wrapped to the next line.

26 Likes

What I understand about White Space is any character that creates space in the HTML document but does not is displayed in the web browser. That’s right?

2 Likes

When I saw Codecademy’s page source, I like how the html codes are arranged nicely rather than other web sites. :heart_eyes: :heart_eyes:

1 Like

so all indentation is whitespace, but not all whitespace is indentation… :slight_smile:

2 Likes

White space is any of, space characters, line breaks, or tabs.

                      " "          \n        \t
1 Like

I guess &nbs; stays for AndNoBreakeSpace;

Non-breaking-space, &nbsp; is so we can prevent personal and other pronouns from wrapping in the middle. If part needs to wrap, the whole will wrap.

Arthur&nbsp;Miller, Death of a Salesman

The name won’t break (wrap) but the title will.

3 Likes

Because when you find a .html with indent or whitespaces. You already know why.

@mtf thanks for explaining about &nbsp but can you tell me what is the difference in the vertical space and horizontal space in web development ,why vertical space gets considered ?

Vertical space is constrained (by the width) and reacts to the right margin by wrapping text or content. The intended use of the &nbsp; entity is in the name, ‘non-breaking space’, namely to keep a group of words, such as a proper name from being split on the wrap-around. The entire phrase will be wrapped to the next line.

Horizontal space is governed by margins, perhaps padding (yuck) and the browser itself based on viewport dimensions. HTML containers will stretch by default when more content is added to allow for all of it to fit into the container. Given that height is so fluid, the only way to gain vertical spacing is with linebreak, <br> (again, yuck), empty paragraph, <p></p> (also, yuck) and CSS margins.

1 Like

Additionally, adding comments really helps when coming back to the old files in the future. And if you collaborate, helps the team members as well :smiling_face: :white_flower: