CS 100 (Learn) — CS 100 (Web) — Module 07
Most computer languages, including HTML, ignore most of the white space in a document.
You can squish all of the content together, but this can be very hard to follow. It is best to organize your HTML so that it is easy to read in a text editor.
The following two HTML examples are displayed identically in a browser:
<!DOCTYPE html>
<html lang="en"><head><title>Hello</title></head><body>Hello, World! Here is a bullet list:<ul><li>First bullet item</li><li>Second bullet item has some <em>emphasis</em> in it</li></ul></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
Hello, World!
Here is a bullet list:
<ul>
<li>First bullet item</li>
<li>Second bullet item has some <em>emphasis</em> in it</li>
</ul>
</body>
</html>
Hello, World! Here is a bullet list:
Clearly the second is much easier to read. It is good practice to indent nested elements by a few spaces. Inline elements (such as <em>) are not normally indented.
If you look closely at the above example, note how the web browser put the text "Here is a bullet list:" immediately after the text "Hello, World!", even though we added several lines and white space between "World!" and "Here". The web browser squished them together.
In HTML, there is no difference between one space, two spaces or 100 spaces. New lines are also just considered white space that can be mostly ignored.
In HTML, the following five examples will all be displayed identically:
Hello, World!
Hello, World!
Hello, World!
Hello,
World!
Hello,
World!
Many HTML beginners find this behaviour a bit unnerving.
You can experiment with your hello.html to explore this further.
You should group your text into paragraphs using the paragraph tag <p>. This will add vertical whitespace between the paragraphs.
<p>Hello, World!</p>
<p>Here is a bullet list:
<ul>
<li>First bullet item</li>
<li>Second bullet item has some <em>emphasis</em> in it</li>
</ul>
</p>
Hello, World!
Here is a bullet list:
The <p> (paragraph) tag is the primary method you should be using to add vertical whitespace between your blocks of text.
If you need to start a new line in the middle of a paragraph (or within some other element), you can use the <br> tag for a line break.
<p>This is a<br>new line.</p>
This is a
new line.
Notice that there is not as much space around the lines of text with a <br> as there is with <p>.
It may be tempting to insert many <br> tags to control the formatting and spacing of your document, but we will see a much more robust solution to this problem in the following section.
A good example for using <br> is when giving an address:
<p>
200 University Ave W<br>
Waterloo, ON<br>
N2L 3G1
</p>
200 University Ave W
Waterloo, ON
N2L 3G1
In practice, you should rarely use <br> tags.
If you want to add an extra space between two words, you can use the special HTML code which stands for non-breaking space. The special code is known as a character entity reference, and is discussed in a later section.
This is an example of a big space.
This is an example of a big space.
Non-breaking spaces are for ensuring that no end-of-line word-wrapping (breaking) occurs. In this example, no break will occur between "big" and "space", no matter how you resize your browser window.