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:

  1. <TR><TD COLSPAN=2 BGCOLOR=999999>&nbsp;</TD></TR>
  2. <TR><TD BGCOLOR=999999 VALIGN=Top ALIGN=RIGHT WIDTH=8%><FONT SIZE=1 FACE="Geneva,Verdana,Arial"><B>Income</B>&nbsp;</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.

Posted on February 14, 2007 in (X)HTML, Quicklinks

Comments

  1. The “best” code I’ve ever seen is a page I’ve been given to redesign recently. Let’s see:

    <B>mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</B><a href=index.php?id=mail>pufi@investorsro.sk</a>
    

    or even better:

    <TABLE WIDTH=100%><TD WIDTH=40%><a href=index.php?id=sale&no=195>
    <IMG SRC=img/_195.jpg border=1 bordercolor=white width=280></a></TD>
    

    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)

  2. 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>

  3. I like this one from the ninetees that I did:

    <span class="R1">Logga in</span>
    <br><br>
    
  4. 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.

  5. This is one of my favorites from several years ago:

    <div class=”faux_hr” style=”width: 100%;”>&nbsp;</div>

    I was new to this whole CSS thing, and it seemed like a good idea at the time.

  6. 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).

  7. 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?

  8. 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).

  9. 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:

    <div class="box nuggetTitleBox">
    <div class="box_tl"><div class="box_tr">
    <div class="box_top"></div></div></div>     
    <div class="box_left"><div class="box_right">
    <div class="box_middle">        
    <div class="minwidth"></div>    
    <div class="nuggetTitlebar">
    <div class="nuggetTitle" style="padding-right:50px">
       <a target="_self" id="lnkMyCourses">
       <div class="nuggetTitleIcon"></div>Courses</a> 
       </div>
    <div class="nuggetIcons">
       <a target="_self" href="(path)"><img src="(path).gif" alt="settings:  Courses" border="0" hspace="1" vspace="0" align="middle" class="nuggetSettingsIcon"></a>
       <a target="_self" href="(path)"><img src="(path).gif" alt="hide: Courses" border="0" hspace="1" vspace="0" align="middle" class="nuggetMinMaxIcon"></a>
    </div>
    </div>
    <div class="minwidth"></div>
    </div></div></div>      
    <div class="box_bl"><div class="box_br"><div class="box_bottom">
    </div></div></div>
    </div>
    

    (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!

  10. 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.

  11. 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.

  12. I’ve seen worse… ever “View SOurce” while surfing MySpace?

  13. 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.

  14. Check out the source of Walmart’s new online video rental: http://mediadownloads.walmart.com

    Some funny examples…

    1) first and foremost:

    <td><img src="../image/spacer.gif"
    

    2) then on every A tag, have style and events:

    <a href="register.jsp" style="cursor:pointer;color:white" 
    onmouseover="this.style.textDecoration='underline'" 
    onmouseout="this.style.textDecoration='none'">
    

    3) links?

    <b style="cursor:pointer;color:white" 
    onmouseover="this.style.textDecoration='underline'" 
    onmouseout="this.style.textDecoration='none'" 
    onclick="return quickChk();"> Cart</b>
    

    4) Client-side TODOs:

    <!-- TODO hide checkout/recalculate buttons when the shopping cart is empty -->
    

    5) DB Table names in html:

    <!-- Loop through ShippingGroups, then through CommerceItemRelationships to 
    display each Commerce Item. Place in form. -->
    

    6) seemingly endless DIV and TABLE nesting:

    <div class="popup_holder" id="sysValidationForInstall">
    <div class="roBox_top"></div>
    <div class="roBox_center">
        <table width="92%">
            <tr valign="top">
                <td width="80%"><div class="roTitle">System Validation</div></td>
    

    7) lots of empty containers (or filled with BR):

    <td class="email_popup_border" width="1"><img src="../image/spacer.gif" width="1" height="1" alt=""></td>
    <td colspan="2" width="100%" align="center" valign="middle">
    <div id="emsg" style="text-align:justify;padding-left:12px;padding-right:12px;padding-top:12px;">
    <br><br>    
    <br><br><br><br>
    </div>  
    </td>
    

    8) ginormous z-indexes:

    style="z-index:20000010000"
    

    9) a DOCTYPE out of the blue:

    <table width="92%">
            <tr valign="top">
                <td>
                    <div id='popbody' class="roText">                       
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    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:

    <img src="../image/spacer_footer.gif" width="1" height="1" border="0" 
    alt="The Walmart.com site includes Flash technology. To avoid interruption of software designed to aid visually-impaired people, please turn off your Flash player.">
    

    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.

  15. <map name="lang_select">
    ...
    <area shape="rect" href="control/en"coords="82,5,122,18"
    alt="English" onMouseOver="hide(0); lang_hover('en');
    change=false;" onMouseOut="change=true;
    setTimeout('lang_back()',500);">
    </map>
    

    Taken from http://www.kmu.gov.ua/control/en

  16. oops, i missed the “valid markup” part

  17. Wait! This is much better than that last URL I posted (just found this one):

    <B style="font-weight:normal">Reserved Parking Available...
    
  18. 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:

    <head></head> and <body></body>
    

    The most stupid thing is when people have things like: div class=”VeryBigHeaderIndeed” div class=”middleBigSizeofHeader” div class=”minorSizeHeaderText” instead of h1 h2 h3

  19. 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;”

  20. 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

  21. February 14, 2007 by Patrik Engborg

    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..

    <TR>
    <TD class=Heading1 vAlign=top width=123><SPAN class=Heading1><FONT color=#ffffff>Vad har hänt?</SPAN></FONT></TD>
    <TD vAlign=top width=19></TD>
    <TD vAlign=top width=123 height=3></TD>
    </TR>
    

    Another one..

    <SPAN class=Content><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <<STRONG><IMG src="/upload/Programsidor/OC/hr.gif" border=0 orgurl="/upload/Programsidor/OC/hr.gif"><BR><BR></STRONG>
    

    Another one. This td tag is repeated 20 times or so… notice the wonderful “langueage” attribute.

    <td>
    <script langueage="javascript">
    loadTopMenuOverImage( 2049 , '/SiteDefinition/20/TablaOver.gif' );
    </script>
    
    <a href="/Templates/TVListToday.aspx" onmouseover="topMenuSwitchOver( 2049 );" onmouseout="topMenuSwitchOff( 2049 );">
    <img name="TopMenu_2049" src="/SiteDefinition/20/TablaOff.gif" border="0"></a>
    </td>
    

    and it just goes on and on. brilliant.

  22. I guess I’ll vote for Emil’s code in one of his blog entries ;)

  23. The developers at my soon-to-be-ex place of employment came up with this once:

    <span name="errorMsg" class="error" id="errorMsg"><strong>
    <Font color="red">Please complete the following mandatory fields:
    <br /><ul>Password<br />Confirm your Password
    <br /></ul><hr /></Font></strong></span>
    
  24. Hrm, I think my markup overflowed…

  25. I like that one from Nicolas Sarkozy, candidate to the French national elections.

    <tr>
    <td width="10" style="height: 129px;"><img src="/templates/default/home/alllanguage/home_tvlist_border_left.jpg" alt="" border="0"></td>
    <td width="245" valign="top">
    <table width="245" cellpadding="0" cellspacing="0" border="0" class="normalText">
    <tr>
    <td colspan="2" style="height: 4px;"></td>
    </tr>
    <tr>
    <td width="73" align="left" valign="top" style="padding: 0 0 0 20px;
    color:#0A60C2; font-weight:bold;">13-02-07 :</td>
    <td align="left" valign="top" style="padding: 0 5px 0 0;">
    <a style="text-decoration:none; color:#0A60C2;"
    href="http://www.sarkozy.fr/video/index.php?intVideoId=386&intChannelId=2">
    Nicolas Sarkozy aux Bains Douches à la …</a></td>
    </tr>
    <tr>
    <td width="73" align="left" valign="top" style="padding: 0 0 0 20px;
    color:#0A60C2; font-weight:bold;">14-02-07 :</td>
    <td align="left" valign="top" style="padding: 0 5px 0 0;">
    <a style="text-decoration:none; color:#0A60C2;" href="http://www.sarkozy.fr/video/index.php?
    intVideoId=385&intChannelId=20">Impressions sur la visite de Nicolas …</a></td>
    </tr>
    <tr>
    <td width="73" align="left" valign="top" style="padding: 0 0 0 20px;
    color:#0A60C2; font-weight:bold;">14-02-07 :</td>
    <td align="left" valign="top" style="padding: 0 5px 0 0;">
    <a style="text-decoration:none; color:#0A60C2;" href="http://www.sarkozy.fr/video/index.php?
    intVideoId=384&intChannelId=20">Passage au stand des étudiants à la …</a></td>
    </tr>
    <tr>
    <td width="73" align="left" valign="top" style="padding: 0 0 0 20px;
    color:#0A60C2; font-weight:bold;">14-02-07 :</td>
    <td align="left" valign="top" style="padding: 0 5px 0 0;">
    <a style="text-decoration:none; color:#0A60C2;"
    href="http://www.sarkozy.fr/video/index.php?intVideoId=383&intChannelId=2">
    Eric Woerth : endettement et …</a></td>
    </tr>
    <tr>
    <td width="73" align="left" valign="top" style="padding: 0 0 0 20px;
    color:#0A60C2; font-weight:bold;">14-02-07 :</td>
    <td align="left" valign="top" style="padding: 0 5px 0 0;">
    <a style="text-decoration:none; color:#0A60C2;"
    href="http://www.sarkozy.fr/video/index.php?intVideoId=382&intChannelId=18">
    Eric Woerth: Focus économique sur le …</a></td>
    </tr>
    </table>
    </td>
    <td width="10" align="left">
    <img src="/templates/default/home/alllanguage/home_tvlist_border_right.jpg" alt="" border="0">
    </td>
    </tr>
    

    And te whole page is valid !

  26. Here’s one from a few days ago: Attack of the nbsp

  27. 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 &nbsp; 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…

  28. February 14, 2007 by purplechica

    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.

  29. 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??

  30. 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 :-)

  31. One of my favourites from the 90’s is:

    <p><p><font color="red" face="Verdana, Arial, Helevetica"
    size="3"><b>Headline</b></font></p></p>
    

    But i didn’t do them for long, then started with:

    <p><p class="page_headline">Headline</p></p>
    

    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.

  32. February 15, 2007 by Andreas Rydberg

    Hmm… my code disappeared… >(

  33. <a name="#1">Is Bearshare 6 free?</a>
    

    ..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.

  34. I was going to write a post on this one, but Stop the Crops has valid HTML that isn’t really very good.

  35. 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:

    Right(Year(Now()), 1)
    

    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:

    intNext = intPrevious + 1
    

    I wrote this awesome piece of code.

    intNext = Right(Year(Now()), 1) * 10000 + _
    (intPrevious - (Left(intPrevious, 1) * 10000) + 1
    

    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.

  36. 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.

  37. February 15, 2007 by Roger Johansson (Author comment)

    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:

    • Use 4 spaces to indent each line of code. Markdown will take care of the rest for you.
    • Make lines short to prevent them from being clipped.
    • Please remove tabs and other indentation except for the 4 spaces at the start of each line. This is also to keep your code from being clipped.

    Thanks!

  38. 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!

    <table border="0" cellpadding="0" cellspacing="0" class="bckngdgrigio">
    <tr>
    <td valign="top" class="tabellamain"> 
    <table border="0" cellpadding="0" cellspacing="0">
    <tr> 
    <td class="bckngdgrigio" valign="top">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top">
    <table cellspacing="0" cellpadding="0" border="0">
    <tbody> <tr> <td>
    <img id="static_file~ ~" alt="Carta Capitalia" src="----" border="0" /></td> 
    <td id="descrizione-carta"> <h1>Capitalia Carta Click Giovani</h1> 
    <p>... non è solo una carta prepagata ricaricabile, è 100.000 volte meglio! 
    Dedicata ai giovani con meno di 26 anni, anche senza conto corrente.</p> 
    <p><a href="/---.jsp?vgnextoid=12a008746e8ec010VgnVCM100000030ff30aRCRD">
    Per saperne di più...</a></p> </td> </tr> </tbody> </table>        
    </td>
    <td width="21" valign="top">
    <img src="/immaginiCC/ombradx.gif" alt="Ombra" width="11" height="200">
    </td>
    <td valign="top">
    <table cellspacing="0" cellpadding="0" width="192" summary="Numero verde"
    etc...
    

    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

  39. for some reason, the code is so invalid that i can’t paste here!!

  40. 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.

    <DIV>
    <DIV align=center> </DIV>
    <DIV align=center> </DIV>
    <DIV align=center>
    <HR align=center width="100%" SIZE=0>
    </DIV>
    

    code is from website of my basketball club: http://www.bvpenta.nl

  41. 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!

    <p>
        <b><a>foo</a></b>
        bar
    </p>
    

    1985 just called, they want their code back!

  42. pretty much any google built site is bad

  43. 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.

  44. From the Eurosport website, really tableless website (yes, really : more than 230 Divs on the homepage).

    Some funny parts :

    1. Really useless

      div{
       padding:0px;
       margin:0px;
      }
      
    2. They like Divs (with background-image)

      <a href="/mp_32384.shtml">
       <div id="divLink_img" />
      </a>
      
    3. A title (classic)

      <div class="title">
      <b>My great title</b>
      </div>
      
    4. Spacing images are dead, now use spacing Divs

      <div class="separator"/>
      
  45. 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:

    <table width=100% bgcolor=cccccc cellspacing=0 cellpadding=0><tr><td>
    <p class="head">What can Benchmark Enterprises do for you?</p>
    </td></tr><tr><td height=2 bgcolor=aaaaaa></td></table>
    

    and for just plain textual paragraphs:

    <p class="text">
    

    the main navigation was so hideous I dare not repeat it here. Tables, spacer divs, ridiculous javascript mouseovers…. it was bad.

  46. 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.

  47. 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.

  48. 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.

  49. February 16, 2007 by Dennis

    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 ;)

  50. Check this url, the company says they are technical documentation and xml pros.

  51. </font></A><BR></B><BR><BR><BR></BODY>
    

    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. :)

  52. 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.

  53. Ever seen code produced by the Microsoft SharePoint Portal Server? It truly proves your earlier post on Bill Gates and Web standards.

  54. 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 …

  55. ; )

  56. This is from a site I did back in 2002; it’s not bad as such, just confused:

    <div style="width: 219px; border-bottom: 1px solid #eeeae0;
    padding-top: 9px; padding-bottom: 8px"><a href="/index.htm"
    class="head" style="font: bold 14px; color: #c50002">Link Title</a>
    <br><span class="text">Link Text</span></div>
    

    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.

  57. <—Generated by Dreamweaver—>

  58. 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!

  59. That should read>>

    Has no doctype, SCRIPT just randomly thrown in etc...
    
  60. 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.

  61. 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.

  62. 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:

    <tr>
    <td height="1">
    <table background="CCorner/images/dot_hor.gif" width="347" height="1" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="347" height="1">
    <img src="images/en/spacer.gif" width="1" height="1">
    </td>
    </tr>
    </table>
    </td>
    <td>
    <table background="CCorner/images/dot_vert.gif" width="1" height="22" border="0" cellpadding="0" cellspacing="0">
    <tr> 
    <td width="1" height="22">
    <img src="images/en/spacer.gif" width="1" height="1" alt="">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    

    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.

  63. 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:

    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="templates/xtc4/img/top_logo.jpg" alt="Demo: [...]" /></td>
    </tr>
    <tr>
    <td style="border-top: 1px solid; border-bottom: 1px solid; border-color: #C5C5C5;">
    <table width="100%"  border="0" cellpadding="2" cellspacing="0">
    <tr>
    <td class="main">
    <a href="http://www.xtc-demo.de" class="headerNavigation">Startseite</a> » 
    <a href="http://www.xtc-demo.de/index.php" class="headerNavigation">Katalog</a> » 
    <a href="http://www.xtc-demo.de/index.php/cat/c1_Category-1.html" class="headerNavigation">Category 1</a> » 
    <a href="http://www.xtc-demo.de/product_info.php/info/p1_Produkt-I.html" class="headerNavigation">10001</a>
    </td>
    <td align="right" class="main">
    <a href="http://www.xtc-demo.de/account.php">Ihr Konto</a> | 
    <a href="http://www.xtc-demo.de/shopping_cart.php">Warenkorb</a> | 
    <a href="http://www.xtc-demo.de/checkout_shipping.php">Kasse</a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <table width="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="navLeft" valign="top">
    <table width="184"  border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tr>
    <td class="infoBoxHeading">
    <table width="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="infoBoxHeading">Kategorien </td>
    <td></td>
    </tr>
    </table>
    </td>
    </tr>
    

    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:

    <div class="boxVarianteZweiHeader"><a href="">Mehr über...</a></div>
    <div class="boxVarianteZweiBody" style="margin-bottom:15px;">
    <img src="templates/GreenValvet/img/icon_arrow.jpg" alt="" />
    <a href="http://www.xtc-demo.de/shop_content.php/coID/1/content/Liefer--und-Versandkosten">Liefer- und Versandkosten</a><br />
    <img src="templates/GreenValvet/img/icon_arrow.jpg" alt="" />
    <a href="http://www.xtc-demo.de/shop_content.php/coID/2/content/Privatsphaere-und-Datenschutz">Privatsphäre und Datenschutz</a><br />
    <img src="templates/GreenValvet/img/icon_arrow.jpg" alt="" />
    <a href="http://www.xtc-demo.de/shop_content.php/coID/3/content/Unsere-AGB-s">Unsere AGB's</a><br />
    <img src="templates/GreenValvet/img/icon_arrow.jpg" alt="" />
    <a href="http://www.xtc-demo.de/shop_content.php/coID/4/content/Impressum">Impressum</a><br />
    <img src="templates/GreenValvet/img/icon_arrow.jpg" alt="" />
    <a href="http://www.xtc-demo.de/shop_content.php/coID/7/content/Kontakt">Kontakt</a><br />
    </div>
    

    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:

    <ul id="horizontalmenu">
    <li class="link"><a href="http://www.xtc-demo.de/shopping_cart.php">Warenkorb</a></li>
    <li><img src="templates/GreenValvet/img/menuspacer.gif" alt="Menabstand" width="2" height="36" style="border:none; padding:0px; margin:0px; line-height:0px; display:block;"/></li>
    <li class="link"><a href="http://www.xtc-demo.de/account.php">Ihr Konto</a></li>
    <li><img src="templates/GreenValvet/img/menuspacer.gif" alt="Menabstand" width="2" height="36" style="border:none; padding:0px; margin:0px; line-height:0px; display:block;"/></li>
    <li class="link"><a href="http://www.xtc-demo.de/checkout_shipping.php">Kasse</a></li>
    <li><img src="templates/GreenValvet/img/menuspacer.gif" alt="Menabstand" width="2" height="36" style="border:none; padding:0px; margin:0px; line-height:0px; display:block;"/></li>
    </ul>
    

    Last one for now:

    <div>
    <div style="float:left; padding-right:15px; display:table;">
    <a href="http://www.xtc-demo.de/product_info.php/info/p1_Produkt-I.html"><img src="images/product_images/thumbnail_images/1_0.jpg" alt="Produkt I" class="productImageBorder" /></a>
    </div>
    <div style="display:table;">
    <div style="padding:0px; margin:0px 0px 3px 0px; font-size:14px;"><strong>
    <a href="http://www.xtc-demo.de/product_info.php/info/p1_Produkt-I.html">Produkt I</a>
    </strong></div>
    <div style="padding:0px; margin:0px 0px 0px 0px; font-size:13px;">(Einfach ein Produkt)</div>
    <div style="padding:0px; margin:0px 0px 5px 0px;"><span style="font-size:14px;"><strong> ab   44,56 EUR</strong></span>
     <span style="font-size:11px;">(incl. 19 % UST exkl.
    <script language="javascript">document.write('<a href="javascript:newWin=void(window.open(\'http://www.xtc-demo.de/popup_content.php/coID/1\', \'popup\', \'toolbar=0, scrollbars=yes, resizable=yes, height=400, width=400\'))">Versandkosten</a>');</script>
    <noscript><a href="http://www.xtc-demo.de/popup_content.php/coID/1"target=_blank">Versandkosten</a></noscript>)</span>
    </div>
    <div style="padding:0px; margin:0px 0px 0px 0px;"><a href="http://www.xtc-demo.de/product_info.php/info/p1_Produkt-I.html">
    <img src="templates/GreenValvet/buttons/german/button_product_more.gif" alt="Details" border="0" /></a></div>
    </div>
    <div style="clear:both;"></div>
    </div>
    

    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…

  64. February 19, 2007 by Mary Ellen

    here’s one from our art dept

      <p align="center"><font size="-1" face="Arial, Helvetica, sans-serif">
    <font size="-2">
    <span class="footer">
    <font size="-2" face="Arial, Helvetica, sans-serif">
    <img src="/promail/images/grayrule.gif" width="600" height="5" alt="gray rule"></font></span></font></font></p>
            <p align="center">
    <font size="-1" face="Arial, Helvetica, sans-serif">
    <img src="/promail/images/sponsoropt.gif" width="388" height="59" alt="SPONSORSHIP OPTIONS"></font></p>
            <p><font face="Arial, Helvetica, sans-serif"><b>
    <font color="#003C77">Red 
          Carpet Level</font></b><font color="#003C77">—</font><b><font color="#003C77">$10,000 
          or more</font></b></font></p>
    
  65. I guess everything is a “process” to become what we have now, and it won’t stop. Web standard become a trends for everyone.

  66. 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:

    <!------ begin -------->
    <tr style="HEIGHT: 76.5pt;mso-yfti-irow:4">
    <td style="BORDER-RIGHT:#ece9d8;
    PADDING-RIGHT:5.4pt;
    BORDER-TOP:#ece9d8;
    PADDING-LEFT:5.4pt;
    PADDING-BOTTOM:0in;
    BORDER-LEFT:#ece9d8;
    WIDTH:6.25in;
    PADDING-TOP:0in;
    BORDER-BOTTOM:windowtext 1pt solid;
    HEIGHT:76.5pt;
    BACKGROUND-COLOR:transparent;
    mso-border-top-alt: solidwindowtext .5pt;
    mso-border-bottom-alt: solidwindowtext .5pt"
    vAlign=topwidth=600>
    <p class=MsoNormal style="MARGIN: 0in 0in 0pt 0.4in">
    <span style="FONT-SIZE: 10pt">
    <span style="mso-spacerun: yes">
    &nbsp; &nbsp;
    </span>
    Some Text Here
    <o:p>
    </o:p>
    </span>
    <strong style="mso-bidi-font-weight: normal">
    <em style="mso-bidi-font-style: normal">
    <span style="FONT-SIZE: 10pt; COLOR: green"> 
    </span>
    </em>
    </strong>
    </p>
    </td>
    </tr>
    <!------ end -------->
    
  67. 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.

  68. 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.

  69. 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:

    <DIV ID="DBStyleDefaultBackground">
    <IMG ID="DefaultBackground" Name="DefaultBackground" 
    Class="Normal" SRC="images/BackgroundINv6_01.jpg" 
    ALT="San Antonio web design, web hosting, web site design portfolio, 
    web marketing, San Antonio Texas web designer, Intelligent Netware, 
    Angelina Musik, Daniel Comp, MOMtrepreneurs, San Antonio Woman 
    Business Networking Expo" Width="352" Height="359" Border="0">
    
  70. March 4, 2007 by Jordan

    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!

  71. 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.

    • Lacking decent symantic markup
    • using line-breaks instead of unordered lists
    • using tables for layout
    • sloppy, inefficient CSS
    • using named anchors instead of an id attribute

    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.

  72. 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..

    <tr>
    <td height="1" valign="top" width="20" bgcolor="#DBDBE0">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" width="1" valign="top" bgcolor="#000000">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" valign="top" bgcolor="#000000" width="653">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" valign="top" bgcolor="#000000" width="653">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" valign="top" bgcolor="#000000" width="653">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" width="1" valign="top" bgcolor="#000000">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    <td height="1" valign="top" width="20" bgcolor="#DBDBE0">
    <img border="0" src="layout_images/seperator_1x1.gif" width="1" height="1">
    </td>
    </tr>
    

    Its pity how stubborn people can be…

  73. March 12, 2007 by Anonymous

    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:

    <p class="bx0"><span class="s"><i>
        [some content, with multiple <br>]
    </i></span></p>
    

    (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…).

  74. 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.

  75. May 12, 2007 by Chris V.

    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.