Before writing semantically correct (X)HTML and CSS code, you should think of separation of content, presentation and behavior. Reasons for this are numerous. Although it is possible to have all (X)HTML, CSS and JavaScript code in every web page you are serving, long time ago it has been adopted as best practice to separate these.

While HTML is necessary in order to have any content of the page, CSS is used to style the content and present it in a shape different from how the browser shows it by default. Without JavaScript all you have is a static web page in which there is no interaction between the user and the page.

The separation should be done in the following way

• content is in the main .html file
• presentation is in external .css file
• interaction is in external .js file

External files are referenced from within the main .html file.

As main reasons for separation I list the following:

• Performance - external .css and .js files will be cached by the browser after the first load, dramatically decreasing loading times of subsequent pages where those files are referenced, thus improving the user experience.
• Management - you know where to look for and place code, each layer for its own purpose.
• Maintenance - all the code is in one central location, applying all presentation and interaction code to all the web pages within a web site. If you need to change anything in the code, it is done in one central place.
• Reusability - the css and js code can be easily referenced and reused across the entire web site.

Without separation, the logic of css and js files would need to be rewritten in each and every page, hence multiplying work by many times. Any change in such a case becomes a nightmare.

To get a picture of what I was talking about, there is no better example that CSS Zen Garden, a web site where different designs for the same content are presented. This is done only by modifying the style sheets in .css files.

What’s in it for me?

If you are Internet user, you will have better experience as the pages would load much faster compared to the case without separation.

If you are a web developer, you have the chance to keep your sanity.

If you are a business owner, by making sure that your website is running with content, presentation and interaction separated ensures no leaking of bandwidth from the web server, less burden on the server, more satisfied customers (visitors of the website), easier management and maintenance of the website. All in all, it means higher return on investment (ROI).

If you are interested in further reading about separation of HTML/XHTML, CSS and JavaScript, explore the following articles:

The Three Layers of Web Design
Separating behavior and structure

Filed under: web design, web standards.