Don’t use Javascript to hide bad markup | Comments (13)
Posted in Code on 30th March 2006, 7:30 pm by Stuart
In a recent post on 456 Berea Street, Jeff Croft made a very valid comment suggesting that using JavaScript to create invalid markup was no better than writing invalid markup in the first place. This is something I totally agree with. The rising popularity of JavaScript following the buzz surrounding by Ajax has meant more and more sites are using javascript more fully, but it’s important that developers don’t get sloppy just because modifications to the document aren’t visible in the source.
Using JavaScript to add non-semantic markup
In my opinion JavaScript shouldn’t be used as a means to hide bad code from the source. This includes using JavaScript as a way of hiding both invalid or non-semantic markup. In his re-design of Vivabit I think Patrick Griffiths made the right decision in not using JavaScript to add in the extra markup he needed to make his elastic design with all of it’s rounded corners work.
As an alternative example the octopus engine script uses 9 divs to give the visual effect of the rounded corners and drop shadows. Whilst it’s visually appealing, is this the best use of scripting? Does the fact that the ‘real’ markup is clean mean it’s ok to add a ton of extra markup through JavaScript for CSS hooks?
Using JavaScript to add invalid markup
Another thing to avoid would be using JavaScript to add invalid markup so that your site still passes validation. Developers can use this cheat as it’s only the actual source and not the rendered source that is validated. Examples of this would be using JavaScript to write flash objects into a page or any kind of proprietary code just so that your site validates.
My view is, if you don’t feel comfortable putting it in your markup then don’t do it with JavaScript. What’s your point of view?
NB: If you’re reading this and you don’t know how to view source as rendered by the browser including any changes JavaScript made to the document, then the following two Firefox extensions will come in very handy.
Do you really think what the Octopus Engine deposits on your page is “visually appealing”?
As for the Octopus engine being visually appealing, that’s subjective. I was being positive
Note: You can also use “View Selection Source” in Firefox when drag-selecting content in the browser window.
For some reason, this shows rendered source as well - which kind of does away with the need for the extensions (although they’re handy for other stuff)!
Yes “View Selection Source” (Found in the right click (hold down Ctrl on Mac) context menu) does work for rendered source but it very much depends on your selection.
For example if you go to the Octopus engine example and select the text from only one of the boxes it will not show the extra div’s that are added by javascript. This kind of makes sense as you can’t select anything that isn’t text. If you select more than the text of one box you will start to see the rendered source.
I didn’t realize that “View Selection Source” did that. Very handy!
I wouldn’t totally condemn adding source code through Javascript–in fact, it’s a rather ingenious way to get the appearance you want out of your site while we all wait for browsers and standards to catch up. One day you won’t need 4 to 8 extra divs to get pretty rounded corners. And when that day arrives, you simply remove the extra code from your JS.
I do agree, however, that there are many instances when this method can be abused, such as including invalid code.
So including valid, but not semantically necessary, markup is ok in my book, but including invalid markup is no better than putting it right in the source.
@Mike: I’ll agree to disagree with you on your first point ;-). It’s still good to hear differing views on this subject.
For me I can’t see why anyone would decide to use JavaScript to obscure non-semantic markup. If you make the design decision to add non-semantic markup for whatever reason then you should stand by it and not need to hide it away.
There’s a couple reasons why I can think of to use Javascript for rounded corners: A <10k script may be far more efficient than the images, HTML and CSS required to pull off multiple rounded corners. Yet you’d still have the benefits of a really clean source for redesigns.
There’s no hard-and-fast rules on this. The important lesson is to evaluate the best solution for the situation.
There may be other non-markup related reasons to use javascript to write Flash objects to a page - for example, doing javascript detection to check the browser has Flash installed and substitute an image (or something) if they don’t.
@Paul and Jonathan: You are both right and make good points. The point I was making was that if the sole purpose of using javascript is to sweep either non-semantic or invalid markup under the carpet then this is wrong.
I do accept that there are justified reasons for using JavaScript in this way if it provides additional benefits or functionality.
one can hide their content using java script,but this method should be avoid because your web site may get penalty.
I’m making this post a year and a half after the original, but.. I completely disagree with this article. What is the purpose of semantic code and validation? For accessibility and backward compatibility.
It makes perfect sense to add extra features with JavaScript, whether or not it’s “valid markup,” if it will gracefully be disregarded on a non-compliant browser. If, shedding the JavaScript, the markup that will be rendered is semantic and contains all the necessary content for the user of a screen reader, mobile browser, or Lynx browser to get the info they need… by all means, make it cooler for people using browsers that can handle the JS!
@Kyle: Thanks for your comment but you’ve totally missed the point. I’m totally in favour of using javascript to enhance a page and I’m also well aware of the need to provide something that works for when JavaScript is available to the UA and when it isn’t.
What I am against is adding mark-up via JavaScript when the only point is to hide the markup that is just there to provide hooks for an effect. It’s totally pointless and that markup may as well be there in the first place. Also using spans which are sematically transparent you are not affecting the overall semantics of a document anyway.