HTML Code Bloat - How to eliminate HTML code bloat from your web pages

2

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Enter your email address:

Never Spam

One of the biggest problems that I see in beginner web pages is the overwhelming use of erroneous code and HTML in their web pages.

Code bloat, as it is currently defined by Wikipedia, is the production of code that is perceived as unnecessarily long, slow, or otherwise wasteful of resources.

This can range from the use of excess meta information in the header to excess table tags and other HTML tags that are not really needed to get the desired layout or effect.

There are three main reasons why beginner web developers tend to have very bloated HTML markup.

1.) They use wysiwyg HTML editors that naturally inflate the code and make use of erroneous tags that the developer does not have the experience to remove or properly condense.
2.) They use tables, or excessive embedded tables to lay out a web page.
3.) They use inline style attributes, or embedded style sheets, rather than removing all style attributes to an external page.

I am going to look at each of these causes and discuss some possible solutions to the problem and ways to eliminate the HTML bloat from your site.

First and foremost, if you are currently using a wysiwyg HTML editor such as FrontPage, Dreamweaver, Golive, or Netobjects to create web pages, and you do not have a working knowledge of the HTML that you are producing, my recommendation to you is to buy a book on HTML and web design techniques. After you have learned a bit more about HTML comeback and continue with this tutorial.

Learning HTML is not as daunting as it may seem. A small amount of HTML knowledge will help you to identify and eliminate excess HTML markup from your pages, allowing your sites to become more search engine friendly, quicker loading, and easier to edit.

It is important to note that if you do not have a solid knowledge of how software generates code, then unnecessary and erroneous code will be produced, there is almost no exception to this; even with the prized Dreamweaver.

Due to the extent of HTML bloat and how much it varies from one wysiwyg HTML editor to another, I cannot go into detail on how to remove this specific bloat from your pages. If you are in desperate need of having your pages cleaned up, feel free to contact me to discuss what I can do for you.

For the second part of this post on the use of tables in your HTML, I will use the following list to demonstrate a variety of ways to build the same looking list. Of course, with a little HTML understanding you can easily translate this example into any similar list, or your entire web page. For this example I have turned on the border attribute to more easily show the table cells.

List:

Item One	Item Four
Item Two	Item Five
Item Three	Item Six

HTML:

<table width=”200″ border=”1″>
 <tr>
  <td width=”60%”>Item One</td>
  <td width=”40%”>Item Four</td>
 </tr>
 <tr>
  <td width=”60%”>Item Two</td>
  <td width=”40%”>Item Five</td>
 </tr>
 <tr>
  <td width=”60%”>Item Three</td>
  <td width=”40%”>Item Six</td>
 </tr>
</table>

The first thing to note in this example table is the excessive use of the width attributes. In a standard table (assuming that you have same number of cells in each row) each cell will take on the same width as the cell above it. Also, if your table has only two cells per row, you will only need to set the width of the table and the first cell. The second cell will take on the width of the remainder of the table space.

Note these changes in the following table example:

List:

Item One	Item Four
Item Two	Item Five
Item Three	Item Six

HTML:

<table width=”200″ border=”1″>
 <tr>
  <td width=”60%”>Item One</td>
  <td>Item Four</td>
 </tr>
 <tr>
  <td>Item Two</td>
  <td>Item Five</td>
 </tr>
 <tr>
  <td>Item Three</td>
  <td>Item Six</td>
 </tr>
</table>

To further condense this table, we should also eliminate the excessive use of <td> tags. In this example we put each element in a separate table cell. This is not only bad for the inflation of the HTML being used, but also because it makes the section very difficult to edit. If you were to add a new entry into the middle of the list, you would have to move all the table cells around to keep the same order.

Take a look at the next example to see how I have removed the un-needed table cells:

List:

Item One Item Two Item Three

Item Four Item Five Item Six

HTML:

<table width=”200″ border=”1″>
 <tr>
  <td width=”60%”>
   Item One <br>
   Item Two <br>
   Item Three <br>
  </td><td>
   Item Four <br>
   Item Five <br>
   Item Six <br>
  </td>
 </tr>
</table>

This final table is now much easier to edit, shorter more condensed HTML with less markup needed, and it will load faster and reduce the file size of your web page as a result.

Next I will show you how to get rid of the <table> tags all together and further condense the code. To do this, we will use <div> tags and styles rather than tables.

In HTML and XHTML, span and div tags are used to describe content that cannot be properly described by other, more semantic tags. Span and div are the only HTML and XHTML elements that carry no innate semantic meaning, besides the logical grouping of the enclosed elements.

To begin converting our example list into a table less list take a look at the following example:

List:

Item One
Item Two
Item Three

Item Four
Item Five
Item Six

HTML:

<div>
 <div>
  Item One
  Item Two
  Item Three
 </div>
 <div>
  Item Four
  Item Five
  Item Six
 </div>
</div>

You will see that I have started the conversion by replacing the <table> tags with <div> tags. I have surrounded the entire list with a div element, and then I surrounded each column of the list with their own div elements within the larger surrounding div. Now we must setup the column divs to lay next to each other by adding style attributes to the tags.

List:

Item One
Item Two
Item Three

Item Four
Item Five
Item Six

HTML:

<div style=”width: 200px;”>
 <div style=”width: 120px; float: left;”>
  Item One
  Item Two
  Item Three
 </div>
 <div style=”width: 80px; float: right;”>
  Item Four
  Item Five
  Item Six
 </div>
</div>

This now brings me to my finial thought about code bloat and HTML inflation, the unnecessary use of inline style attributes.

By using an external style sheet to remove the style attributes from the tags we can further simplify the HTML. Take a look at the final version of the example list where I have removed the inline styles and placed them into an external style sheet:

List:

Item One
Item Two
Item Three

Item Four
Item Five
Item Six

HTML:

<div id=”LW”>
 <div id=”LLW”>
  Item One
  Item Two
  Item Three
</div>
<div id=”RLW”>
  Item Four
  Item Five
  Item Six
 </div>
</div>

The final version of our example list above is now nearly as condensed and well formatted as it can be (aside from using <ul> or <dl> tags to order the list rather than <br> tags! But that will be left for another day!).

For more information on CSS driven web pages check these out!

As you can see, there are a number of ways to lay out the same list of data and some of these ways are far better than others. As a web developer, you should always aim to create the cleanest, least bloated code possible. Enjoy!