drapak.ca - Computer Programming 12: Style

Use tabs to show how tags are nested

Tabbing is used to make your code well-organized and human-readable.

The idea is that you use a tab key to indent the code when it is contained inside other code.

Good tabbing

In the example below, the <title> is inside the <head>, so it is indented.

<!DOCTYPE html>
<html>
    <head>
        <title>Stylish people make stylish code!</title>
    </head>
    <body>
        <p>See? I'm consistently stylish!</p>
    </body>
</html>

Why do you think the <p> tag is indented?

Bad tabbing

Bad tabbing is disorganized and hard to read. It looks like scrambled eggs.

<!DOCTYPE html>
<html>
    <head><title>Stylish people make stylish code!</title>
</head>
    <body>      <p>See? I'm consistently stylish!</p>
    
    
</body></html>

Indentation tips

Indentation tip #1

Use tab instead of space to indent your code. Yes, this spreads out your code. (And heck, some editors actually replace the tab characters with spaces as you work!) But it takes fewer key presses and it lines your code up automatically.

Indentation tip #2

Adjust indentation as a block. Try this:

Select a few lines with your cursor
Then hit tab and watch what happens
Now hit shift-tab and see the result
You're welcome!

An example of bad style

Take a look a the code example below. Which parts do you think are examples of bad style?

<!DOCTYPE html>
<HTML>
    <head>
        <title>Stylish people make stylish code!</TItle>
    </head>
    <body>
        <H1>Hello world!</h1>
        <p>Look - I'm a programming <strong>superstar</str0ng>!</p>
        
<h2>My favourite website< /h2>
        <p>
            The website I visit most often is:
            <a hReF="http://cbc.ca">CBC.ca</a>
        </p>
</P>
    
    <H3>An awesome image</h3>
        <imG src="http://imgs.xkcd.com/comics/sandwich.png"></img>
    </body>
</html>