HTML 5 Cheat Sheet (PDF)

XHTML 2 is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.

So in the spirit of the upcoming change we decided to release a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. We’ll do our best to update the cheat sheet when new changes will become known. The cheat sheet was created by our friends from Veign.com and released exclusively for the readers of Smashing Magazine.

Download the cheat sheet for free!

preview (.gif, 1017×836px)
download the pdf (76 Kb)

Thank you very much, Chris Hanscom! We appreciate your efforts.

Further Resources About HTML 5

Yes, You Can Use HTML 5 Today!
There have been many changes to the HTML 5 landscape since Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.
HTML 5 Demos
A couple of HTML 5 examples and experiments.
HTML 5 Doctor
This blog publishes articles relating to HTML5 and it’s semantics and how to use them, here and now.
A Selection of Supported Features in HTML5
A Selection of Supported Features in HTML5.
4 Useful HTML5 Browser Support Overviews
HTML 5 Gallery
A showcase of sites using html5 markup.

Do you already use HTML 5 in your projects? Would you recommend using HTML 5? Let us know in the comments!

Tags:Cheat Sheets Downloads Freebies HTML PDF

↑ Back to top Share on Twitter

Smashing Editorial Team

We love high-quality content and we care about little details. We believe that good content and design are crafts worth sharpening. Located in the lovely city of Freiburg, Germany. Mostly Vitaly (vf), Iris (il) and Sven (sl).

Advertising

112 Comments
Best Comments

101

Volledig Al Azar
September 10th, 2011 12:44 am

What’s with the password on the .pdf file?

Reply

+1
- 102
  
  Bobbie J
  January 26th, 2012 1:05 pm
  
  The cheat sheet is asking for a password
  
  Reply
  
  0
103

sliceyweb
October 25th, 2011 2:19 am

Great! Very useful information!

Thanks!

Reply

0
104

K
October 27th, 2011 8:13 pm

Thanks. Phew ~ I finally get the cheat sheet. :)

Reply

0
105

Shridhara
November 5th, 2011 1:53 am

This will be useful for some time….

Reply

0
106

vkwave
December 21st, 2011 1:30 pm

Thanks for sharing :) Very helpful

Reply

0
107

Daniel
December 27th, 2011 1:33 pm

Hey guys,

the .pdf is totally empty / blank shown in my mac Vorschau…

Is it broken?

cheers,
daniel

Reply

+3

« Previous

1

Julian Flockton
July 6th, 2009 1:38 am

That’s exactly what I need. Thanks for publishing. Great Post!

+5
2

Daniel
December 27th, 2011 1:33 pm

Hey guys,

the .pdf is totally empty / blank shown in my mac Vorschau…

Is it broken?

cheers,
daniel

+3
3

Ryan Roberts
July 6th, 2009 2:03 am

Hmm “exploitation” above should be explanation.

Anyway here are some excerpts from the HTML spec…

The small element represents small print or other side comments.

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

+2
4

Ryan Roberts
July 6th, 2009 2:22 am

So not only is the cheat sheet inaccurate (or at least insufficient) with descriptions of elements, but this article is misleading.

Here is the HTML 5 timeline as it currently stands:

* First W3C Working Draft in October 2007.
* Last Call Working Draft in October 2009.
* Call for contributions for the test suite in 2011.

* Candidate Recommendation in 2012.

* First draft of test suite in 2012.
* Second draft of test suite in 2015.
* Final version of test suite in 2019.
* Reissued Last Call Working Draft in 2020.

* Proposed Recommendation in 2022.

As you can see HTML 5 should be ready in a couple of years, by 2022 it should be fully supported by at least two browsers. Considering CSS2 has been around for 10 years and (afaik) doesn’t have full support by at least two browsers I think focusing on the 2022 date is daft. Heck I don’t think there are even two browsers that have complete support to the spec for HTML4 or XHTML.

+2
5

Sean
July 6th, 2009 5:57 am

Too bad they pulled the video tag from the specs because none of the major companies could agree on a codec.

