Through the 4 years I have been coding in HTML/XHTML and CSS I have picked up several techniques to make developing faster and more efficient. This post is to give you tips and tricks to develop more websites more efficiently and faster.

The very first and probably most important thing to do is separate the content from presentation. That is, XHTML from CSS. This not only makes the site load faster, it also makes it much easier to update the styles for every page linked to the style sheet, instead of having to through every page to update the same style.

A close second to the separating content and presentation is keeping your file structure organized. Having a directory specified for CSS that will contain all the CSS files you will use and the same for JavaScripts and images as well. This makes it easier to find things when you are looking for a certain file.

Naming IDs and classes with names that identify the content that will be in that element is a very good practice. This will help you when you go back through the code to change something or to modify the style of that element. Setting an images alt tag with a suitable and short, yet to the point message that will allow screen readers tell the user what the image is, and if the image file is improperly linked it will show as a place holder (in certain browsers).

I find a very important tool for long term code, is to use comments for everything. Comment a piece of CSS if it all refers to the entire page, or a certain section of the web site. Comment a portion of XHTML if there are several pieces like it in the document, to guarantee you know which piece you are dealing with.

If you should have an element inside of another element it is best to indent the next row down, such as
<div id=”first_box”>

<ul>This is second

<li>this is the third in the line</li>

</ul>

</div>

This shows the best way to deal with organizing the way things are nested. Open the next nested element tabbed over once, and close it out in the same manner.

In conclusion it is a good idea to make the most of the techniques I have offered. From commenting and naming every section of code, to organizing files and structure. I have found that over the years, this has been a very effective way to operate. Though this may not be the right way for you, I hope you can take from this post and apply it to your practice.