Dropping unnecessary tags in your HTML code.

This post might be a sequel to my previous post on speeding up a page’s loading time to get better rankings in Google’s search engine results pages (SERPs). It is however not the case here. Most of us write our code, at least our code’s structure, in one go. This is done preferably after having identified all the building blocks of a page or template. But let’s be honest, even if we optimise our code, our CSS and all the scripting that accompany our everyday job it is not easy to dive back into the code and go for seconds in terms of cleaning up.

The good choice.

I admit it. I have not done it all the time, cleaning the code more than necessary. Like everybody who has made mistakes I could easily come up with a thousand reasons for not having done so. The first would be: “It takes too much time on the schedule allotted to such or such project. As I matured I understood the necessity of doing second passes in code cleaning.

• It helps you check any error that could have been left.
• It might be a good occasion to compress some elements to speed up the page.
• It is a good chance to drop the unnecessary tags in your HTML code.

Now you might be asking yourself what this “unnecessary tag in the HTML code” is. Simple. When doing second checks on my code I found out that I somehow found new and improved solutions to the code already written. The I would change these. Most of the time I found myself dropping some tags from my HTML code and exploit the inherited properties of other tags to achieve the same results. This would be beneficial for maintainance, improve page loading time and less code means more content for search engines.

The basic code.

Below is a basic example of code that we usually find in web design. There is nothing wrong with this code, it works perfectly well and is written to be nicely styled in CSS.

<div id="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>
</div>

As you can see in this code, it is a navigation menu that is implemented into its own wrapping DIV tag which can itself be included in header or sidebar parts in a design. After analysing it and improving its CSS, we would estimate that the code is fine. But there’s one more step to push.

Dropping the tag.

In standard HTML, some tags have block displays and others have inline ones. Those missing any of these can get them through the declaration of these properties in the cascading style sheets.

    <ul  id="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>

With this in mind, we can bring some tags to become their own container instead of relying on an extra tag. This is the case with our basic code where we can directly make use of the containing UL tag to hold the rest of the elements, thus making the use of the holding DIV unnecessary. One tag won! This can be done on a lot of tags such as FORM or even SPAN (if there is a use to it…).