Crap code, layout headaches: Learning bad habits

27 November 2000

In my previous column, I criticised Web designers for writing invalid code and listed some common mistakes. Now, some of these mistakes might seem minor, and most browsers are designed to recover from them reasonably well. Therefore, some of these designers probably don’t even realise they are doing anything wrong.

But you’d expect the people who purport to teach HTML to others to get it right, wouldn’t you? Well, maybe not. I decided to find out if the myriad Web sites containing HTML tutorials are actually doing the right thing by readers and teaching them how to do it right. For this particular exercise, I took the first twenty tutorial sites from Google’s directory and put their front pages through the W3C Validator. Now, these aren’t necessarily the best-known of the tutorial sites, but given the way the Google search engine indexes things, they are the ones linked to most often. I conducted these tests on Sunday, November 12, so some of these pages may have changed for the better since then, and I can’t guarantee that these will still be the first twenty sites in Google’s directory when you read this article.

WebReference HTML with Style

WebReference is a well known site. You would expect them to know what they are doing. Still, we find &s in URLs, a STYLE element in the BODY of the page, and some problems with FONT and FORM tags in kooky places within tables, like between TR and TD tags.

WebAlley – Web Publishing for Beginners

Using an HTML 3.2 DOCTYPE with HTML 4.0 attributes like BGCOLOR on table cells sure doesn’t help this site. However, even if the DOCTYPE is changed and the page re-validated, there are problems with paragraph (P) elements inside FONT elements, &s inside a URL, missing ALT attributes in images and some problems with JavaScript SCRIPT tag syntax. Beginners are only going to be led astray by this “beginners’” site.

WebMonkey Teaching Tool

This page has quite a few problems with the syntax of SCRIPT tags, DIV and P elements inside FONT elements, and a couple of missing ALT attributes on the spacer GIFs (here’s a hint for the users of spacer GIFs: alt="" is legal!). There are also some problems with attributes not being wrapped in quotes when they should be, e.g. width=30%. WebMonkey is well respected; I was surprised to see these errors.

D.J. Quad’s Ultimate HTML Site

This redirects to http://www.wdvl.com/Quadzilla/index.htm and is still 404 Not Found. Not a lot of help. (As mentioned in an earlier column, though, the Web Developers’ Virtual Library, where this site is apparently meant to be hosted, usually gets their code right. The only validation problems they have are associated with the code used by their ad banner provider – hardly their fault.)

The Web Design Resource

As with WebMonkey, there are problems here with attributes not being wrapped in quotes when they should be, e.g. width=30%. There are improperly nested tags (DIV and NOBR, the latter being proprietary to Netscape anyway) and plenty of block-level tags like DIV and P being wrapped in FONT and SPAN. Lots of kiddie errors here, folks.

HTMLCenter

There are a large number of errors reported for this page. They appear to be due to the use of FONT tags surrounding block-level tags like tables and DIVs. A few errors arise from the use of proprietary attributes like “Leftmargin”. And every page in the site has an egregious typo in the tag defining the top of the main table: <TABLE border="0" bgcolor="#000000" cellspacing="0" cellpadding-"0" width="95%">

FlamingoLingo (now TopHosts Tutorials)

Amusing name, amusing errors. Proprietary Netscape SPACER tags, missing ALT attributes in images, URLs with unescaped &s in them, all abound. They left the <meta name="generator" content="Adobe GoLive 4"> tag in, which explains the multiple nested tables.

AAAHTML

Bad nesting of FONT tags, bad syntax for comment tags. And what this color specification is meant to do is anyone’s guess: <font size= 1 face= "arial, helvetica" color= 0000000>. Yes, that’s seven zeros, not six, with no # to indicate a RGB color directive. This has to be another of those hand-coders who only thought they knew what they were doing.

