What is whitespace and how does it differ from indentation?


#1

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.


FAQ: Learn HTML Elements - Common HTML Elements - Whitespace
#2

How do you use whitespace


#3

Why do we need to learn this?


#4

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 bebug, 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.