HTML 5 Cheat Sheet (PDF)

Advertisement

XHTML 2 is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work1 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 20222, 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.com3 and released exclusively for the readers of Smashing Magazine.

Download the cheat sheet for free!

HTML 5 Cheat Sheet4

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

Further Resources About HTML 5

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

Footnotes

  1. 1 http://www.zeldman.com/2009/07/02/xhtml-wtf/
  2. 2 http://www.webmonkey.com/blog/HTML_5_Won_t_Be_Ready_Until_2022DOT_Yes__2022DOT
  3. 3 http://www.veign.com
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/preview.gif
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
  7. 7 http://www.sitepoint.com/article/html-5-snapshot-2009/
  8. 8 http://www.alistapart.com/articles/previewofhtml5/
  9. 9 http://html5demos.com/
  10. 10 http://html5doctor.com/
  11. 11 http://molly.com/html5/html5-0709.html
  12. 12 http://www.hagenburger.net/2009/05/4-useful-html5-browser-support-overviews
  13. 13 http://html5gallery.com/

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Nice post!!!thanks for publishing =)

    1
  2. 2

    Julian Flockton

    July 6, 2009 1:38 am

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

    5
  3. 3

    Thanks.. Downloading now!!

    1
  4. 4

    wow great, thanks!!!! ;)

    1
  5. 5

    Thanx for the Cheatsheet!

    0
  6. 6

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

    1
  7. 7

    HTML 5 will be ready by 2012, it may not have 100% support until 2020.

    @Rob

    Small has a semantic purpose in marking up small print. b and i were argued over long and hard and they have been given new semantic purpose. Check out the spec to see what it says because it looks like the cheat sheet lacks proper exploitation or is simply wrong.

    HTML 5 i element

    <HTML 5 i element

    0
  8. 8

    Muhammad Adnan

    July 6, 2009 2:02 am

    thanks , i just downloaded it.

    0
  9. 9

    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
  10. 10

    Łukasz Adamczuk

    July 6, 2009 2:09 am

    OK, but how long we should wait for support in modern browsers

    0
  11. 11

    “HTML not fully supported until 2022″ is the stupidest thing I’ve ever heard about the web. Considering the development over the last 15 years, I would hope that no-one is using anything like HTML5 in 13 years time. If this can’t be fully supported in the next 5 years, then we should all pack up and go home.
    Thanks for the cheat sheet, thought, great resource.

    0
  12. 12

    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
  13. 13

    When you really think about it, such a rigorous, pre-defined imposed definition of how we should build/markup our webpages is killing creativity and progress (creative and technical) in the long end. Why a tag for content on the side of the page …. do we all want to look or feel the same?

    I’d say be gone with the markup spec and concentrate on javascript… build a nice set of browser built-in ui components we can use but leave enough room for progress and outside-the-box solutions! like flash …. without flash!

    0
    • 14

      @Simon/#13

      Well in a perfect world, we’d use XHTML/XML with javascript and css instead of html+flash.

      In this case, it looks like they’re going for HTML only which is going to suck..

      @ #31

      Nah, MSFT plays it smart and supports the majority, just like they’ve always done. They’re dropping that now in favour of newer technologies, but they became the biggest by allowing people to do whatever they want. IE would render code that was horrible by most standards, XP would load drivers that are barely readable. ‘shrugs’
      Granted, they did that by ignoring some of the new specs, but as they can change fairly rapidly, I’m not too worried about that. :P
      As the article said, full support isn’t expected till 2022. If MSFT chooses to keep XHTML till then, then that’s something I can live with.

      0
  14. 15

    Great! Thanks! =)

    0
  15. 16

    @simon

    The problem there is you are focusing on the web visually, HTML has no interest in your presentational creativity (how things look) as it is primarily a semantic markup language and there to provide meaning to content.

    The aside element (which I assume you’re referring to) “represents a section of a page that consists of content that is tangentially related to the content around the aside element”. It isn’t for content on the side of a page visually, you handle that using CSS.

    Javascript or a Flash like alternative simply can’t replace the underlying power of HTML, but they certainly play a part in other layers outside of HTML (behaviour, presentation etc).

    0
  16. 17

    I gotta say, building Web sites was a lot more fun when frames were all the rage, the king of the hill WYSIWYG editor was Adobe PageMill, and a little German company called GoLive had a product called CyberStudio that was just starting to kick everybody’s ass.

    Somewhere along the way it became uncool to use WYSIWYG, unacceptable to not use CSS, and completely “no fun” no matter what you use.

    0
  17. 18

    Let’s go whole hog shall we and start using tables again for layout…!

    0
  18. 20

    Ignore this comment, I wasn’t getting the grey backgrounds ;)

    0
  19. 21

    W3C should curl up and die already.

    They are like a bunch of doctors chatting and drinking coffee in the emergency room filled with people dying.

    0
  20. 22

    I’ve been doing a lot of WebKit-specific development recently (iPhone/Android/Pre web apps) and I’m making extensive use of HTML5 elements including header, article, section, nav, time, etc. Not only that, it makes me happy to use a DOCTYPE I don’t have to look up whenever I create a new file.

    0
  21. 23

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

    0
  22. 24

    lol I could be dead in 2022!

    0
    • 25

      Ya, you should be! In fact all of us will! And W3C with that HTML5 specification will be lying under 20 feet of sands for posterity!

      0
  23. 26

    It’s fun that the input-tag, will have “patterm” instead of “pattern”.
    Kind of…

    0
  24. 27

    Armig Esfahani

    July 6, 2009 4:56 am

    yup this can be so useful sometimes

    0
  25. 28

    I don’t understand why they kept both , and , .. one would be enought

    0
  26. 29

    A Web Designer

    July 6, 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
  27. 30

    Hopefully by 2022 I will have retired. Just sitting around a pool sipping on a cool drink. Seriously what’s the point of coming up with new specs if the browsers won’t be supporting them?

    -1
  28. 31

    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 there 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.

    0
  29. 32

    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
  30. 33

    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
  31. 34

    Defo going to place one of these on my desktop

    0
  32. 35

    HTML 5 have no <acronym> tag, we use <abbr> tag for both abbreviation or acronym. Check before posting.

    The abbr element represents an abbreviation or acronym, optionally with its expansion.

    -1
  33. 36

    This is Stupid

    July 6, 2009 7:28 am

    I don’t understand the point of this at all. If current browser’s don’t support/understand HTML 5 today, why use it?

    Maybe I’m misunderstanding something, but if ie8 only just has gotten close to full support for CSS2, and not even really begun with CSS3, why would I use a spec that’s not expected to be even recommended in the next 10 years?

    It’s great to be forward thinking, but I think it’s ridiculous to put out a spec and be like well it’s not ready, but you can use it, but most browser won’t support it, and we haven’t really decided what we’re keeping or not keeping… and the list goes on.

    This is like the ‘N’ Band for wireless. Pointless.

    0
  34. 37

    It would be nice to have a browser support heading, as that is my biggest hold back on adopting newer technologies into my sites.

    0
  35. 38

    @This is Stupid

    How do you think this is supposed to work? HTML4 and XHTML weren’t released with full support from browsers, and as I said earlier there isn’t even 100% support for either HTML4 or the XHTML specs.

    If you don’t want to use HTML 5 then don’t, nobody is forcing you but there will always be early adopters and people pushing the limits of technology. There are already sites working in HTML 5 and the more support it gets from designers and developers the more likely it will happen. XHTML 2 had barely any support at all from any angle and rightly got dropped.

    Officially it is not ready to be used so I don’t see where you get the idea that this is the word.

    Most browsers will support HTML 5, they’ve already started.

    As I’ve already stated HTML 5 will be a candidate recommendation within 2.5 years not 10. Last call for the working draft is just over 3 months away. If you think it’s pointless until there’s complete widespread support from browsers then you may as well dump all the technology we use.

    -1
  36. 39

    Jérôme Coupé

    July 6, 2009 7:40 am

    XHTML is dead, long live HTML 5

    That kind of statment can be quite confusing for people
    XHTML is not dead, XHTML 2 is / might be. As mentioned on the WHATWG Wiki, there is an XML serialisation of HTML 5: XHTML 5.
    The HTML Spec tagline says it as well: “A vocabulary and associated APIs for HTML and XHTML”

    0
  37. 40

    Jérôme Coupé

    July 6, 2009 7:47 am

    XHTML is dead, long live HTML 5

    That kind of statment can be quite confusing for people

    XHTML is not dead, XHTML 2 is. As mentioned in the WHATWG WIKI, there is an XML serialisation of HTML 5: XHTML 5.

    The HTML Spec tagline says it as well: “A vocabulary and associated APIs for HTML and XHTML”

    Thanks for the writeup and resources

    0
  38. 41

    2022??? I think’s a long time… in 2022 the Internet will be so changed…

    0
  39. 42

    Thanks, in Firefox I can’t see the download links. Ie/Chrome they appear fine. I’ve noticed this on other posts too.

    0
  40. 43

    Nothing to cry about. Anyway, it is a progress, not a regress.

    0
  41. 44

    I think the question people want to know – from a practical standpoint – is when would it be wise to start using html5. When a 13 year timeline is mentioned for full support, but it “could” be used within a few years, my initial inclination is to think it isn’t worth the trouble yet. Am I asking a more subjective question with too much gray area to give a solid answer? I think this article should at least make an attempt to give answers to that within certain contexts. For example, in a corporate environment where you need to support every browser possible, you might not want to switch yet. For a more tech savvy blog reading crowd, now’s the time. These are just made up examples but things i’d like to get some professional opinions on.

    0
  42. 45

    The new tags cannot be used as normal divs. You have to put divs inside of those tags which doesn’t prevent IE rendering the markup with a chaotic result. Looking at the first htlm5-markups it look a little bit like a table layout.

    By the way, there is a conflict between semantic structuring with html5 and the way of wrapping divs in current webdesign which you will take notice of when starting to code in html5 :)

    To enable the machines understanding our websides a little bit more semantically, why didn’t Google just simply announce the convention, the navigation should be inside a div called “nav”, putting the content inside a div called “content”, resp. footer, header, aside etc. If you follow this convention you will get a higher page rank. This would have made the web more semantical within two years.

    Long live XHTML 1!

    0
  43. 46

    For the next 10 years, I’ll let technology take its course. Then, I will look at this posting again and it will probably evoke alot of thought. :)

    0
  44. 47

    The danger is we end up with 2 internets – one based on HTML5 / CSS3 standards which can be accessed by Gecko and Webkit browsers and another internet specially for Internet Explorer users which relies on propriety code like Silverlight. That’s what Micro$oft wants and that’s certainly the way things are going.

    Who knows, HTML and CSS may have been superseded by something completely different by 2022. The problem is that even web standards are desperately struggling to keep up with the pace of modern internet development.

    0
  45. 48

    anyone know why acronym was deprecated? Seems perfectly semantic and useful to me.

    0
  46. 49

    i really like these articles

    0
  47. 50

    We need better server side language so we can bypass waiting.
    A lovely rendering engine for our clients needs and ours…

    Pipe dreams.

    0
  48. 51

    We destroy countries in less time than it takes the W3C to do their damn job.

    0
  49. 52

    tnx a lot , that’s great .

    0
  50. 53

    @Matt Barnes

    anyone know why acronym was deprecated? Seems perfectly semantic and useful to me.

    Many considered it confusing , people weren’t sure when to use acronym or abbr so it was settled that abbr would do the job alone.

    0
  51. 54

    can we get one of these for CSS3? I’d like to read all the comments people have about it’s implementation ; – )

    0
  52. 55

    Philippe Mercier

    July 6, 2009 5:12 pm

    Maybe if Ebay, Facebook, Google…. start using CSS3 and stuff and tell there users that they drop support for internet explorer. maybe that the stupid internet explorer developers get a wake up call, until then we will have to wait 5 years!

    0
  53. 56

    I can picture everyone having to code in XHMTL and HTML5. It’ll be a big pain in the ass just like it is to make sites look and act the same between all browsers.

    0
  54. 57

    I’ve been waiting for this, THANKS!

    0
  55. 58

    Sweet, it’s a shame we won’t be able to use all this for a few years. no time like the present to learn though.

    0
  56. 59

    2022!

    0
  57. 60

    James McWhorter

    July 7, 2009 5:07 am

    This is going on my wall!

    0
  58. 61

    This cheat sheet is a piece of crap.

    0
  59. 62

    thanks good work

    0
  60. 64

    Jeremy Keith posted a really helpful summary of the whole HTML5 / XHTML2 situation. May be of interest to some who have commented here. Link

    0
  61. 65

    Your HTML 4.01 xmp element is new to me.

    0
  62. 66

    Thanks ^^

    0
  63. 67

    That’s cool, I’m going to create a HTML 5 site just for fun, to see what it’s like. The only problem I have is how it’s making coding so accessible, it’s going to turn into something anyone can do. :(

    0
  64. 68

    LaunchTulsa.com

    July 10, 2009 6:39 pm

    Thanks. I have been looking for something like this.

    0
  65. 69

    i have found an interesting website to convert html documents to pdf easily – you should have a look at html to pdf

    0
  66. 70

    must have for every web geek….thanks

    0
  67. 71

    Nancy Grossbart

    July 13, 2009 11:38 am

    All in one place! This is fantastic. Thanks. This is going to be big help.

    0
  68. 72

    thanks, will come in handy!

    now for the browsers…

    0
  69. 73

    Thank you so much!

    0
  70. 74

    @Sean
    the video tag HASN’T been dropped. The information about using ogg theora was removed NOT the video tag.

    the current situation is
    Apple, Google, Mozilla and Opera ALL use the video tag
    Apple won’t support ogg theora cause of possible patent issues
    Google will support both ogg theora and H.264
    Mozilla and Opera won’t support H.264 cause of licensing issues
    Microsoft doesn’t support the video tag

    0
  71. 75

    what i needed i am going to show a website on school so am sure it will help very much thanks a lot :-)

    0
  72. 76

    I’m attempting to use HTML5 with my latest project A Happier Hour. I started using Firefox (3.5) as my baseline, then realized how broken it was on older browsers. So far, my compromise has been to use the HTML5 elements with a div nested just inside for other browsers to hook on to. I’m not sure if that is worse than the javascript workaround, but it works on a very wide array of browsers new and old.

    0
  73. 77

    not bad…copy freely from it!!!

    0
  74. 78

    Very nice! I’ll print it out and have it handy. Thanks!

    0
  75. 79

    Your DOCTYPE information is at best misleading. The spec very clearly defines it:
    http://www.w3.org/TR/html5/syntax.html#the-doctype

    0
  76. 80

    Will it be possible, within 5 years, to have HTML5 without having to hack support using Javascript?

    When will IE6 die? It’s holding the whole world up! It’s getting embarrassing now.

    0
  77. 81

    its good for us

    0
  78. 82

    Hopefully by 2022 I will have retired. Just sitting around a pool sipping on a cool drink. Seriously what’s the point of coming up with new specs if the browsers won’t be supporting them?

    0
  79. 83

    Thanks,

    It would be good if you highlight the new elements

    0
  80. 84

    thanks a lot!

    Regards,
    C.

    0
  81. 85

    This cheatsheet is outdated. is not on the spec.
    Here is a list (not put out by smashing).

    http://www.w3schools.com/html5/html5_reference.asp

    0
  82. 86

    Bhausaheb Zaware

    March 25, 2010 12:26 am

    Wow! Gr8. This is very useful information.

    0
  83. 87

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

    1
  84. 88

    very good. tanks

    1
  85. 89

    Nice work…
    Thanks to U fulL….

    1
  86. 90

    Great! that’s my need

    1
  87. 91

    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
  88. 92

    Posicionamiento Web

    August 30, 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
  89. 93

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

    1
  90. 94

    Very useful. Thank you for providing this.

    1
  91. 95

    Exactly what I needed! Thanks for the info!

    1
  92. 96
  93. 97

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

    1
  94. 98
  95. 99

    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.

    3
  96. 100

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

    1
  97. 101

    thanks, very good html5

    2
  98. 103

    I am new with HTML 5 and want to perfect on this, so please guide me how can i start to learn HTML 5, I am a UI Developer and i am familiar with this.

    0
  99. 104

    thank you so much… really its very useful…

    0
  100. 105

    You can find more resources & HTML5 Apps Examples & Showcases here.
    http://www.facebook.com/html5apps

    0
  101. 106

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

    0
  102. 109

    Great! Very useful information!

    Thanks!

    0
  103. 110

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

    1
  104. 111

    This will be useful for some time….

    1
  105. 112

    Thanks for sharing :) Very helpful

    0
  106. 113

    Hey guys,

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

    Is it broken?

    cheers,
    daniel

    20
  107. 114

    Jacques Le Roux

    April 30, 2012 5:17 pm

    Thanks, I have been looking for these types of sheets to use for quick reference, they are perfectly presented and easy to use

    Thanks Again

    0
  108. 115

    Thank you! This will come in handy!

    1
  109. 116

    Great work, value the effort. But… let’s be nice and keep HTML5 with NO SPACE.

    0
  110. 117

    This is awesome ,,, Thanks.

    1
  111. 118

    “No comments.” = I opened over 50 links for a Cheat Sheet like this ( that includes all attributes that can be given aswell ) Recommended best cheat sheet on web available at the moment.

    0
  112. 119

    Great ! just in time :)

    Thanx for sharing.

    0
  113. 120

    i very searched for something like this, was great
    thank you

    0
  114. 121

    Sounds like a great resource, but when I click on the ‘Download’ link, a blank document displays. Any chance of getting this fixed or reposted? Thanks!

    2
  115. 122

    I also get a 4 page blank document. The CSS3 sheet downloads fine and is excellent. I’d love to see the HTML5 sheet.

    0
  116. 123

    When downloading the file it asks for a password, the CSS sheet does not. Any chance you will post the password or remove it from the file?

    0
  117. 124

    Very useful. I would need cheat sheets made exactly like this for all of the major programming languages.

    0
  118. 125

    Best cheat sheet for HTML5 iv found on the net.
    Also the CSS3 cheat sheet is better then all iv found on the net

    0
  119. 126

    Nice post….

    0

↑ Back to top