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
- How many
pelements are there within the above document? - Which of these elements, if any, will not be present within the the Document Object Model of the above document?
<head><body><em>
Semantics
- Which markup structure is the most semantically correct for a navigational link menu, regardless of how it will be presented visually?
-
<div class="menu"> <a href="…">Link 1</a> | <a href="…">Link 2</a> | <a href="…">Link 3</a> </div> -
<div class="menu"> <a href="…">Link 1</a><br> <a href="…">Link 2</a><br> <a href="…">Link 3</a><br> </div> -
<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>
-
- 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?
<div class="title">Document Title</div><h1>Document Title</h1><p align="center"><font size="+3"><b>Document Title</b></font></p><h1 style="font-weight:bold;font-size:large;text-align:center;">Document Title</h1><h1 class="LargeBoldCenterHeading">Document Title</h1>
Character References
Given these three numeric character references, and two character entity references:
’’’’'
- Which ones are invalid for an HTML 4.01 document?
- Which ones are invalid for an XHTML 1.0 document?
- Which ones are invalid for a generic XML document? (assume no DTD or Schema)
Media Types (MIME)
- Which of these MIME types SHOULD NOT be used for an XHTML 1.1 document?
application/xhtml+xmltext/htmlapplication/xmltext/xml
- Using the answer from the previous question, under what conditions MAY (according to the recommendation) an XHTML 1.0 document use that MIME type?
> Validation
Line 5
> Elements in the DOM
1. 2 p elements
2. em
> Semantics
1. Choice 3
2. Choice 2
> Character References
1. apos
2. rsquo
3. rsquo
> Media Types (MIME)
1. text/xml
2. text/html
I’m sure I’ll screw up on a few of these, but here’s a stab at it anyway:
Validation: the right-align on the first paragraph should, I believe, throw an error since
alignwas deprecated and thus isn’t available in Strict. The link needs a closingatag.DOM: (3), because the
emis inside a comment.Semantics 1: (3), because it’s a list of links.
Semantics 2: (2), because it’d be easy to use context to style it appropriately for the medium. (5) is a distant second; it’s not defining presentation per se, but is still mixing media-specific presentational information into the structure.
Character references 1 and 2: I’m sure I’m missing something, but they all look fine for HTML 4.01 and XHTML 1.0.
Character references 3:
’is out because it’s not one of the five named entities defined in XML, so you’d need a DTD or schema which defined it for it to work.MIME-Types 1:
text/html.MIME-TYpes 2: When it conforms to the HTML Compatibility Guidelines.
Validation
Line 4. No align attribute in Strict.
(Line 7 is a good one, and I have to admit that I cheated and validated that line.)
Elements in the DOM
1. 3
2. em
Semantics
1. Option 3.
2. Option 2.
Character References
1. '
2. None of them.
3. ’ and '
Media Types (MIME)
1. text/html
2. If it is “compatible with HTML 4.01” which is bollocks but is usually taken as meaning if it complies with Appendix C of the XHTML 1.0 spec.
Ok, I’m not very good at this but I’ll give it a shot. 🙂
Validation: I believe the unclosed anchor element will produce a validation error. Not sure about the rest, but can’t specifically point out any errors. So my answer would be Line 7.
Elements in the DOM: I believe there are two paragraph elements, and I believe all three the elements you listed will be in the DOM.
Semantics: The answer to Question 1 would be Option 3 and the answer to Question 2 would be Option 2.
Character References: I think none of them are invalid for an HTML 4.01 document,
’might be invalid for an XHTML 1.0 document although I’m not sure (without looking it up) and I think that one might also be invalid for a generic XML 1.0 document but again I’m not sure.Media Types (MIME): I think the answer to both questions is
text/html.Sorry, I wanted to mark these things up in a list but it seems like your allowed elements list doesn’t include elements like
olandul(neitherli).Validation: to the extent I’ve learned to read SGML: no errors. Not that I’d care – no browser will ever implement all the features necessary to parse this concoction correctly.
Elements in the DOM: 1. 3
pelements. Theortically, anyway; I don’t know if there’s any browser who will parse the document such that this would actually happen. 2. All of the given elements would appear in the DOM.Semantics: 1. #3, of course. 2. #2, mostly. #5 can be necessary if the
h1element does not have a distinctive enough location in the document structure that you could use structural selectors – but the presentational class name is bad anyway. #4 would be necessary if you are serving the document in contexts where you cannot attach a stylesheet to it, such as in an RSS feed.Character References: 1. There’s no
'in HTML. 2. All valid. (But if it’s legal to omit the DTD declaration, then if that was the case #5 would be invalid. Not sure.) 3.’is not among the five named entities predeclared for all XML documents.Media Types (MIME): 1.
text/html2. Appendix C; considered harmful.Please delete the previously submitted duplicate; I didn’t notice that
h1,ol, andliare filtered. A preview button would be very helpful. I hope this attempt contains no formatting errors.Validation: 3
Elements in the DOM: 1) 3 2) 3
Semantics: 1) 3 2) 2
Character References: 1) 5 2) 5 3) 3, 4, 5
Media Types: 1) 2, 4 2) 1
Validation: 5 & 7 are incorrect.
Elements:
1. 2
2. 0
Semantics:
1. 3
2. 2
Character:
1. none
2. first three
3. first three
MIME:
1. text/html, text/xml, application/xml
2. anytime?
Lachlan, come on. Most of this stuff is SGML related. I know a fair bit of HTML, but not all that SGML stuff. Don’t usually need it either, unless the validator barks. The semantics questions are good, but the other ones are a bit over the top.
Validation:
Line 4, because of the ALIGN attribute on the P element.
Line 7, element A needs the closing tag. I’m not sure about the lack of the opening double quote on the HREF attribute
Elements in the DOM:
1. Three P elements, lines 4, 5 and 7
2. I’m really confused about the comments…but, I think EM will not be present in the DOM.
Semantics:
1. Answer 3.
2. I’d say answer 2, because H1 shoud be present only once per page, so it can be styled easily bt the element name on the CSS. Answer 4 is bad because of the inline CSS and answer 5 because of the presentational class name.
Character References
I don’t know much about entity references (ok, I know I should), but, there go the answers:
1. ’
2. ’ and '
3. ’, ’ and '
Media Types (MIME)
These words SHOULD, MAY, etc, are evil…haha
1. text/html
2. When the XHTML 1.0 document follows the guidelines on the Appendix C of the XHTML 1.0 specification.
Well, this is it. Some answers I’m sure are correct (well, if they are wrong, I’ll jump out the window) and some I’m really not sure. Let’s see.
However, it’s a pretty good quiz, congratulations.
Congratulations for the great work.
Validation: No errors. (If my memory serves me correctly, a colon is allowed in an unquoted attribute value after which // terminates the a element.)
Elements in the DOM: 1. If an SGML parser is assumed, there are three p elements. In real-world browsers, however, there will be two p element nodes in the DOM. 2. em will not be present in the DOM.
Semantics: 1. option 3 (ul). 2. option 2 (h1).
Character references: 1. ’ and '. 2. none. 3. ’.
Media Types: 1. text/html. 2. If the document complies with the infamous Appendix C.
Oops. Correction. There is a validation error on line 4. The attribute align is not allowed.
All the correct answers will be published later this evening. I’m still very surprised that no-one got all of them correct. Update: Actually, after double checking the answers, Henri is the first to get all of them correct