Apple refuses to use Ogg Theora
Google can’t provide 3rd party licenses for H.264
Opera and Mozilla refuses to implement H.264 because of licensing issues
Microsoft does what it always does… sit around an say or do nothing

+2
6

Googlelover
November 19th, 2010 6:44 am

Check out the Google interactive guidebook of web in HTML5. http://techshrimp.com/2010/11/19/google-launches-interactive-online-guidebook-to-teach-all-about-web/

+2
7

Devon Young
June 4th, 2011 9:48 am

Isn’t that cheatsheet a little outdated? I just downloaded it, & noticed it was made in 2009. There’s no mention of it being updated since then, but there’s been a number of changes in HTML5 since 2009 if I remember right.

+2
8

Tommy
May 31st, 2011 12:15 am

all web design cheat sheet : http://html5example.net/entry/tutorial/cheat-sheets-collection

Html5 cheat sheet : http://html5example.net/entry/html5-reference/html-5-visual-cheat-sheet

+2
9

yan
August 31st, 2011 5:24 am

thanks, very good html5

+2
10

Mahesh
July 6th, 2009 1:42 am

Thanks.. Downloading now!!

+1
11

artmania
July 6th, 2009 1:43 am

wow great, thanks!!!! ;)

+1
12

Rob
July 6th, 2009 1:54 am

So they’re still stopping short of deprecating all semantically useless elements such as “bold”, “italic” and “small”. Shame. Still useful checklist nonetheless.

+1
13

A Web Designer
July 6th, 2009 5:25 am

If only 8% of people know what a browser means, Why are Mozilla and Google not advertising on the radio to simply explain that the dumb internet explorer is not the best choice.

They can run short ads on CBS 1010Wins..

I am sure this will open the minds of non geeky people that are the only ones understanding what a browser is all about.

+1
14

Rob
July 6th, 2009 5:38 am

For those who don’t know, standards are built upon implementations. Standards body rarely “invent” anything. The reason for the 2022 date, which is only an estimate, is that two or more browser vendors have to successfully implement a method for it to be included in the standard. So, while the document may not be finished till then, many of us web developers are happily using HTML5 right now.

Remember, CSS2.1 was only finalized about two years ago.

Note: anyone waiting for Internet Explorer to catch up to this, Microsoft doesn’t even show up for the meetings yet they are co-chair of the working group so you’ve got a long, long wait.

+1
15

HTML?
April 20th, 2010 2:08 pm

Lets see…. the world is going to self destruct in 2012… so they better pick up the pace :-)

+1
16

tony_zhang
May 4th, 2010 1:02 am

very good. tanks

+1
17

Myto
June 18th, 2010 5:43 pm

Great！ that’s my need

+1
18

HozZzLi
May 17th, 2010 7:48 am

Nice work…
Thanks to U fulL….

+1
19

Posicionamiento Web
August 30th, 2010 1:35 pm

Appreciate the effort, but, well, it’s too big for a quick cheat sheet and contains too little information for like a reference guide?

+1
20

Munuswamy
August 21st, 2010 2:26 am

Its great to see the tags used in HTML 5. But it will be useful and used when all the browser all compatible with that syntax. I think it will take around 5 to 6 years to reach that position.

+1
21

smalllotus
September 3rd, 2010 2:24 am

I think I should study HTML5 now~~:)~~~haha

+1
22

InkSketch
October 2nd, 2010 6:18 am

Very useful. Thank you for providing this.

+1
23

Brett Widmann
October 22nd, 2010 4:14 pm

Exactly what I needed! Thanks for the info!

+1
24

Music
January 6th, 2011 9:40 am

Really Useful……….. Thanks alot….. alot…. alot….:-)

+1
25

sai
July 19th, 2011 2:41 am

thanks ,with this i can design my web pages much more efficiently

+1
26

yan
August 31st, 2011 5:26 am

its fine

+1
27

Volledig Al Azar
September 10th, 2011 12:44 am

What’s with the password on the .pdf file?

+1
28

Naresh
November 21st, 2011 3:16 am

thank u it download i

+1

« Previous

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!