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.
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 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 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>