All posts by Lachlan Hunt

Web Developer Quiz Update

I’ve received quite a few responses to yesterday’s Web Developer Quiz, including some feedback about the type of questions I asked and criticism about them being too much about SGML which I’d like to take the opportunity to address.

Firstly, out of all the responses received in the last 24 hours (although, they’re not yet published), not one person has answered all questions correctly. Indeed, there are questions in there that no-one has answered correctly yet, which I am very surprised about — I was expecting to, at least collectively, receive the correct answers for all questions.

Secondly, I’m going to go through each section and explain, without giving away the answers just yet, why I asked each question and why it’s important for authors to know the answers to them.

Validation

Looking at the sample document, it’s not hard to see that it makes use of unsupported SGML features that cannot be used in the real world. However, this does not mean that authors do not need to be aware of them.

In fact, the document demonstrates just how easy it is to make unintentional use of such features, which, while it may not be what the author intended, will either result in one of two possibilites. 1. Completely unexpected errors that don’t seem to make sense: a problem I see a lot of beginners struggle with. 2. As is the case with this document, the combination of 2 specific authoring errors results in no validation error being reported at all, for the mistakes.

At this point, I’d like to point out that there is just 1 error within the document (most people have picked it so far), but it has nothing to do with the unsupported SGML features, and everything to do with the declared DOCTYPE. This will, perhaps, become more apparent to you when I reveal the answers and explain the reasons for the errors, or lack thereof, in more detail next week.

Elements in the DOM

The first of these questions is very much related to an unsupported SGML feature, rather than real world, practical HTML, and I admit, I just threw it in as a challenge for the more advanced authors. It is, however, important to be aware of the syntax and that it is unsupported, and thus cannot be used, even inadvertently.

The second question is testing your knowledge of real world, supported mark up. You need to be aware that start-tags and end-tags can be omitted for some elements, yet the elements will still be present in the DOM. You also need to be aware of the HTML/SGML comment syntax and, although it wasn’t really tested with these questions, the syntactic differences between SGML and XML comments.

Semantics

These are, perhaps, the easiest and most practical questions in the quiz. So far, nearly everybody has answered these questions correctly, and I don’t feel I need to explain why they were included, it seems quite obvious to everyone.

Character References

Surprisingly, nobody has correctly any of these 3 questions. Yet it is important from both a practical point of view and a validation point of view, to understand the similarities and differences between HTML, XHTML and XML with respect to character references. It is also important to have an understanding of the Unicode character repertoire and code points, which is what everyone has failed on, so far.

Media Types

Again, this is important from a practical perspective. Authors need to understand, that they should not use XHTML with the wrong media type, and also understand the practical limitations with doing so. Conversely, although this was not tested with these questions, it is important to understand the current practical limitations with using the correct media type for XHTML.

I’ll be revealing the answers including all the responses to the quiz on Sunday evening (local time). Until then, tell others, who haven’t seen it yet, about the quiz, I’m interested in finding out how much an average web developer really knows about the technologies they use every day.

Web Developer Quiz

This quiz is designed to test whether or not web developers have an understanding of the basic technologies used on the web, primarily HTML, HTTP, Media Types (MIME) and character repertoires and encodings. Personally, I expect every single web developer to pass this quiz with flying colours, yet reality tells me that a large proportion will struggle. So, in the interests of finding out exactly how much web developers in general do and do not know, and for your own personal benefit, I decided to publish this quiz (or survey, if you like).

Firstly, a few ground rules. Please don’t cheat. I expect all web developers to know the answers to these questions without the need for reference material or the use of automated tools. That means, please don’t make use of the validator or look up the specifications to answer these questions, they’re designed to be easy enough to answer without such tools, yet still provide enough of a challenge for all but the most knowledgeable authors. Secondly, in order to give everyone a fair go and avoid chance of having all the correct answers given away in the first response, I’ve temporarily enabled comment moderation and no comments will be appearing until I publish the results and answers next week. Ok, so on with the quiz…

This sample document applies to the first 3 questions. You may assume the HTTP headers contain:

Content-Type: text/html;charset=UTF-8

Note: This document uses some special syntax that is not widely supported in existing browsers; it is only designed to test your knowledge of HTML.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2. <html lang="en">
3.   <title/Sample HTML 4.01 Document/
4.   <p align="right">This is a sample HTML 4.01 Strict document.
5.   <>How much do you know about HTML?</>
6.   <!-- -- --> <em>It’s not hard!</em> <!-- -- -->
7.   <p>Created by <a href=http://lachy.id.au/">Lachlan Hunt
8. </html>

Validation

Which lines in the above HTML document contain validation errors, if any? Note: I’m only looking for those errors that will be reported by a conforming SGML based validator.

Elements in the DOM

  1. How many p elements are there within the above document?
  2. Which of these elements, if any, will not be present within the the Document Object Model of the above document?
    • <head>
    • <body>
    • <em>

