What is whitespace and how does it differ from indentation?
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.
How do you use whitespace
Why do we need to learn this?
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.
That defies logic: why would whitespace in the HTML file affect a search engine or user agent’s ability to determine the structure?
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.
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.
can I use the enter key on the keyboard to create a whitespace?
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)
which can be repeated and which renders as a space character; or,<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.
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 Gillis
Should those words appear near the end of a line, both words will be wrapped to the next line.
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?
When I saw Codecademy’s page source, I like how the html codes are arranged nicely rather than other web sites. 
so all indentation is whitespace, but not all whitespace is indentation… 
White space is any of, space characters, line breaks, or tabs.
" " \n \tI guess &nbs; stays for AndNoBreakeSpace;
Non-breaking-space, is so we can prevent personal and other pronouns from wrapping in the middle. If part needs to wrap, the whole will wrap.
Arthur Miller, Death of a Salesman
The name won’t break (wrap) but the title will.
Because when you find a .html with indent or whitespaces. You already know why.
@mtf thanks for explaining about   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 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.
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 
