Certified HTML5 Developer Learning Resources White Space and Flow

Learning Resources
 

White Space and Flow


Whitespace

With only a few exceptions, HTML treats whitespace characters (spaces, tabs, and newlines) differently from ordinary characters. In general, a single whitespace character--including newlines--or a sequence of whitespace characters are treated as a single space and leading/trailing whitespace is eliminated. This is known as 'collapsing whitespace'. Therefore the following two paragraphs are treated as if they were identical

                                       

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

They are rendered, respectively

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

 

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Most of the time whitespace isn't important to the author, and this markup behavior gives the author considerable flexibility. It makes markup simpler to write and, if used effectively, easier to read as well. For example, you can leave a blank space between paragraphs and around headings or, if you like indent the text marked by subheadings to make it clear how (to you, the reader doesn't see the source document unless he/she makes a special effort to read it) the document is structured, eg:

    

How to do things good

I like to do things this way

How other people do things

Other people do things differently

How to do things better

Do things some other way, and if it's not better, repeat

The rules also permit--but certainly do not require--you to place tags on a line by themselves if you like, and to start every element on it its own line. For example

Para 1

Para 2

Address 1

is identical to

    

Para 1

Para 2

Address 1

 

 

Normal flow is the way that elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.

Normal flow is the way that elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.
Laying Out Block Boxes

In normal flow, block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another.

 For Support