AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
Print This Page

You are here : Home - Web Development - HTML - Close Your Tags

Close Your Tags



Time to change old habits.

We all know that most browsers can be quite forgiving about poor/lazy HTML syntax. Forget to close a tag and the browser will try to close it itself - usually in the wrong place but who cares? the page still looks OK.

Well let me try to explain the benefits of closing tags in the right place. The biggest advantage is a speed increase in page rendering time. By closing tags correctly the browser doesn't need to waste time looking for the closing tag, it just moves on to the next tag it finds. This becomes more obvious with longer pages as the browser looks for closing tags that don't exist and tries to guess the best place to put one.

Because tags can be nested inside each other, it makes sense to let the browser know where one tag ends and another begins.

Look at the example below.

<html>
<head>
 <title>Small test</title>
</head>
<body bgcolor="White">
<p>I have bought the following books
<ul>
 <li>Javascript Book
 <li>DHTML Book
 <li>Perl Book
 <li>HTML Book
</ul>
</body>
</html>

It sort of works like this- The page renders from top to bottom which is why you will sometimes see the title of a page in the titlebar before the content has displayed.
After the body tag the first tag the browser finds is the <p> tag.
It then looks through the rest of the document to see if it can find a </p> tag. When it doesn't find one it looks for the next tag and assumes the </p> should be placed before rendering the next open tag.
The same procedure occurs for every <li> tag that isn't closed in this example.

If we had written the page as follows I wouldn't of had to have written the above paragraph.

<html>
<head>
 <title>Small test</title>
</head>
<body bgcolor="White">
<p>I have bought the following books </p>
<ul>
 <li>Javascript Book </li>
 <li>DHTML Book </li>
 <li>Perl Book </li>
 <li>HTML Book </li>
</ul>
</body>
</html>

The spaces before the closing tags are there to stop Netscape doing strange things to formatted text.

For every tag you forget to close you are causing your pages to take longer to display. If you read that some closing tags are optional such as </p> </li> </option> etc, get into the habit of closing them now.

As web pages become more dynamic and the use of style sheets become more widespread it makes sense to start closing your tags properly. Tags which are not properly closed when a style sheet is applied to them usually don't render the way you would expect them to.








Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]