Indenting your code

Indenting and space

As elements contain other elements it can be hard to keep track of whether you have remembered to put the closing tag or not.  Indenting your code is a very useful thing to do.  Adding extra empty space may help as well.  Which of these is easier for you to see and understand?

Non-indented code

Indented code

If it is the second example you should start indenting your code now.

How?

There are two approaches to indenting and you need to pick the one which suits you best:

Tab seems easiest.

The principle is to indent any element which is inside another element.  The two html tags are the top level so they stay where they are.  The head element is inside those html tags so indent both opening and closing tags by one tab.  The title element is inside the head so is indented one extra tab.  The body is inside the html so is at the same level as the head.  The heading and two paragraphs are all inside the body and so get indented one more tab. 

The closing tag of an element is always at the same level of tabbing as the matching opening tag.  On the whole most people will put the closing tag of headings, paragraphs, list items and anything else which is just text at the end of that text but you could do it like this:

<p>

    text from the paragraph

</p>

Why indent?

Most people find the second example at the top of this page easier to follow.  It allows you to quickly check that you have remembered the closing tag of an element.  This becomes more important as your pages get more complicated.  Then it really helps.

Some editors will automatically help you with this indenting.

Enough words now time to create some HTML pages.