A while back while ranting about the lack of qualified (available) web developers I wrote that nasty piece of XHTML that I wanted people to try and correct/comment on.
The awesomeness:
<style>
#H1{
Font-size:10px;
Font-color:Red;
}Li{
Font-color:white;
}#greenBox{
Background-color:light-green;
}
</style><H1>Hello World</h1>
I’m not fat I’m big boned
<div id=‘greenBox’>
<li>Option 1
<li>Option 2
<li>Option 3
</div>Of course I want some cheesy poofs
<div id=‘greenBox>
<li>Option 1
<li>Option 2
<li>Option 3
</div>
(excuse the dodgy indenting)
Ok, here goes:
- No Document Type
- No <HTML>
- No <Head>
- No Body
- Embedded styles are tacky
- <h1> is an html element; even if it was possible to create an identity definition called h1 it would still be retarded.
- Fixed (px) sized fonts are not good for all kinds of usability reasons.
- There is no such thing as “font-color”
- While “Red” is currently understood by most browsers, the hex colour code would be a better choice for future compatibility.
- Setting your <li>s globally to a foreground colour of white is a bad idea. You’ll be constantly having to override that every time you want it black(ish) again. (I even created an element on the page called greenbox to show that the entire design was going to be on a white background)
- id style definitions (#greenBox) really shouldn’t hint at your current presentation (Colours or Layout). #greenBox is a bad name… especially in a years time when the design calls for that box to be purple.
- light-green is not a valid html colour.
- Personally I like to use lower case tags… but dammit, don’t mix them up. (H1, h1)
- Considering there is no <body>, the “I’m not fat I’m big boned is top level text. It should be inside a body, but additionally it would be better for it to be wrapped in a paragraph or label.
- <li>s by themselves, without being wrapped in a <ul> (unordered list) or a <ol> (ordered list) is bad form… but you’d be amazed at how often you see stuff like that on big sites like cnn.com etc.
- Reusing the “greenBox” identity will cause various issues in various browsers. It’s an obvious mistake but sadly not picked up by too many people.
- greenBox should probably be a class since it’s being used like a class.
- The second greenBox quote isn’t closed.
There you go. 18 without any repetition. I’m sure there are some I’ve forgotten. Engage lively debate *now*.
arbitraryuser 
Wow, i only got 5 correct, but hey i don’t build pages! Nice follow on from the previous post.
Definitely a nice resource for quizzing potential new hires.
Finally, where did you find that pic? So geek but my god i love it…
I shit you not: http://www.gaygamer.net (“For boys who like boys who like joysticks”)
It was on digg.com
On some of yours:
re. 6: Its perfectly possible to create an ID which is the same as an element, they’re completely different namespaces. However, it is (as you say), completely retarded.
re. 13: Upper case tags are actually invalid in XHTML.
re. 15: It’s not just bad form, it’s illegal, at least within the spec; making it UN law too wouldn’t be a bad idea though.
Some more:
You forgot to mention closing the <li>s.
CSS properties are generally written lower case, but don’t know if that’s specced.
I’m sure its just a formatting thing, but the quotes around your IDs are extended quotes, and therefore broken (;
<style> tags should at least have a ‘type’ attribute.
I’ll leave it at that, rather than critiquing the way CSS cascades and such, and that would become a _long_ conversation (: In an interview, I’m sure this would be great to draw the candidate into a deeper discussion.
Bryn, good points:
I must admit I completely missed closing the li’s and giving the style tags their “type” when putting the list of mistakes together.
The extended quotes is just a copy/paste artifact.
So that’s 20 on the list of official Kief XHTML mistakes.
As you can see, working with Bryn and his know-it-all attitude (and, well, knowing it all) has its benefits…
I think you’re also required to have a title tag in your head – checking this leads me to “Every HTML document must have a TITLE element in the HEAD section.” at http://www.w3.org/TR/html4
And I’m sure someone will pipe up about a missing meta keywords…
While you’re at it, don’t forget to toss in a simple programming problem that they have to write code in the interview itself to solve.
Hey Neil
Yup, you’re right, a TITLE is required. So that puts us at 21.
And while I dont think that META tags are required they obviously make sense so I’ll make it 22… For Skye the SEO star who did mention META right in the very first post about this keif XHTML.
j.