graphicmist

Long back people used to (they still, out of unawareness or laziness) write their HTML, CSS, Javascript code in single file. But soon they realized that the code they write can be divided into three fundamental layers:

• Content Layer – HTML
• Presentation Layer – CSS
• Behavior Layer – Javascript

Keeping  your code in three different layers is a good idea because it makes your code more readable, can easily maintain it in the long run,  reuse the code in other projects. One more reason is that people who visit your website may read content using different browsers, mobile and handheld devices, rss feeds so many time you may want to send only the content part leaving back the design and behaviour.

Content Layer – HTML

While writing the HTML code never forget the KISS principle (Keep It Simple, Silly). Never mix the HTML code with non-content information.

1
<p> <font color="red">To make sure your code is readable, keep all the layers seperate</font></p>

The old tags like <font>,<b>,<u>,<i> that describes how the content should look like when its displayed in the browser is a part of non-content information because controlling how your content should look like in browser must always be handled by the presentation layer i.e. CSS

Presentation Layer – CSS

The content of page should entirely be  in HTML and it styling should be specified in CSS code that is applied to the page. CSS can be used in three ways

Inline Style:

1
<p style="color:red;"> Hello </p>

Inline style messes your html code. So it is surely not the way go.

Embedded Style:

1
2
<style type="text/css">
3
.navigation{
4
color:red;
5
}
6
</style>
7

1
<link rel="stylesheet" href="style.css"/>

external surely is the real way to go. It keep your html and css separate and you can share your css code across many pages.

Behavior Layer- Javascript

Like CSS you can also use your javascript code inline, embedded and in external file.  Keeping your javascript in a separate file not only ties the behavior of your page in a separate file but also helps to reuse the same javascript for other pages too.

Unfortunately, even  many professional web developers doesn’t understand the importance and happiness associated with writing a semantic, clean code. Out of laziness one may not want to write a css and javascript code in a seperate file but it does benefit in a long run and nothing feels better than having a chilled beer after writing a quality code.

Happy Coding,
Cheers!!!