So, You Want to Make a Web Page (now at http://www.pagetutor.com/pagetutor/makapage/index.html)

To be fair, most of the errors reported on this page relate to the escaped URLs in its JavaScripts (stick them in separate files and use the SCRIPT element’s src attribute and this won’t happen!). There are a few problems with attribute values like size=-1 that should have quote marks but don’t. This site uses stylesheets, which is a good sign. But if you’re going to advocate the use of NotePad as an HTML editor, you should at least know what you’re doing.

Ben’s Planet

There are more nesting errors here than I can get my head around, mainly due to FONT tags around block-level tags. The “best viewed with IE at 800x600” button just demonstrates either an inability to design a flexible site, or that the author will sell his facade of professionalism for ad revenue. This site hasn’t been updated since February.

Alan’s HTML introduction

This one’s got the lot, with missing ALT attributes, unescaped &s in URLs, color directives not wrapped in quote marks, proprietary tags and bad nesting of table element tags. Sounds like this guy scored the royal flush of bad HTML.

BFree online HTML Tutorials

Everything’s wrapped in a FONT tag, which chokes the validator thereafter. There is also an H3 tag wrapped around a table, which isn’t allowed, and a bunch of unescaped &s in URLs, probably because of their banner ad provider. In comparison to some of the other sites here, this is one of the better ones.

At least everything is properly nested, but must we set our sights so low?

R35 edu

The report on this site is actually not too bad. There are a couple of missing ALT attributes for graphics and some problems with the syntax of the SCRIPT tag. These should be easy to fix. So why don’t they? Perhaps they don’t know how.

HTML Table Tutorial

Dating back to the days of HTML 3.0 (1996) despite the statement “This tutorial is – hopefully – an ongoing work”, its author starts with the warning “Caution: This Is Netscape Country”. He wasn’t wrong. There are missing ALT attributes, unquoted URLs in hyperlinks, and BLINK tags. I felt like it was 1995 all over again looking at this page. The owner should take it down or at least make it clear it exists for historical interest only.

Number 1 Web Resources

I don’t know how they managed this, but among other problems, there are META and TITLE tags in the body of the page. There are Dreamweaver-specific comments in this page; sounds like they need to read a Dreamweaver tutorial before they write an HTML tutorial.

Kev Judge’s How to Create a Web Page

Let this site be a lesson in why not to use FrontPage, even aside from the site management problems it engenders. For instance, what does color= # y y y y  mean? Your guess is as good as mine. Color directives are missing the # (and thus the quote marks), and URLs in hyperlinks are also missing their quote marks. I’m surprised those links work at all. And of course, we have the obligatory FONT tags wrapped around block-level tags.

Ron’s DTP/HTML tutorials

This would probably be okay if the author had used the HTML 4.0 DOCTYPE declaration instead of the <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> HTML 2.0 one. Then again, he uses both FONT tags and CSS, which is redundant. CSS-aware browsers don’t ignore the FONT tag, so the same style information is being set twice.

Homepage Goodies

All it says is “Closing Soon. Remove Links/Bookmarks.” and it’s still full of errors, mainly due to bad nesting. No wonder, and good riddance.

Internet Brothers’ TipTool

Missing ALTs, unescaped &s in URLs and some problems with JavaScript syntax. These are small errors, so easy to fix. What a shame they don’t fix them, and that the canned JavaScripts and ad banner code everyone seems to use are so problematic. Again, if you are going to use the tag <meta name="GENERATOR" content="Microsoft Notepad">, I’d expect to see correct markup. After all, isn’t that the boast of the text-editor-wielding Web author, that they know what they are doing, unlike those “amateurs” with the GUI Web editing packages?

Update: The authors of this site did get back to me, and I understand why they did what they did. Indeed, the JavaScripts and ampersand issues were the result of their advertising service insisting that affiliates use banner code exactly as provided. The advertising services should know better, and site authors should question providers that foist bad code on them.

SpunWeb’s Frame Tutorial

Even their redirection page has problems, such as having attributes without the necessary quotes. Their new page has the same problem, and some silly typos of missing >s to finish a tag, like this: <img vspace= 4 hspace= 6 src= "dot_clear.gif"<br> They have also forgotten the ALT attributes in images.

So there you have it, people. It’s bad enough that most designers put kiddie errors in their code, and that graphical Web design tools let them. Worse, many of the sites that purport to instruct others on how to do this stuff can’t get it right, either. The sad thing is so many of them could be cleaned up so easily. While some of the errors noted above are subtle – lots of people don’t know to escape &s in URLs and it’s not mentioned in many books or tutorial sites (hint: it’s “&”!) – some of the other problems are just obvious kiddie errors and typos. Everyone makes mistakes and typos every now and again; I’ve created a few here on MacEdition over the past several months. The difference is, I check my code using the available tools, and fix any errors I find (and if you find something wrong with a page on MacEdition, email me and I’ll fix it!). It’s not just a desire for code purity, it’s a useful sanity check against typos and other glitches.

Of course, the twenty cases listed above aren’t necessarily the best or the best-known sites. Nonetheless they’re the ones that Google users are going to head to first. Given the way Google organises its links, these sites presumably do get a lot of traffic and links from other sites, so they are hardly obscure ones, either.

Beginning Web authors deserve better resources than these.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition.

E-mail this story to a friend