HTML5 Reference Poster

  • Print Friendly and PDF
  • Print Friendly and PDF

HTML5 is the hot cake today. Everybody in the community is making efforts to promote the language, and to make it easier to use and learn. W3C has even announced a new logo for HTML5 to give it a new face.

We have made a modest effort to create a HTML5 Reference Poster; we hope that this poster makes it easier to use HTML, for professionals with varied experience levels. As a thankful gesture to W3C, we have used the HTML5′s new logo.

HTML5 Reference Poster

Design
The poster is designed keeping in mind that it looks beautiful and professional in your office, your lab, the conference room, and why not in your living room if you are living HTML day in and day out!

Features
This poster covers all HTML5 tags (almost, because HTML5 is still in development). Each tag is followed by its semantic meaning, and all attributes supported by the tag. Tags and attributes, which are new to HTML5 are marked with color symbols, so that they are highlighted and easily distinguished from other tags.

Tags are grouped in 8 categorized tables to make it easier to find and manage them.

  • Metadata and scripting
  • Document sections
  • Grouping content
  • Text-level semantics
  • Forms
  • Tabular data
  • Interactive elements
  • Embedding content

The poster also covers icons of technology classes and their meaning, to make it easier for you to identify and understand the icons when you see the new HTML5 badge with these icons, on a website.

Bonus: In addition we have added a “HTML5 Document template” to help you start your next HTML5 document easily, and a list of HTML’s differences with HTML 4.01 and XHTML 1.x, and a list of new scripting APIs added in HTML5.

Download Poster

Update:

  • uprinting offers a poster printing service in U.S. and Canada.
  • mybigposter offers a poster printing service in Europe.
  • Contact us if you want us to send you a printed copy.

  • http://twitter.com/SteveReckless Steve Reckless

    Brilliant poster; succinct and informative

  • http://www.facebook.com/jtrag James Trageser

    Awesome!  Thanks for sharing!  This is an excellent, very handy resource to have while learning the new HTML 5!

    Great work!

  • http://www.thoughtresults.com Saeed Neamati

    This is a single PDF file, which is gonna serve me for at least next 5 years. Great work. Thanks. I love HTML5.

  • http://www.imarkus.com Rick

    Does this file have some sort of password protection when trying to blow it up to poster size? I took it to a printer this afternoon and they said they couldn’t blow it up because there was a password prompt. He was trying to place it in InDesign first before he sent it over though so I’m not sure he knew what he was doing.

    • http://www.xhtml-lab.com Jaspreet Kaur

      This file is password protected for editing, so you can not open it in inDesign or any other editing software, you can print directly from PDF.

      • http://www.imarkus.com Rick

        The printer I took it to said they could only print to 11×17 from a PDF. They had to print it from within InDesign to get it to print to their poster printer. Not sure if that’s standard MO at print shops or they are doing it wrong.

        11×17 is too small to read so I still have a nice blank space on my wall where this poster would look nice.

        • http://www.xhtml-lab.com Jaspreet Kaur

          Rick, i confirmed with my printer and he said it’s completely possible to print directly from PDF files on any size of paper.

  • http://oscarstech.com/ Oscar Gonzalez

    Really slick. Thanks for sharing!

  • http://twitter.com/iandevlin Ian Devlin

    Kudos for not lumping the W3C Geolocation API into your list of HTML5 APIs.

  • http://twitter.com/kesarito César Rodríguez

    nice :-) )

  • http://twitter.com/robscharf Rob Scharf

    Very nice. Thanks.

  • sam_hh

    thanks :)

  • http://twitter.com/CarloRizzante Carlo Rizzanteʕ•̫͡•ʔ

    Thanks, very useful!
    ps. New logo for HTML5? I like the actual one.

  • http://twitter.com/CTREIA CTREIA

    There is a misspelling in section.

  • http://askmatthewpotter.com Matthew Potter

    @twitter-24367989:disqus Indeed, under the Document sections, they have most likely been using Illustrator or InDesign while creating this and had tried switching to the selection tool a couple of times. (We’re all used to this problem) The word “Heading” has been saved as vveading.

  • Jordan

    Nice

  • http://www.xhtml-lab.com Jaspreet Kaur

    I am working on CSS 3 poster, i will put this on my website in couple of weeks hopefully.

  • http://www.xhtml-lab.com Jaspreet Kaur

    Thank you all for pointing out all errors, i will fix them soon. Let me know if you have any other suggestions to improve the poster.

  • Daniel Abramov

    Why use Courier New? It hurts my aesthetic sense and eyes as well.
    Please use Consolas for code instead.

  • http://NewEvolutionDesigns.com Tom @NewEvolution

    Sweet!

  • http://twitter.com/Joomla_SriLanka Joomla Sri Lanka

    Wow, great stuff , shared

  • http://jakubrusinek.pl/ Jakub Rusinek

    Tried printing it.

    I only got mad at my printers (one says it lacks tint; another takes ages, can’t print marginless and crops printed documents).

    Quicker’d be to make such a poster myself. And it would be quite a lesson…

  • http://www.kentwebhost.co.uk/ Garry

    Flipping awesome poster – trouble is can only print it in A4. Great for reference – thanks!

  • http://twitter.com/freepowerpoint Free Powerpoint

    Awesome poster ! Very illustrative.

  • michaelyap

    Nice. thanks for all the hard work.
    To those speaking English elsewhere, the size is 594 x 841 mm.
    Its big, correct me if i’m wrong, i think that’s A3 width and A2 height

    • http://www.xhtml-lab.com Jaspreet Kaur

      Poster’s size is A1, it’s bigger then both A3 and A2.

    • Tony R.

      . Install Inkscape (free) on your system, then import the PDF and scale the image to fit whatever sheet size you like.  Inkscape allows one to scale the x and y dimensions independently, so you can make it a little narrower and taller, or whatever.

      I tried it with Inkscape 0.48 and it works beautifully.  After scaling you can even re-export it as a new PDF.

    • http://www.facebook.com/andreij.hoch Andreij Hoch

      “A3 width and A2 height” :D

  • http://twitter.com/24daiting 24daiting

    Excellent article, thank you very much. We must try!

  • http://twitter.com/24daiting 24daiting

    Excellent article, thank you very much. We must try!

  • http://askmatthewpotter.com Matthew Potter

    Can I ask for an update for printing? The document seems to have been created in RGB. All of the blacks are rich. If I send this to a professional printer, they will either convert the RGB black to a 98% grey (through pre-press processes) or scream at me to get a new file that not over saturated.

  • http://www.xhtml-lab.com/ Jaspreet Kaur

    Where do you see the issues with grid? It’s used as a pattern so it can’t be darker at some places. Also I have a printed copy of poster on my wall, and I do not see any issue with colors or readability of the poster.

  • refreshedco

    Could I resell this poster?

© copyright 2011 XHTML-Lab.com, all rights reserved.