Most computer languages, including HTML, ignore most of the white space in a document. In other words, there is no difference between one space, two spaces or 100 spaces. For example, in HTML, the following four will all be displayed identically.
Hello, World!
Hello, World!
Hello, World!
Hello,
World!
Most HTML beginners find this behaviour a bit unnerving.
You can experiment with your hello.html to explore this further.
As another example, you can squish all of the content together:
<!DOCTYPE html>
<html><head><title>Hello</title></head><body>Hello, World!</body></html>
It is best to organize your HTML so that it is easy to read in a text editor.
You should group your text into paragraphs using the paragraph tag <p>. This will add vertical whitespace between the paragraphs.
While the <p> paragraph tag is a paired tag, the closing paragraph tag </p> is an optional tag. It is optional because it is always clear when a paragraph ends: either when a new paragraph begins, or there is some other document element (e.g., a table). Eliminating the closing </p> tag can keep your HTML uncluttered.
<p>This is paragraph one.<p>This is paragraph two.
This is paragraph one.
This is paragraph two.
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.
This is a<br>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.
If you want to add an extra space between two words, you can use the special HTML code which stands for non-breaking space.
This is an example of a big space.
Non-breaking spaces ensure 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.
The special code is known as a character entity reference. A character entity reference starts with an ampersand (&) and ends with a semi-colon (;).
Because the ampersand (&) is used for character entities, to display an ampersand you should use the special entity &
Similarly, the angle brackets (<, >) used for tags can be displayed with < and > for less-than and greater-than.
A collection of entities is available on this Online Chart.
Here is another example:
Jamie Salé commence à patiner à l'âge de 5 ans.
In a previous Module, we saw how the Unicode standard can be used to represent characters from languages all over the world.
To use a Unicode character in HTML, you add a number sign (#) in front of the number within the entity wrapper. For example, to display the happy face Unicode character 128522 in HTML, you write 😊 (😊). Unfortunately, not all browsers can display every Unicode character.
For example, 滑铁卢大学 becomes 滑铁卢大学
The heading tags <h1>, <h2>, ... <h6>are used to identify the headings (or sections) within a document, with <h1> used for the top-level main headings, and <h2> used for sub-headings, and <h3> used for sub-sub-headings, and so on.
The above heading is written as:
<h2>Headers, Bold & Italic</h2>
As mentioned when discussing nested tag pairs, the bold (<b>) and italic (<i>) tags can be used to add emphasis to text.
We will explore more advanced formatting methods in the following module.