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
STYLEelement in the
BODYof the page, and some problems with
FORMtags in kooky places within tables, like between
- WebAlley – Web Publishing for Beginners
Using an HTML 3.2 DOCTYPE with HTML 4.0 attributes like
BGCOLORon table cells sure doesn’t help this site. However, even if the
DOCTYPEis changed and the page re-validated, there are problems with paragraph (
P) elements inside
&s inside a URL, missing
SCRIPTtag 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
FONTelements, and a couple of missing
ALTattributes 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 (
NOBR, the latter being proprietary to Netscape anyway) and plenty of block-level tags like
Pbeing wrapped in
SPAN. Lots of kiddie errors here, folks.
There are a large number of errors reported for this page. They appear to be due to the use of
FONTtags 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
ALTattributes 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.
Bad nesting of
FONTtags, 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)
SCRIPTelement’s src attribute and this won’t happen!). There are a few problems with attribute values like
size=-1that 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
FONTtags 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
ALTattributes, 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
FONTtag, which chokes the validator thereafter. There is also an
H3tag 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
ALTattributes for graphics and some problems with the syntax of the
SCRIPTtag. 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
ALTattributes, unquoted URLs in hyperlinks, and
BLINKtags. 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
TITLEtags 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
FONTtags 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
FONTtags and CSS, which is redundant. CSS-aware browsers don’t ignore the
FONTtag, 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
<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?
- 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
ALTattributes 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 (firstname.lastname@example.org) is the grumpy cow who does the HTML production for MacEdition.