Semantics

  1. Which markup structure is the most semantically correct for a navigational link menu, regardless of how it will be presented visually?
    1. <div class="menu">
          <a href="…">Link  1</a> |
          <a href="…">Link 2</a> |
          <a href="…">Link 3</a>
      </div>
    2. <div class="menu">
          <a href="…">Link  1</a><br>
          <a href="…">Link  2</a><br>
          <a href="…">Link  3</a><br>
      </div>
    3. <ul class="menu">
          <li><a  href="…">Link 1</a></li>
          <li><a  href="…">Link 2</a></li>
          <li><a  href="…">Link 3</a></li>
      </div>
  2. Which markup structure is the most semantically correct for a title within the document body that may be horizontally centred in a visual medium (eg. screen) using a large, bold font?
    1. <div class="title">Document Title</div>
    2. <h1>Document Title</h1>
    3. <p align="center"><font size="+3"><b>Document Title</b></font></p>
    4. <h1 style="font-weight:bold;font-size:large;text-align:center;">Document Title</h1>
    5. <h1 class="LargeBoldCenterHeading">Document Title</h1>

Character References

Given these three numeric character references, and two character entity references:

  • &#x2019;
  • &#8217;
  • &#146;
  • &rsquo;
  • &apos;
  1. Which ones are invalid for an HTML 4.01 document?
  2. Which ones are invalid for an XHTML 1.0 document?
  3. Which ones are invalid for a generic XML document? (assume no DTD or Schema)

Media Types (MIME)

  1. Which of these MIME types SHOULD NOT be used for an XHTML 1.1 document?
    • application/xhtml+xml
    • text/html
    • application/xml
    • text/xml
  2. Using the answer from the previous question, under what conditions MAY (according to the recommendation) an XHTML 1.0 document use that MIME type?

Crowne Plaza – Web Site

Around 3 months ago, I started working for HotHouse – a web development company with a relatively strong focus on standards and accessibility. Well, I’m pleased to announce that the first project I was involved with, for which I primarily wrote the HTML, CSS and some (but not all) JavaScript, launched a few weeks ago: Crowne Plaza – Hunter Valley. (Note: the visual design was done by others at HotHouse, I only converted the design into HTML and CSS)

Overall, I have to say, that I’m quite proud of the site and very pleased with the results, though there are issues I would like to see addressed with future projects. It uses mostly standards compliant HTML 4.01 Strict. Unfortunately, it doesn’t completely validate but it does use fairly well structured, semantic markup and (almost) completely separates the content from the presentation.

The reason is doesn’t validate is due to some custom attributes that are, apparently, required by the form validation script provided by another company, that was outsourced to handle the form processing for the contact forms. In my opinion, they should have used the class attribute instead, but they didn’t and we just had to accept it.

If you look closely at the markup on some pages, you’ll also notice some small layout tables used. I know I’m a hypocrite, but when the client demands pixel perfection from obsolete browsers (read: IE6), you really are left with little choice but to make some sacrifices. I tried absolutely every other method I could think of to have an image on one side and a column of text on the other, that did not flow around like it would if the image were floated and that worked in well in at least IE, Firefox and Opera. In the end, with time running out, I made the small sacrifice to include a relatively harmless table for the purpose.

For the stylesheet, I decided to make use of Tantek’s high-pass filter to ensure that IE5 users were given the Netscape 4 treatment: no style whatsoever. This is actually a way to be nice to such users, as the result with the stylesheet applied was disastrous. At least, this way, the content of the site remains accessible fully accessible, even if doesn’t look as great.

As I mentioned above, I also wrote some JavaScript for this page. The purpose of the script, despite my objections, was to provide popup windows for some links (For anyone that doesn’t know: I despise popup windows!). This included the Hotel Gallery, with links to a few photos of the hotel, the map and the weather. So, I did it in the most accessible way I could, which wouldn’t affect users with JS disabled/unsupported and still allow them to access the images, nor interfere with users that indiscriminately prevent popup windows of all kinds, like me. For such users, the link simply points to the image itself. For users with JS enabled (and popups not blocked completely), the image is loaded into a popup window.

The weather link is a little different. The reason is apparently because it’s a link to an external site – a very common misconception about usability, looked at from a marketing perspective. Jakob Nielson has a good rant about this. Remarkably, the script for the weather link is similar to that recently published by Bruce Lawson, in that it applies a target attribute dynamically to the link. I chose this approach for several reasons:

  1. It separates the behaviour of opening a new window from the markup
  2. It’s one less validation error to worry about (yes, I know using script to hide validation errors is, at best, a pointless exercise)
  3. It behaves nicely for users with JS disabled (i.e. no popup window).

Naturally, this method is also considered harmful for the same reasons as Bruce’s script and I really would like to see the use of popup windows abolished in sites developed by HotHouse (and, in fact, all web development companies), I just need to become more involved in the earlier phases of development and be able to present better alternatives.

Lastly, one more thing I was able to achieve correctly, was to set the correct HTTP Content-Type header and include the charset parameter, since I was given access to the PHP prior to launch. The headers now correctly include: Content-Type: text/html; charset=UTF-8, and avoids using the superfluous meta element.