Digital Web Magazine

The web professional's online magazine of choice.

Separating behavior and structure : Comments

By Peter-Paul Koch

April 14, 2004


Emiliano Ruggeri

May 14, 2004 5:18 AM

I read the article and implemented the concepts on my site.Separating behavior from structure has made my site more accessible.It works now even if Javascript is disabled and CSS is not supported. The only thing I`m not sure about is if using “class” that are not in the CSS to define links that do different things it`s “correct” or not.

Scott Sauyet

June 29, 2004 7:21 AM

Very nice article. This is clearly the directions the Web is going, but it’s getting there far too slowly for my taste.

Regarding Emilano Ruggeri’s question, I think it’s perfectly correct to use the “class” attribute for attaching Javascript behavior to element. The “class” element is defined in (X)HTML, not in CSS or Javascript; it is no more meant for attaching presentational attributes than for attaching behavioral ones.


July 7, 2004 2:32 PM

I just wanted to say that I don’t think the color scheme used in the document was appropriate. The links and examples were hard to see against the background.

Saint Jude

August 20, 2004 6:48 AM

Good stuff, as usual.
There are a couple of issues I’d like to take up, but please excuse my neophytisms.

1. No.1 on my wishlist is for the standard XHMTL DTDs to include a couple of attributes that serve no purpose other than to give developers somewhere hang pieces of behavioural information. You can get by using ID and CLASS. Multiple classnames can help further, but a spare attribute or two would be nice.

We can use custom attributes for this, but, without creating custom DTDs, validation purists get a hot under the collar.

2. The page is “enhanced” onload. This brings up an issue that I’ve never fully resolved/understood.

If we are dealing with a page that has, say, a good few kB’s of images, then it may be a while before the onload is fired – sometimes the user may see the menu they want to mouseover within the first second.

The way around this could be to have a small script block at the bottom of the page that calls the initialising function. Enhancement begins before page load, but after the HTML has been parsed. Assuming that the rest of the scripting is linked externally, how can we be sure that the script file has loaded yet ?

Saint Jude

August 20, 2004 7:07 AM

Oh, I see:

greg strockbine

August 24, 2004 12:28 PM

I like the article and I agree with the concept of separating behavior from structure, but then I am a programmer. I work with designers who create html pages using Adobe Go-Live or Dreamweaver. Sometimes I have to edit these files. These tools, in my opinion, produce the worst rat’s nest of HTML ever. Yet the designers don’t have a clue and they would be lost without these tools.

My point or my question is are there enough people out there who care what the inside of a web page looks like and why should they?

Are there designers who create the html pages by hand?

As a programmer I’m looking to automate as much as I can, but my tools tend to be emacs, php and a templating engine like Smarty. My focus thus tends to be more on the clarity of the php program and the template. I’m also thinking more of dynamic, than static pages. I guess the principles you suggest can be applied to the template, but then I adopt the attitude of the designer using Go-Live, I don’t even want to look at the HTML that is produced.

Don’t get me wrong, I would love to work with people who care as much as the author does, but I tend to come across more people who believe that HTML code is inherently messy.

andrew maddox

February 4, 2005 1:59 PM


Liked the article. It was easy to understand and to implement.



Brad Neuberg

April 21, 2005 10:41 PM

I agree that the idea of seperating JavaScript onX handlers from HTML is nice, but in effect it can have a huge effect on performance, especially in Internet Explorer. For example, let’s say I have a page that is full of perhaps 50 elements that I want to apply JavaScript behavior to. If I don’t explicitly put the onX handlers onto these elements, I need to then traverse the entire DOM to find ones with a particular class, such as ‘addBehavior’. This can be very slow, and in IE will lead to the browser having a locked up feeling after the page has loaded. I have coded pages that seperated out JavaScript and HTML as you have suggested, and as a performance optimization have had to merge them back together, resulting in much greater performance. Until browsers can walk over the DOM better and retrieve only certain elements with certain class names I would not recommend this approach for pages with lots of elements that need dynamic behavior.


June 16, 2005 4:56 PM

OK, but how do you solve this in the case where there are no images defined in the HTML and they are coming from CSS instead? Is it possible to write a function that can make arrays of images and apply behavior functions, even if images are coming from CSS?

Norman Rasmussen

June 29, 2005 10:26 AM

I seriously suggest that you have a look at the Sliding Doors articles at A List Apart. Douglas does some serious work with CSS to make markup even cleaner.


August 21, 2005 12:42 PM

Abhi, that is my problem right now. When i have written a solution I will post it here, see also

Alexis Bellido

October 17, 2005 3:33 PM

Hi, great article Peter-Paul, maintaining clean XHTML (structure), separated from appearance (CSS) and behavior (Javascript) is certainly a needed step in the right direction, with so many discussions about Web 2.0 and AJAX I think it’s time for all of us, web developers, to start taking Javascript more seriously.

Sorry, comments are closed.

Media Temple

via Ad Packs