Tidying up your HTML tags with indentation

You may already be finding that it is a bit hard to look at the HTML in your editor and to understand it. Part of this will be the layout (part will be that HTML is confusing for a while).

To help you to see the structure of a Web page's HTML it is best to indent the code. This means putting tabs into your HTML. Remember that these tabs will not be shown on the Web page (extra spaces and tabs are ignored by browsers the same way as line breaks).

The idea is to put a tab before each line of code which is inside another tag. This makes more sense if you see it. This is what you have in your file so far but properly indented:

<html>
    <head>
    </head>            
    <body>
        <h1>Hello</h1>                    
        <p>Hello everyone this is my first Web page.  Above is a title and this is a paragraph of text.</p>                    
        <p>This is another paragraph.</p>
    </body>
</html>
        

Hopefully, you can see that anything which is "inside" a set of tags is indented more than that set of tags. That makes it much easier to see if you have forgotten to close a tag.

In a proper html editor this will be a lot easier as it will autotab for you as you type more lines of HTML. If you are using a proper HTML editor place your cursor at the end of the second paragraph (after the tag) and press Enter. You should find that the cursor is already indented to the same level as the previous paragraph.

Most editors will replace tabs with a number of spaces. This can be annoying but is to allow for the way that CSS cannot handle the proper layout of tabs. A tab must be shown as the width of 8 spaces if you follow CSS rules but few people want a tab equivalent to 8 spaces. So the editors replace tabs with some spaces (you should be able to change it from the default which is often 4).

submit to reddit Delicious Tweet