K guys, as of March 12th, xhtmlcoder is going to assess the entries so far to pick a winner, but feel free to keep the thread going. 
Greetings everyone
On behalf of our forum administrator HAWK, and the rest of SitePoint forum Staff, I personally (Robert Wellock) as your leading Competition Judge (JUDGEcoder) for this competition; fanfare, please.
Would like to inform you all that: Spot the Error 3: Calling all Sleuths! Has now been judged and we’d like to announce the:
COMPETITION PRIZE WINNER!
The competition prize is as follows:
1st prize - a SitePoint ebook of choice
The winning SPF member is as follows:
Well done Poes
We’ve had some good entries from five members with different types of skillset and the judging was pleasurable. I’d like to thank everyone on that has submitted a competition entry: @DaveMaxwell ; @Paul_O_B ; @Pullo ; @ronpat ; and @Stomme_poes ; (winner).
Things regarding semantics and valid markup were considered during the judging process as will be seen within my feedback plus observations of the competitors discussions and how they pulled together to help one another. There was a variety of strengths and weaknesses in all the entries so attention to detail mattered.
Again, I’d like to thank everyone that has submitted a competition entry and congratulate the winning member.
Alas Poes, the prize wasn’t a Golden Ticket granting the owner with passage into Willy Wonka’s factory and a lifetime supply of confectionery though it is the gift of knowledge, in the form of a SPF ebook.
The SPF staff, especially Dave regarding his dogged-determination did provide some good quality “SPF Staff Entries”. The other three are also to be commended for their efforts. Plus Ralph for doing a great intro…
I hope those who have competed fully enjoyed themselves and found the task “challenging” and have had as much fun as I have it’s the taking part that counts.
With luck maybe in the future we’ll run another ‘Spot the Error’ competition on a slightly different theme. May the Source code be with you.
Thankee
JUDGEcoder
Robert Wellock
Spot the Error 3: Calling all Sleuths! Judge Feedback
Since there were few entries in number though nonetheless some very good entries. I thought I’d write some feedback regarding both; potential errors with the two ‘web pages’ for the mock forum question or just general discussion regarding those two code samples: ‘Search Page’ and ‘Feedback Page’ respectively.
Most of the errors were far easier to spot than they first appeared assuming you used a good methodical approach when detecting… Though I do appreciate there were some really ‘tricky errors’ and potential errors. Even possibly red herrings making it more like minefield in places. Also it was more difficult than that average SPF post since the Competitors couldn’t directly communicate with ‘Stanley Tweedle’ the fictitious ‘Original Poster’ of the thread.
The basic way I’d probably approach those two pages to “check for errors” would be to copy the two pieces of code into my code editor and create two files: search.htm and feedback.htm
Therefore I could display them within my browser and have syntax colour highlighting and obviously edit them. Firstly, my browser is automatically set to check the markup for errors via a HTML Validator so it will list some potential problems. Though remember a Validator will only give you a ‘loose idea’ and may highlight false positives or mislead you as to where an error appears, etc. This is the case if the page markup tends to be really mangled and you get a “cascade of errors”. Though using the validation software tends to help give your eyes a small rest if it highlights potential error lines to tackle. Experience also comes into play here so you still need to know your stuff and to be able to target, pinpoint or comment out code to get to the bottom of those errors.
For the purpose of this simple exercise we’ll assume XHTML Basic 1.0 throughout.
Although of course like the competitors mentioned (and I agree) Stanley might have meant to have written either: XHTML 1.0 Strict, XHTML Basic 1.1 or XHTML 1.1. I cunningly wrote as Basic 1.0 purely to slowdown the ‘more experienced’ hardcore competitors. Though in most cases; Strict or 1.1 would be a good bet. Unless there was a pressing reason to use the stripped-down Basic Doctype - serving to such as some limited capability mobile devices, etc. Though as stated the question was presented as XHTML Basic 1.0.
So let’s begin, this is what my browser HTML Validator reported (assuming XHTML Basic 1.0)
File: search.htm
[B]Result: 28 errors / 0 warnings[/B]
line 8 column 10 - Error: element "Title" undefined
line 10 column 11 - Error: end tag for element "title" which is not open
line 12 column 16 - Error: there is no attribute "type"
line 12 column 26 - Error: element "style" undefined
line 23 column 12 - Error: end tag for element "script" which is not open
line 23 column 35 - Error: element "style" undefined
line 28 column 8 - Error: end tag for "style" omitted, but OMITTAG NO was specified
line 12 column 4 - Info: start tag was here
line 28 column 8 - Error: end tag for "Title" omitted, but OMITTAG NO was specified
line 8 column 4 - Info: start tag was here
line 28 column 8 - Error: end tag for "head" which is not finished
line 30 column 69 - Error: document type does not allow element "img" here; missing one of "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address" start-tag
line 30 column 70 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 30 column 4 - Info: start tag was here
line 41 column 11 - Error: end tag for element "P" which is not open
line 42 column 46 - Error: document type does not allow element "form" here; assuming missing "object" start-tag
line 55 column 19 - Error: there is no attribute "values"
line 64 column 14 - Error: document type does not allow element "th" here
line 65 column 26 - Error: there is no attribute "border"
line 65 column 53 - Error: document type does not allow element "table" here; missing one of "object", "div", "blockquote", "form" start-tag
line 67 column 15 - Error: document type does not allow element "h2" here; missing one of "th", "td" start-tag
line 70 column 18 - Error: element "b" undefined
line 71 column 48 - Error: end tag for element "abbr" which is not open
line 71 column 84 - Error: end tag for "acronym" omitted, but OMITTAG NO was specified
line 71 column 14 - Info: start tag was here
line 117 column 15 - Error: end tag for "td" omitted, but OMITTAG NO was specified
line 115 column 12 - Info: start tag was here
line 127 column 10 - Error: document type does not allow element "p" here; assuming missing "object" start-tag
line 133 column 11 - Error: end tag for "object" omitted, but OMITTAG NO was specified
line 127 column 8 - Info: start tag was here
line 140 column 12 - Error: element "b" undefined
line 141 column 24 - Error: "copy" is not a function name
line 147 column 11 - Error: end tag for "object" omitted, but OMITTAG NO was specified
line 42 column 8 - Info: start tag was here
line 147 column 11 - Error: end tag for "p" omitted, but OMITTAG NO was specified
line 36 column 8 - Info: start tag was here
Now, that will look really scary to some of you, as if it were written in some arcane long lost ancient language and make as much sense a hieroglyphics to others. Though now we have a clue or some potential error lines.
We know we’re dealing with XHTML, so well-formedness constraints will be in effect, which will help with correcting some of the more obvious errors. So without haste we’ll open the second file and have a peak.
File: feedback.htm
[SIZE=2][B]Result: 12 errors / 0 warnings[/B]
line 5 column 62 - Error: there is no attribute "lang"
line 11 column 24 - Error: there is no attribute "language"
line 11 column 42 - Error: there is no attribute "type"
line 11 column 61 - Error: element "script" undefined
line 14 column 13 - Error: value of attribute "id" invalid: "1" cannot start a name
line 21 column 29 - Error: unclosed start-tag requires SHORTTAG YES
line 33 column 19 - Error: element "fieldset" undefined
line 34 column 19 - Error: element "legend" undefined
line 36 column 56 - Error: there is no attribute "placeholder"
line 37 column 16 - Error: there is no attribute "alt"
line 52 column 14 - Error: end tag for "form" which is not finished
line 55 column 41 - Error: there is no attribute "alt"[/SIZE]
If you haven’t fallen asleep by now we can see the second file potentially has fewer errors. Beware though it’s only a tool so note; it won’t ever beat a good veteran Coder for spotting; semantic best practice; certain erroneous attribute values; or web accessibility judgement calls, etc.
So now let’s have a closer look at some of the potential reported errors, etc.
Analysis of File: search.htm
Like I was just saying the Validator cannot beat a good coder; the first line is erroneous - we know the document is XHTML and is using a XML declaration - so this file cannot start with a comment; whitespace cannot precede it either.
<!-- Copyright (C) 2012, Frobozz Training. All Rights Reserved. -->
Our next error is the TITLE element the “Title” not defined in this markup version.
<Title>
[...]
</title>
All elements are case sensitive and should be lowercase in XHTML so the start tag should be: <title> all lowercase.
Having a short detour into the “World of CSS”, we know Basic 1.0 doesn’t allow the STYLE element - Parsed Character Data (PCDATA). Albeit for XHTML documents that allow STYLE wrap the content of the style element within a CDATA marked section to avoid expansion of entities.
<style type="text/css">
/*<![CDATA[*/
/*]]>*/
</style>
The only time I would add a STYLE is during a test mock-up on a standalone document and then I rarely do that, I suspect Stanley was attempting the same going by his CSS comments.
Line 2 body Value Error : background-color grey is not a color value : grey
Line 14 finished testing * Parse Error */ th { color: silver; }
If you were to run the CSS through the W3C Validator you’d receive error messages as above. The Spelling of the colour Grey within CSS is Gray.
body {
background-color: grey;
}
Further down we have some erroneous nested comments, we’ll hazard a guess the web author was temporally attempting to comment out all of the following CSS.
/* This section commented out for testing
div { margin:100px } /* main section*/
p {
margin: 0 1em
}
finished testing
*/
CSS Comments begin with the characters “/*” and end with the characters “*/”. They may occur anywhere outside other tokens, and their contents have no influence on the rendering. Comments may not be nested.
The studious would notice also the colour contrast between ‘color name’ value: gray FONT=courier new[/FONT] and silver FONT=courier new is quite low, which might hinder legibility.
Going back to the Markup Realm…
Quite simply there are no SCRIPT or STYLE elements in Basic 1.0, though it looks like Stanley was testing his CSS…
</script><style type="text/css">
Even if STYLE was allowed the closing SCRIPT tag would be erroneous…
The IMG elements are inline so must be contained in a block level element. Furthermore it’s an EMPTY element so needs to be closed. In addition as a point of interest usually the filename has an extension, i.e. *.png so most likely we’ve spotted another issue.
<img src="Logo" title="This a Great Logo" alt="This a Great Logo">
Easter egg: to top it off note the ‘duplicated text’ of the ALT and TITLE attributes that is of course bad practice. Let alone Stanley might be dyslexic “This [is] a Great Logo” of course these two issues weren’t to be scored but points of note.
Next, we shall note: <div id=“_content”> isn’t an error for the ID value to start with an underscore in XML but wouldn’t be valid in HTML 4.01.
Again, we have an erroneous uppercase tag.
<p>
Below is a Course Search [...]
</P>
In this case, a closing uppercase P tag, leaving a mismatch.
Considering the FORM, since we are dealing with Basic 1.0, unfortunately we cannot make use of the FIELDSET or LEGEND elements thus the DIV appearing directly after the start FORM tag is suitable.
values="Search..." />
Obviously there is no attribute ‘values’ for this element it should be ‘value’ of course.
Going onto the TABLE something obviously went wrong there when Stanley wrote it; for starters there is a nested TABLE element, which is not allowed in Basic 1.0 (nesting of tables is prohibited). Furthermore just by viewing the page in a browser it is noticeable the cell layouts aren’t correct.
The second TABLE start tag: <table border=“1” summary=“Results Table”> should probably have been in the place of the first. Though yet again, we notice another error; the border attribute, Presentational and thus not supported. So instead will assume the TABLE was meant to read: <table summary=“Results Table”> and removing the nesting would now make the data table look more sensible. Since then the TH would make sense when stripping the nesting. We can then address the following:
<h2>
Course Code
</h2>
Obviously using the above logic the chances are that is supposed to be a TH element not H2.
So we would be aiming for the following as table headers: Course Name, Course Code, Max no., No. enrolled. That would make 4 columns; matching those 12 cells below them.
<th><b>
<acronym title="Maximum">Max</abbr> <abbr title="Number">no.</abbr></b>
The bold element is not defined in this Basic 1.0; already we have TH so that B wants removing. The start ACRONYM tag should undoubtedly be a start ABBR tag.
Following on the next issue the two paragraphs as follows:
<p>
Lorem ipsum [...]
<p>
</p>
Lorem ipsum [...]
</p>
Both are missing opening or closing tags respectively.
[<a href=".../home.htm"
The relative path should not contain three dots, it should be two; dot-dot-slash.
The copyright strap doesn’t require any ‘none supported’ presentational elements, i.e. Bold and obviously has a malformed entity, for the Copyright sign.
<b>
Copyright &#copy; 2012, Frobozz Training. All Rights
The © symbol should be a Numeric Character Reference (NCR) preferably in Hex, i.e. © (lowercase) as we are using XHTML.
Alas the empty <div /> is pointless so needs trimming.
Analysis of File: feedback.htm
The second document is a little easier, as we know is XHTML so you can associate Style Sheets with XML documents by including one or more Processing Instructions with a target of xml-stylesheet in the document’s prolog.
<?xml-stylesheet href="frobozz.css" type="application/javascript"?>
However, clearly the MIME type is meant to be ‘text/css’ not ‘application/javascript’ so I think Stanley got confused here.
Since we are using Basic 1.0, the lang=“en” is redundant (for legacy user-agents) since it is expected the ‘application/xhtml+xml’ media type is likely to be assumed.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Hence there is no attribute ‘lang’ for this element (in this XHTML version).
A small but interesting point with the following:
<link rel="stylesheet" href="styles.css" type="text/css" />
Most likely the stylesheet name should match the one at the top of the page and thus be named: frobozz.css
<script language="JavaScript" type="text/javascript" />
Quite simply, element SCRIPT is not defined in this XHTML version.
<div id="1box">
The value of attribute ID must start with a letter, tokens must begin with a letter to be backwards compatible ([A-Za-z]) thus cannot start with; 1 and if you refer to the other file we’ll assume it should be called: ‘box1’.
offered by <strong <!-- class="important"-->>Frobozz
Really there is no need for strong here however the comment delimiters are not allowed within the start STRONG tag.
<h6>
Contact Us about Course Details:
</h6>
Probably should have been a H3 not H6, as the prior heading was H2.
Looking at the form there are several errors; fieldset and legend elements not defined in Basic 1.0 so as with search.htm the DIV element would be applied. Albeit you can see how Basic 1.0 is lacking in some useful FORM elements.
<form method="post"
action="mailto:example@@example.com"
enctype="text\\plain">
<fieldset>
<legend>Enter your Contact Details</legend><br />
The email address is malformed with ‘@@’ and the enctype should use a forward slash for its value, i.e. text/plain.
<input name="name" type="text" placeholder="First name"
alt="Please enter your Fullname so we know how to address our responses." />
There is no attribute called ‘placeholder’ for this the INPUT element in Basic 1.0, placeholder is meant for (X)HTML5.
alt="Please enter your e-mail address so we can respond to your feedback." />
Neither can there be alt attributes on those two INPUT elements however they can be used in XHTML 1.0.
<textarea name="message" rows="1O" cols="64"></textarea><br />
The Eagle-eyed will have spotted the rows attribute should have numeric values not; numeric “1” followed by the letter “O” a common mistake that web authors make the value should have been ten, i.e. 10.
[<a href="home page.htm" alt="
There is no attribute alt for the A element, I would suspect Stanley meant to use the title attribute. Furthermore that is a malformed URI reference as it has blank space for the filename.
Alas that concludes the basic feedback and reasons for some faults.
Additional Judge Comments
Gather around close people, I’ve told my story and gave my positive reasons and summary regarding those two code samples. So now it’s only fair I make a few brief comments along with those basic errors or points of interest. Obviously there were other discussions or faults that could be found… I’ll address some random “leftovers” here regarding the competitor’s comments (others we either covered above, or during when the competition was running).
Poes: as was noted a newbie would unlikely use ‘XML stylesheet linking’ or the XML Declaration, I’d agree. The OP didn’t have “Gordon Gecko brickphone” either. LOL. Like noted Basic 1.1 is newer. Apart from a few new attributes, e.g. inputmode and the ‘Forms Module’ improvements; Basic 1.1 is a backwards step regarding purity. The LINK style sheets were for legacy browsers. [B]
Dave:[/B] yes, an XML Declaration could trigger ‘quirks’. As noted the CSS would be in one block if it were Strict. The current headings aren’t appropriate really (missing H1). That’s because I stripped it down from another file, I agree about there being the need for heading level constancy.
The TABLE is mangled and there was a little over use of consecutive BR elements and CSS could be appropriate for layout.
Ron: quite true the TABLE was mangled and you realised what structure it should have had regarding data cells.
Pullo (aka Dave): correct, no character encoding was declared in the HEAD typically the XML Declaration encoding should suffice (XHTML) though you may add one via META too for legacy user agents.
Paul: good point about the browser bugs and CSS 3 regarding the erroneous word grey. Plus you gave good explanation regarding the faults with the commenting out of the CSS and its effects. As mentioned earlier I cannot really fault your CSS browser bug explanations.
I believe between all five; you nailed nearly all the errors or as many as possible going from: Post #1 alone. Without being able to communicate with; Stanley Tweedle dumb himself.
If this competition had been more complex; I’d have spent time and given you all in-depth individual personal feedback via PM. However, for the benefit of all SPF members I chose this method. Good work guys, I hope you learnt something from the experience and had fun; pulling out your hair, straining your eyes and exercising your brains, etc.
Nice write up Robert and a well thought out and in-depth “puzzle” indeed
Thanks for taking the time to put it altogether and teaching us something in the process.
Congratulations and well done to Poes also for spotting the most errors.
Agreed - awesome work Robert. Thanks for your time and effort.
Yes, nice work, Robert. Looks like you are ready to submit your thesis. 
Stunningly nice job, Robert! Well presented and thoroughly explained follow-up. Ditto, re. the thesis
great job, Robert. Thanks.
Wow… reading this is great… thanks to all who participated and Poes… you’re a little star… I always learn something new with you… or make me think about things that I don’t pay that much attention to. Great job!
Bah, I’m far too lazy to do that kind of work. In fact, I’m allergic to work the way I’m allergic to babies and nephews with their copy of Dreambeaver.
Also learned several things from the rundown of errors.
Off Topic:
