Nettuts+ Quiz #6: How Well do you Know HTML5?

Nettuts+ Quiz #6: How Well do you Know HTML5?

This entry is part 6 of 12 in the The Official Nettuts+ Quizzes Session
« PreviousNext »

HTML5 has been the buzzword with the web development community for a while now. In accordance with many a request from our readers, today I’m happy to present you with a quiz on HTML5.

This beginner friendly Stormtrooper edition is a great place to test your knowledge of the basics of HTML5. Don’t get too cocky though! The upcoming ones will make you cry! Use the force, Luke!




Siddharth is Siddharth on Codecanyon
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.ibrightdev.com Justin St. Germain

    wow, i need to get on my HTML 5. first quiz i havent gotten 100% on. thanks for this, it has inspired me to learn more. :)

    • http://timhillrocks.com Tim HIll

      Same here. I actually feel a bit ashamed because of it.

  • http://www.wesbos.com Wes Bos

    Always love these quizzes! I would protest #3. While HTML5 Markup is backwards compatible, not everything, like canvas, is backwards compatible..

    • http://www.ssiddharth.com Siddharth
      Author

      Ahh, I thought the ‘markup’ bit would be assumed. Seems I’m alone in this. Will update the text in a jiffy.

      Thanks for reading!

  • Andrew

    Question: The placeholder value isn’t really the default value for the field, right? The value would still default to “” unless there is a value set as an attribute.

    If I’m not mistaken, placeholder is really just a placeholder.

    • http://www.ssiddharth.com Siddharth
      Author

      Hey Andrew,

      Thanks for reading and bringing this to our attention. I’ve improved how the question is phrased to remove ambiguity.

    • andres

      this,

      the actual default value is provided by, well, value

      • http://www.ssiddharth.com Siddharth
        Author

        Haha. Indeed. I’ve edited the phrasing to be more direct and less of a train wreck.

  • http://www.georgedina.info George Dina

    72.22% – Shame on me.
    I should read more.

  • http://www.github.com/dotink/inkwell Matthew J. Sahagian

    Enough to know XHTML2 would have been a much better approach?

  • Frederik

    This is the first time I got 100% on one of these quizzes, yay!

  • jv

    You can animate content using *only* HTML5 without the use of JavaScript.
    This statement is…….
    well, you can do css animation, so the answer is partially true, partially false, right?

    • http://www.ssiddharth.com Siddharth
      Author

      CSS3 is not HTML5. Thus, the question. JavaScript is mentioned just to mess with your head. :)

      • http://jason.karns.name Jason

        You can use marquee to animate text with pure HTML, no CSS/JavaScript.

      • http://www.ssiddharth.com Siddharth
        Author

        Except that it’s a non-standard tag. Good try though. :)

      • http://www.cyberstream.us Eli Mitchell

        The term HTML5 is confusing. It can refer to the markup language. But many are placing CSS3 and Javascript’s interacting with HTML5 elements under the broad umbrella of “HTML5″. To many, it’s just a buzzword used to describe cool new web apps.

      • http://www.ssiddharth.com Siddharth
        Author

        Yeah, it’s a big issue. Many think CSS3 and HTML5 are one and the same.

  • Andrew

    When you share the results, the default message refers to the Javascript quiz, not the HTML5 quiz!

    • http://www.ssiddharth.com Siddharth
      Author

      Embarassing! Fixed, thanks.

  • anon

    Question #7 is just bizarre. You don’t need any of those attributes.

    • http://www.ssiddharth.com Siddharth
      Author

      Thanks for reading and bringing this to our attention. I’ve improved how the question is phrased to remove ambiguity.

  • tanshul

    Although my score was not 100% i really enjoyed this quiz and totally pumped me up to learn more.
    Thanks Siddarth.

  • David

    Question #9 is messed up “Geolocation is an not an official….”

    • http://www.ssiddharth.com Siddharth
      Author

      Probably an older cached version. Current version looks fine.

  • andres

    78% , this was fun! and I learn a couple new things

  • http://jonwhitestudio.com Jon White

    Nice! I’d only quibble with Question 6 — the phrasing’s a little weird, but you can easily “animate content” using HTML elements (5, 4, any) as defined by CSS3 animation properties. Still fits within the “without JavaScript” stipulation.

    • http://www.ssiddharth.com Siddharth
      Author

      Haha. See my reply above. CSS3 is not a part of HTML5 and I had to mention JS as a diversionary tactic. :)

      • jv

        OK, then, best to say it’s a poorly worded question.

  • http://chrismorgan.info Chris Morgan

    Question 8 is wrong: the placeholder is not “a default text for an input field”; it is the placeholder text and will never be sent with the form. The ‘value’ attribute specifies the default text for an input field.

    Question 10 is wrong: the canvas is merely a drawing surface. There are then contexts on it like ’2d’ (the most common one, which everyone knows about and most people probably think is all a canvas can do) and ‘webgl’. WebGL draws onto a canvas. Thus (c) is correct as well as (d).

    • tom

      I’d say I also vote for question 10 to be inaccurate.

      There’s no difference in drawing 2d or 3d. It just depends on how you draw it.

      • http://www.ssiddharth.com Siddharth
        Author

        As to the 8th question, I’ve edited the question to be more clear — the phrasing was a bit ambiguous earlier.

        As to question 10, yes, canvas does have a 3d context but it’s not defined in the official spec, only 2d is.

        That being said, the question is a bit fuzzy so I’m modifying the options to be more direct.

        Thanks for your critical eye!

  • Mo Abbas

    Not Bad got 94.44% go the last one wrong i thought only you can only edit text but it seems that you can edit text and markup

  • Potado

    Wow! I guessed on pretty much all of them, and I only got 4 wrong! I guess html5 is the most user friendly version ever!

  • arnold

    I got 61.11%, Im not using even HTML 5, just reading some articles , still good though

  • Brad

    Siddharth you are taking a beating tonight!

    I got 88%, 2 wrong. I would just like to say at this time that since Siddharth is taking the blame for everything the questions I missed were actually right

    • http://www.ssiddharth.com Siddharth
      Author

      Heh. Readers with critical eyes are always appreciated. The phrasing often means a certain thing in my head but obviously, there are lots of possible interpretations, so it’s good when readers chime in with issues they’re having.

      Thanks for reading!

  • Jeffrey Briceño

    NOOOOOO!!!
    I clicked in canvas draw 3D…(was very fool)!!!

    telephone ii not a valid input field but color is a valid…?
    hmmmm…! I thing that 88.86 is a not bad result, but. I need to practice more HTML5

  • harish

    ooH! i scored 50%, too good for me :D…

  • http://www.devilsduke.com Kishore Mylavarapu

    Love this quiz.Got 66.7% for the first time.

  • Nelson

    Canvas is to find out the location of the user? what the hell?

    • http://www.ssiddharth.com Siddharth
      Author

      It’s quite possible you got delivered a cached copy of an older version by the CDN. The answer is marked correctly here.

  • Tom

    The element is not used to get the location of the user. Something’s up with your quiz.

    • http://www.ssiddharth.com Siddharth
      Author

      See my reply above.

  • http://anti-code.com Jared Williams

    The canvas element, introduced in HTML5, is used to…?

    find out the location of a user…

    That’s supposed to be the correct answer?? Are you serious?
    No.

    • http://www.ssiddharth.com Siddharth
      Author

      See my reply above. I think you got served an older, cached version for some reason. Should be good now.

  • Thomas Jane

    Siddharth must learn HTML5 before making such quizzes. Every one who solved this has found something wrong about it.

    • http://www.ssiddharth.com Siddharth
      Author

      Haha. Succinct.

      I think most of the replies were arguing how the questions were phrased rather than the validity of the questions themselves. And the CDN cache issue, well, out of my control really.

      Thanks for reading, I guess.

  • Thomas Jane

    Siddharth must learn HTML5 before making such quizzes. Every one who solved this has found something wrong about it.

  • Mike Taylor

    CENTER was deprecated in HTML4, not HTML5: http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2

    • http://www.ssiddharth.com Siddharth
      Author

      Dropped and deprecated are two different things. The wiki page here states that the deprecated center tag is now unsupported under HTML: http://en.wikipedia.org/wiki/HTML5#Markup

  • http://youfailed.us Jim d

    Not sure how this test can claim HTML5 is backwards compatible with older versions of HTML. Last time I checked IE6 and Netscape would don’t render the and tags correctly. Perhaps there is some alternate definition of the word “compatible” that I’m not hip to. I claim cultural bias!!!

    • http://youfailed.us jim d

      Okay, I failed to read instructions and my markup got eaten. Let’s try this again (w/ less typos):

      Not sure how this test can claim HTML5 is backwards compatible with older versions of HTML. Last time I checked IE6 and Netscape don’t render the <VIDEO> and <TELEPHONE> tags correctly. Perhaps there is some alternate definition of the word “compatible” that I’m not hip to. I claim cultural bias!!!

      • http://www.ssiddharth.com Siddharth
        Author

        I’m not sure you get what backwards compatible means, sorry.

        “A device or technology is said to be backward or downward compatible if it can work with input generated by an older device.”

  • http://www.ariona.net Rian Ariona

    Always interesting :)

  • David

    You can totally animate things without javascript or css3.

    • David

      I put the above comment in tags but it was stripped out.

    • http://www.ssiddharth.com Siddharth
      Author

      Care to explain how?

      • http://nimbupani.com Divya Manian

        You can use SMIL and SVG for animating without JS or CSS. Again, you would say SVG is not part of HTML5 though for practical purposes it is all clubbed together.

  • http://twitter.com/whudat Chris

    Question 3: HTML5 Markup is backwards compatible should be false.

    By markup, I assume you mean article, aside, nav, etc. None of those tags are recognized in older browsers, notably IE 6 – 8.

    Hence the existence of HTML5 shivs.

    • http://www.ssiddharth.com Siddharth
      Author

      I think you’re misunderstanding what backwards compatible means.

      • David

        marquee tags

  • http://www.webforg.com Mohamed Atef

    Good quiz.. but I couldn’t know the answer of this question :D
    Which of these elements was not introduced in HTML5?
    object – article – meter – wbr

  • http://jason.karns.name Jason

    So how can HTML5 be considered backwards compatible if it is dropping previously supported tags?
    I believe the following tags were all previously valid HTML tags:
    acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

    Since they have been dropped from HTML5 then can it truly be considered backwards compatible?

    • http://www.ssiddharth.com Siddharth
      Author

      The overall spec states that all user agents will work with the tags mentioned even though the core HTML5 syntax itself will be dropping the above tags. You can find the relevant information here: http://www.w3.org/TR/html5-diff/#backwards-compatible

  • Abhijit

    This is the first Nettuts quiz that I scored 100% – well, “I am the master??”

  • http://bytearea.blogspot.com Mufid

    Thanks for informing me HTML5 is supposed to be completed in 2022. It’s a long time :’(

  • Susheel

    Just check out

    HTML 5 – Some more details and an Intro to Modernizer Framework – 1

    http://www.msguy.com/2011/10/html-5-some-more-details-and-intro-to.html

  • http://artwonder.ru Anton

    Only fifty :( Need to improve skills. :))

  • http://twitter.com/renofizaldy Reno Fizaldy

    i just got 77.78% :(

  • kankuro

    I’ve got 72.22%…. i need more familiarization of HTML then. Anyway thanks for the quiz siddhart… it was truly fun… :D

  • noone

    Question 3 is wrong. HTML5 is not backward compatible with HTML4. HTML4 allows button elements to be nested inside of anchors. HTML5 does not.

  • http://tutorcreative.com/ tutorcreative

    Lol You scored 38.89% … must keep learning

  • http://www.gilenofilho.com.br Gileno

    You can animate content using *only* HTML5 without the use of JavaScript or CSS. This statement is…

    Unable to create animation with CSS 3?

  • jbcarey

    55% — Well I passed, and I feel I made a few errors, because of misunderstanding the question…

  • http://beben-koben.blogspot.com/ Beben Koben

    hehehehehe
    scored 61.11%
    not bad…:D

  • http://getbutterfly.com/ Chip

    I got 72,22%. Gotta learn some more.

  • Keshav

    I got 77.78%.. I m happy :)

    can you please the information/ examples with all questions

  • http://about.me/kpobococ Anton Suprun

    I’m sorry, but the wbr tag was not introduced by HTML5. Rather, it was already supported quite widely, and was finally adopted by the spec. You should rephrase the question.

  • Guy

    Very nice!
    got me reading a bit..

  • Ganesh Kondalkar

    Only 61.11% :(

    Question NO: 2, 5, 8, 11, 13, 16, 18 were wrong

    Need to read a lot on HTML5

    hushhhhhhhhhhhhhhh!!!!!!!!!!!!!!!!!

  • http://www.code-pal.com Sumeet Chawla

    Question 15 has the answer to question 13 :P