HTML Formatting: Typing Code Cleanly

Whitespace Characters

In HTML, certain keystrokes (characters) are "invisible" to the browser. If you add them to the HTML code, they will not appear on the web page. They are called Whitespace characters, and include the space, the tab, and the Enter key (also referred to as a line break). In HTML, for example, if you hit the "Enter" key five times or five hundred times, it will not change the way the web page appears.

Take the example below--here is some HTML code:

Here is some text.



Here is some more text.

However, when that text is shown in a browser, it looks like this:

Here is some text. Here is some more text.

The lines you create in HTML by typing the "Enter" key several times just doesn't appear on the final web page. The same goes for tabs--you can type as many tabs as you want, they won't appear. And while a single space between other characters will appear, more than one space will not appear.

Go ahead, try it in the Live HTML Exercise below, and see what happens when you type spaces and "enter"s in the text (the "tab" key won't work in this particular text box, sorry):


So What?

So, why is this important? The answer is that, because these spaces are "invisible" on the rendered page, they can be used however you like when writing HTML.

Since spaces, tabs, and line breaks don't matter, they can be used by the web designer to format the code instead of the actual page. When reading HTML code, a browser doesn't care how the code looks; it just reads text, and looks for any commands within angled brackets. Take a look at the following HTML document which is just presented as text without spacing or line breaks, and remember that this is perfectly workable as web page code:

<html><head><title>This is the title of the page</title></head><body><br /><br /><div align="center"><font size="+3" color="darkred">A Web Page</font><br />That's what this is!</div><br /><br /></body></html>

That code looks like this on a web site (without the title, which shows in the title bar of the window):



A Web Page
That's what this is!


The problem, of course, is that when you see the code all bunched up like that, it is almost impossible to understand it. It is much better when the code is separated and indented. Here is the exact same HTML code as shown above, this time, using line breaks and tabs to show structure (I added some vertical gray lines to show the indent margins):

<html>
<head>
<title>
This is the title of the page
</title>
</head>
<body>
<br />
<br />
<div align="center">
<font size="+3" color="darkred">
A Web Page
</font>
<br />
That's what this is!
</div>
<br />
<br />
</body>
</html>

What you see above is what web designers often do--

Nesting

When a web designer builds a web page, they will use whitespace characters to format the code. One of the most common techniques is to show nesting. Nesting is when some page elements are contained inside other elements, just like those Russion dolls, where a large doll has a smaller doll inside of it, and that doll has a still small doll inside of it.

The same is true with web pages. For example, all pages will begin with the <html> command, and end with the </html> ending tag; everything between those two are "within" the <html> area, and so those contents should be indented.

Next comes the <head> command, which ends with the ending tag </head>. The "head" element is inside the "html" element, and so it is indented.
Inside of the head is the <title> command, followed by the end tag </title>. The "title" element is inside the "head," and so it gets indented again.
Then the actual title text is inside the "title" element, so it gets indented, too.

What you have then look like this:
<html>
<head>
<title>
This is the title of the page
</title>
</head>
</html>

By doing it that way, you can see that the title is inside the "title" command, which is inside the "head" command, which is inside the "html" command.

 

In the Live HTML Exercises on these pages, you will not have to use such formatting because the live exercises are not able to accept tabs. If you wish, you can use spaces instead, though that takes a little bit more time, and you have to remember how many spaces are in an indent step.

However, when you create your web page projects, I will expect you to use line breaks and indenting, so it is easier to review your code.

 



 



Video Review