Worst code ever
Robert Nyman is looking for examples of really ugly, invalid, broken code in Worst code you’ve ever seen?. Got something to show him? Did you write it yourself? That’s even better!
Just for fun I had a look through my old archived stuff from the nineties. It wasn’t quite as horrible as I was afraid it would be. But I did find this pretty piece of HTML:
<TR><TD COLSPAN=2 BGCOLOR=999999> </TD></TR><TR><TD BGCOLOR=999999 VALIGN=Top ALIGN=RIGHT WIDTH=8%><FONT SIZE=1 FACE="Geneva,Verdana,Arial"><B>Income</B> </FONT></TD><TD WIDTH=25% BGCOLOR=999999><FONT SIZE=1 FACE="Geneva,Verdana,Arial">
It goes on and on. Shame on me.
But I was wondering… what is the worst valid markup you have ever seen? I think valid code that blatantly disregards best practices is at least as insulting as invalid tag soup, so it would be interesting to see some examples.
Code posting tip: Indent each line in code blocks by four (4) spaces and you won’t have to escape < and >. Keep lines reasonably short to avoid clipping.
- Previous post: The Dutch accessibility law is awesome
- Next post: Validation alone is not enough
Subscribe / follow
Sponsors
Authentic Jobs
Job openings from Authentic Jobs
- Dev Ops Engineer @ MongoLab at The Sourcery (San Francisco, CA, Ca, US)
- Mobile/App Developer at Washington State University (Pullman, WA, Wa, US)
- Mobile Product Designer, Android at Etsy (Brooklyn, NY, Ne, US)
- Interactive Javascript Developer at Slice n Press (US, , US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost
Comments
The “best” code I’ve ever seen is a page I’ve been given to redesign recently. Let’s see:
or even better:
But the best part was a comment warning about the copyrights of the code and that any violations will be penalized… (source: www.investorsro.sk)
When I started at my current company using CSS was done solely as an easy way to set the font to 10pt Arial across the board in an easy way. I made a big push and people began to adopt, but when I run across stuff done as people were learning it I chuckle. I saw this the other day:
<!— replaced with CSS to be more XHTML —> <b style=”font-weight:normal;background-color:lemonchiffon>text to be strong</b>
I like this one from the ninetees that I did:
http://www.webdevout.net/testcases/weird-but-valid/test1.html
This uses a bunch of valid SGML features which are, in theory, enabled in HTML, but which aren’t supported by any major browser.
This is one of my favorites from several years ago:
<div class=”faux_hr” style=”width: 100%;”> </div>
I was new to this whole CSS thing, and it seemed like a good idea at the time.
Easily the worst code I’ve seen is any HTML outputted by Microsoft Word and then combined with code from a web-based WYSIWYG editor. We have a setup similar to that where I work. Since many of the site managers are novice web developers, they will just paste a Word document into the WYSIWYG editor without stripping any of the extraneous code out.
Easily the most horrific code I’ve ever seen in my entire life (though Frontpage give it a run for its money).
It seems that all of the examples so far (with the exception of the mail link) is just old html code. I wouldn’t say it was bad code, or bad design, it’s just the way the code was written. Of course, now we can look back on it and think “thank goodness for CSS and modern browsers”, but we really had no other way of coding a page. Disagree?
I had to use this layout on something else for these people just today. Took me a few hours to dig through all the extraneous html, head, and body elements, improperly nested elements, and (the old favorite) font elements consisting of nothing but non-breaking spaces.
calgaryhealthregion.ca parking
Just check out the source. You won’t be disappointed (especially if you scroll all the way to the bottom).
I’ve seen a lot of code obviously written by people who have heard that CSS layouts are better but clearly have no clue about why and how.
I found this code in the course maangement system we use at work:
(line breaks added) I hope that shows up okay. This code displays a header with a tiled image background, rounded corner on the left side, and two icons on the right side. There are 14 div’s in there!
I was also appalled to see the code of the new Toronto Star site, launched in December (?). CSS layout, but check out their css (scroll down for the worst part). They’ve got a really bad case of div and span-itis in the html too.
Another example I’ve had to deal with is forum software. Specifically vBulletin, which does validate (to xHTML transitional) but is full of a bajillion nested tables and class=”smallfont” everywhere. What a nightmare.
I have a blog post half written about this - you come across a lot of bad code when trying to write user stylesheets!
Darren, yes it is truly horrible to have to rework Word or Frontpage HTML output.
Writing tables and inline styling in the days of IE4 and Netscape 4 was a matter of context. It’s easy to deride now, but such code reflects what one could achieve with the browsers at the time. Support for css-based layout was not very consistent and there was not a general awareness of standards like there is today. Perhaps ‘worst code’ would be better as ‘worst case current implementations’ in the current climate.
Darren and Jakob… my current project actually came about as a result of the horrific job Frontpage does. A major corporation has been doing all their web updates with FrontPage, and a lot of it was cut-and-pasted directly from Office. I was brought in to clean it up and (thank the god of your choice) convert it to standards.
To show you all the worst semi-valid code ever, all I’d have to do would be to copy-and-paste some of the old code that I’m working on right now. But… I’m legally forbidden to do so.
I’ve seen worse… ever “View SOurce” while surfing MySpace?
OK, so this is maybe not CODE…
I have the pleasure of working with Product Managers who feel that “More” (verbiage) is always better. This gets my vote for worst list-item rewrite:
My original: Select from 1 to 11 years of historical data.
PM Rewrite: Create your report from the 11 years of history that are currently available. You define the number of years required in the report.
I love my job.
Check out the source of Walmart’s new online video rental: http://mediadownloads.walmart.com
Some funny examples…
1) first and foremost:
2) then on every A tag, have style and events:
3) links?
4) Client-side TODOs:
5) DB Table names in html:
6) seemingly endless DIV and TABLE nesting:
7) lots of empty containers (or filled with BR):
8) ginormous z-indexes:
9) a DOCTYPE out of the blue:
10) 296 validation errors: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmediadownloads.walmart.com%2Fmmce%2Fjsp%2FstoreHome.jsp
11) at least they care about the visually impaired:
They put that on line #8380 in their HTML source.
I’m sure there is much more too, but that ought to be enough to make most web devs cringe and/or throw up.
Taken from http://www.kmu.gov.ua/control/en
oops, i missed the “valid markup” part
Wait! This is much better than that last URL I posted (just found this one):
When checking presumtive customers websites I see a lot of things. I usually check a customers website with Firefox and javascript “off” to get a first picture of the accessability of it. My worst case is a website that didnt work at all but in IE. The reason was that in a very complex code they had forgot two (kinda important) tags:
The most stupid thing is when people have things like: div class=”VeryBigHeaderIndeed” div class=”middleBigSizeofHeader” div class=”minorSizeHeaderText” instead of h1 h2 h3
I’m ashamed to admit it, but I actually nested tables within tables (sometimes within tables) just so that I could create what today would be “border: 1px solid #0C0;”
there is a well known example of totally compilant markup http://www.dustindiaz.com/totally-compliant-markup/
I keep it in my bookmarks trying not to follow :D
Swedish kanal 5 has some pretty interesting stuff on the subsites for each of their programs, where every one seems to aspire for the ugly code trophy.
One example..
Another one..
Another one. This td tag is repeated 20 times or so… notice the wonderful “langueage” attribute.
and it just goes on and on. brilliant.
I guess I’ll vote for Emil’s code in one of his blog entries ;)
The developers at my soon-to-be-ex place of employment came up with this once:
Hrm, I think my markup overflowed…
I like that one from Nicolas Sarkozy, candidate to the French national elections.
And te whole page is valid !
Here’s one from a few days ago: Attack of the nbsp
Is this geek humor at it’s best? I really do think so and I love it!
Must say that many of the above mentioned examples where everyday stuff at our site until recent years, back in the days we actually allowed people writing their own HTML and…yea…that was…not so good :) The masses just can’t handle it! Which in some way is a kind of defeat for HTML i guess…
And about all of these that people tend to use. I don’t even know how to actually do that i, for example, dreamweaver without hardcoding it….it’s kinda funny how users find their ways sometimes…
And then there’s Microsoft’s website where the entirety of their code is on one, count it, one line, wherein you will find (many times) unclosed and <br> tags.
And…..duh duh duu-u-uh….24 validation errors.
Not particularly surprising.
OMG! i just did a & n b s p ;!!
kill me know! i mean, what’s next! Will I start using the BLINK-tag aswell??
Here’s something I made (still in my portfolio) that I posted a link to on Robert’s Talk. Not the world’s worst, there’s no doubt, but it is pretty bad — tables for layout, all content printed with JS, completely and utterly inaccessible — but I realized it is actually valid so here you go Roger :-)
One of my favourites from the 90’s is:
But i didn’t do them for long, then started with:
Up till then I’ve heard about H1-tag and his smaller siblings but didn’t know better, so I continued for a while before reading som blogg or article several years ago about standards and the true power of CSS (and not just CSS for making cool hover-links).
A funny anekdote: When i started my webdeveloper-course 1.5 years ago (have about half year left), one of my teacher tried to brag and impress by saying “I try to do everything with CSS” and i told him that I’ve done that for years. Another example student teaching the teacher, LOL. Seems like a like we have a lot to do to spread the Word.
Hmm… my code disappeared… >(
..which is straight from the Bearshare FAQ (i used to work for the place but it’s gone downhill since then). They haven’t fixed those broken links on that page in the 8 months since I first noticed they did that.
I was going to write a post on this one, but Stop the Crops has valid HTML that isn’t really very good.
I don’t have the piece of code handy so I can’t copy-paste it here, so I’ll just try to describe how it worked. The language is VBScript.
Our company has a work order system where the first number is based on the year in which the order is entered, so the code first checks what the highest work order number is in the database and compares the left-most digit against the right-most digit of the current year which is obtained by:
If the numbers are different, we take the right-most digit of the current year and multiply by 10000 to get the next work order number. If the numbers DO match, we need to increment the last work order number by 1. Except, for some reason, I didn’t realize that’s all I was doing at the time, so instead of:
I wrote this awesome piece of code.
The code has since been changed to the simpler version above, and we’re in the process of moving away from Hungarian notation. The block of code also got moved to a function because it was duplicated in three other places. When I started writing that application, I was very anti-OOP, wasn’t concerned about the readability of my code, and in a big rush to get the app done because scope creep was horrendous. I was very anti-documentation too, and so was the company; a deadly combination. I’m a little older and a little wiser now. I wrote a code style guide and much of the code has been revamped. Still a lot to do (declare all variables explicitly, more documentation), but we have to work on new projects too.
I can probably create some pretty awful, and valid, HTML/CSS code whenever I like - or have to. However, if I can’t make myself go far enough, then I could always use sitegrinder.
Thanks for all the nice examples so far. The Web sure is a mess.
I have fixed a few comments that weren’t displaying correctly, so I’ll repeat a few code posting tips here:
Thanks!
This is a fragment of www.cartecapitalia.it. The homepage is made by >1300 lines of html code !!!! and this is a fragment: note the number of nested tables!
I work as the lead user interface designer here in Capitalia (an italian banking group) and this site is cms driven (via Vignette StoryServer). Vignette build a grid made of tables when ever you want to make a new site or add any kind of content in a page. Even if you put an image via the interface, the image is wrapped in a table!!! Do you know how much Vignette costs? It is absurd, the worst product i know. Anyway, this site was built before i came here and actually we are building a new site with web standards and believe me, Vignette isn’t made to make standard compliant website. But we are at a good point, we modified every java class in wich Vignette uses tables and put divs instead. It is a hardwork but we will reach the goal ;-)
As sson as we reach a stable version i’ll post here the results. Ciao GC
for some reason, the code is so invalid that i can’t paste here!!
Just to make more space between a horizontal rule (hr) and text before that HR, I placed a few div’s with within them… I even see now that there is no closing tag for the first div.
code is from website of my basketball club: http://www.bvpenta.nl
Written at the end of last year (this code is still live), I found this recently. I’ve never seen a more shining example of where a definition list should be used, yet this nubcake went and used a deprecated tag, which is inline by default, and then set it as a block element! OMG!
1985 just called, they want their code back!
pretty much any google built site is bad
I recently received some work that we’d contracted to an external company. There was a table of information… made out of divs.
Because, y’know, tables are bad.
From the Eurosport website, really tableless website (yes, really : more than 230 Divs on the homepage).
Some funny parts :
Really useless
They like Divs (with background-image)
A title (classic)
Spacing images are dead, now use spacing Divs
I almost forgot… I recently decided to redo the site for my dad’s consulting business. I haven’t touched it since I originally did it about four or five years ago, WAY before I found out about standards and CSS and all that fun stuff. It… was a disaster. I almost gagged when I saw what I had to redo.
here’s a sample of what I was using for just headings:
and for just plain textual paragraphs:
the main navigation was so hideous I dare not repeat it here. Tables, spacer divs, ridiculous javascript mouseovers…. it was bad.
I rarely find valid mark-up on web-sites, thanks to the fact that almost none of it is well-formed. Practically nobody out there seems to escape ampersands. Ever.
I though of posting code, but, why embarass oneself. I will say this though, where I am at now (a gov’t job) a previous development team actually has javascript and divs rendering above the tag and in some instances multiple tags. this among a whole host of other issues.
The real kicker is someone at some point said this was Bobby approved, sigh.
I’ll just give you the URL, have a look at the source code yourself! The kicker is that they emailed me offering to “optimise” my websites for “improved search engine results”. LOL, I guess some people drink their own kool-aid.
This is no Spam. Just a devoted reader of: http://thedailywtf.com/
A daily display of the shittiest codes on earth. Sometimes also HTML. You won’t find better stories than these ;)
Check this url, the company says they are technical documentation and xml pros.
Had to go to the wayback machine to find that piece, not that bad, but back then it was all one clump of that stuff. Phew. :)
To see the worst code ever just take a look at the JavaScript+CSS combination that is created by the content management system “DotNetNuke”, so-called “best ASP based CMS available”. It’s horrible, really horrible, let alone the markup itself as it even today doesn’t support other DocTypes than hardcoded HTML 4.01.
Ever seen code produced by the Microsoft SharePoint Portal Server? It truly proves your earlier post on Bill Gates and Web standards.
Oh dear - Christopher, did you have to suggest the Way Back Machine? Just go back and look at any government site from the mid 90’s and cry yourself to sleep …
; )
This is from a site I did back in 2002; it’s not bad as such, just confused:
I was learning table-less layouts at the time, and was using this weird mix of external and inline styles as well as presentational markup.
<—Generated by Dreamweaver—>
I love bashing the big boys - my personal favourite is Oracle, despite constantly banging on about standards, they hardly ever comply. This Site>>
http://www.oracle.com/webapps/dialogue/dlgpage.jsp?pext=Y&pdlg_id=5338550&src=4814558&Act=12&sckw=NA05060047C1.GCM.7008.SLBA.Oracle.br
Has no doctype, just randomly thrown in etc... well done boys!
That should read>>
I have a good example, but wasn’t able to post my code. Basically, you can see at http://renaissance-salon.com what I am referring to.
GoLive tags, JS library linked from hard drive, redirect therefore doesn’t work. Not only that, but it requires a huge library to do a simple redirect.
Take a look at the code generated by “standards-compliant” forum package Vanilla, eg. http://lussumo.com/community/
Tables bad, lists good! You’ve probably never seen non-semantic use of lists like this before. Best viewed in Lynx for full effect.
Our company contracted out some web design work, as I have all the artistic sense of, well, a developer. This is a sample of what they came back with:
The purpose of this code was, if I recall correctly, to put some dotted lines on the edge of a table. It has a happy ending though, I was able to convert him to CSS. Now instead of pages like this one they makes pages like this one. Unfortunately semantics didn’t quite catch on with them, but that’s life.
I think I did a lot of ugly stuff myself, back in the mid 90s, will have to look into this later.
But actually, I’m helping a friend to set up a business and we are using xt:Commerce as the shopping platform. If you want to know who’s the master of nested tables, here’s the answer:
And they want you to pay a 98 Euro sponsoring fee in order to get these gems…
If you’ve got another 100 bucks to spend, you can purchase one of these ‘CSS-Templates’ in order to get stuff like this:
If you’re keen on getting rude answers by the author, ask for -Tags for headlines and lists for navigation. Or have fun with those already offered:
Last one for now:
I wrote about this lately (so if you’re familiar with german, check out my weblog) and I think that markup like the one above offered as ‘modern layout’ and done by guys who’ve heard about CSS being ‘good’ and tables being ‘bad’ but who don’t get the point on CSS and semantic at all is at least as worse as offering table-based layout in 2k7…
here’s one from our art dept
I guess everything is a “process” to become what we have now, and it won’t stop. Web standard become a trends for everyone.
I have to agree with Arne in Comment #52. DotNetNuke spits out the most atrocious code I have seen since Word 97. They just won’t break away from their own proprietary inline style references and bloated code with tons of empty containers. It’s so ugly, I’m almost afraid to share it. Mso references have been my nemesis for a decade! Check this out:
Sorry I mis-read your question, Roger. The page I took the DotNetNuke code from does not validate to HTML 4.0 Transitional — in fact, it has 519 errors. I think you have a good point — I’m just so used to seeing such bad code that ANYTHING that validates looks good to me nowadays.
I did a little bit of research on the validity of a random sample of web pages a few years back. I think my “favourite” page from the sample was http://applyresults.about.com/bkey.htm. At the time it was fetched it contained well over 2,000 occurrences of <img width=”1” height=”1”> in amongst a massive jumble of tables, font tags and so on. As of today it still looks pretty much the same. Though I think it has slightly fewer img tags now. Hooray for progress.
I also found a page that generated 3,455 errors when I tried to validate it. Ouch.
View source of Intelligent Netware - a hideous mess of tables and divs. It is some wierd website generating program they created. Scary thing is they have a lot of clients using the program! They also use a lot of keyword stuffing. Example code:
There’s a great example from Emil Stenström of a page with, ahem, mildly interesting CSS, but HTML exclusively constructed using the
<blink>tag. Astonishing!My own site was the very first i created when learning the basics of HTML. It’s in need of a major re-write, a classic case of the cobbler’s shoes.
But hey, at least I learned about using valid HTML 4.01 Strict and using CSS for styling as much as possible. I can relate entirely to the commonly heard “I only followed what was said in tutorials” - the first ones I read were pretty bad.
I have been writing my HTML code by hand since 1996 and not actually step on the Xhtml train or any kind of standardization until one year ago. I argued with many new developers and I didnt give up that TABLE was the main issue to make websites… today i have learned a lot about CSS and XHTML and im surpriced how stubborn a man can be. I was also warned by some german programmer that XHTML is a bad bad choice, its slows down the servers and loading of websites… i was really scared until i was looking at this persons coding, in FRONTPAGE…
Mama mia, I decided to find out the best solution myself and its very interesting to have every day a lesson…
Now im trying really hard to read as much i can, buying books and learn more and more…
this is maybe a hint of his faster than XHTML does example..
Its pity how stubborn people can be…
Check http://www.davidcarsondesign.com/ ^_^
All JavaScript and CSS in the header, but more importantly, they have repeated 37 times “font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;” ^_^; (among a number of other properties).
… But best of all, they still use table design, they still use many ugly presentational markup… and the result is hideous, very basic, and could be done, the same, with only a few lines of markup and CSS ^_^; (and it could be done far better, without much more code…).
An example of ugly code from the page:
(this kind of things is repeated all over, with paragraphs and blockquotes…)
I guess it was done by some WYSIWYG editor… maybe reusing an older version of the page, built with an editor which did not support CSS… (or the WYSIWYG editor is simply mixing CSS and presentational markup, because it is not advanced enough…).
I’m late to the party but I had an example that I thought would be worth the note. It’s like Darren’s point. Rather than post the whole chunk of HTML into the comment box and take up more space than appropriate I’ll just give a link to the article I wrote about it. It’s an example of what happens when you put Word content into Macromedia’s Contribute.
The worst code I have seen is on this site: http://www.kfmwebdesign.de/andre/euerma/
The guy was in my school-class and he was in a “Webdesign Group” in school. Oh man. The only thing they learned is some ASP.net but they never learned the elements or CSS. :/
Simply look the source-code of all the frames (and the main frame) eek
Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.