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.


#7

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


#8

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.


#9

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?


#10

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.