HTML5 Reference Poster
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.
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.
Update:
- uprinting offers a poster printing service in U.S. and Canada.
- mybigposter offers a poster printing service in Europe.
Brilliant poster; succinct and informative
Awesome! Thanks for sharing! This is an excellent, very handy resource to have while learning the new HTML 5!
Great work!
This is a single PDF file, which is gonna serve me for at least next 5 years. Great work. Thanks. I love HTML5.
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.
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.
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.
Rick, i confirmed with my printer and he said it’s completely possible to print directly from PDF files on any size of paper.
Really slick. Thanks for sharing!
Kudos for not lumping the W3C Geolocation API into your list of HTML5 APIs.
nice :-))
Very nice. Thanks.
thanks 🙂
Thanks, very useful!
ps. New logo for HTML5? I like the actual one.
There is a misspelling in section.
@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.
Nice
This arclite keeps it real, no doubt.
I am working on CSS 3 poster, i will put this on my website in couple of weeks hopefully.
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.
Why use Courier New? It hurts my aesthetic sense and eyes as well.
Please use Consolas for code instead.
Sweet!
Wow, great stuff , shared
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…
Flipping awesome poster – trouble is can only print it in A4. Great for reference – thanks!
Awesome poster ! Very illustrative.
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
Poster’s size is A1, it’s bigger then both A3 and A2.
. 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.
“A3 width and A2 height” 😀
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.
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.
Could I resell this poster?
This poster is free, we are not selling it.
I love your blog.. very nice colors & theme. Did you
create this website yourself or did you hire someone to do it for you?
Plz respond as I’m looking to construct my own blog and would like to find out where u got this from.
thanks