Starting at The Beginning
I’m making this my first post because everything that follows will be built upon this principle. The idea here is that your HTML, CSS, and JavaScript should all live separately, in their own documents. In practice, this means not using the style attribute, <style> tags, event attributes (onclick, onmouseover, etc.), or <script> tags beyong linking to an external .js file.
Content
Your content is your (X)HTML markup. Semantic markup means using the correct tags to describe the content they hold. After all, the tags have meaning. A paragraph belongs in a <p> tag, an unordered list belongs in a <ul> tag, so on and so forth. It also means that your id and class attributes should also describe what type of content they hold, but we’ll get to that in a later post.
Let’s see and example:
<li><a class=”active” href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
Above you see an example of a site’s navigation. It’s marked up in a <ul> tag because that’s really what it is, a list of links. The id on the <ul> tag let’s you know what that <ul> tag is for, and the class on the <a> tag let’s you know that this link is currently active. No style or mouseover attributes, just markup the describes the content, and nothing more.
Presentation
Presentation refers to your CSS, how the site looks. All the visual information about a document is described here, from placement of sections to telling a piece of text to be blue. Let’s see what some CSS looks like:
position: absolute;
top: 20px;
right: 40px;
}
#navigation li {
display: inline;
padding: 0px 10px;
list-style: none;
}
#navigation a {
text-decoration: none;
text-transform: uppercase;
font: bold 11px/16px Arial, Helvetica, sans-serif;
color: #000;
}
#navigation a.active {
color: #FF0000;
text-decoration: underline;
}
Whew, quite a bit there. That will take our pretty boring HTML from before and apply some style to it. Placing it in the upper-right hand corner of the page (or any other relatively positioned container), make it display in a single line, and other small styling differences from the default styles the browser supplies.
Behavior
Behavior is your JavaScript, how your site acts when a user takes action. When something is clicked on or hovered over, JavaScript describes how that element, or another element on the page, reacts to that event. So, building on our HTML and CSS, some JavaScript may look like this:
$(“a”,”#navigation).click(function() {
$(“.active”,”#navigation).removeClass(“active”);
$(this).addClass(“active”);
return false;
});
});
If you don’t recognize that JavaScript, it’s because I’m using jQuery syntax. It’s my JavaScript framework of choice, and pretty much all the scripting you’ll see me do is done with jQuery.
So what is it doing? It’s taking all the <a> tags inside the <ul id=”navigation”> element and applying an event listener to them, saying that when that tag is clicked, to remove the “active” class from the element that currently has it, and add that class to the element that was just clicked. And, with the active class, comes the styling that we described earlier.
In this, we have written a navigation that completely utilizes the separation of content, presentation, and behavior.
Why Do This?
The largest benefit of doing this is that it makes your code easier to maintain. If you need to change the way something looks or acts, you do it in once CSS or JS file and not a dozen HTML files. It also makes things easier when a project has multiple developers, results in smaller file sizes and cleaner markup.
Another benefit is that more and more employers are demanding that their developers know how to do this. It is certainly possible to build a website marked up in tables with inline styles and scripts everywhere, but it’s certainly not going to impress anyone. This is the standard on which today’s websites are built, any other approach is outdated.