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 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!

HTML 5 Cheat Sheet

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!

Tags:Cheat SheetsDownloadsFreebiesPDF

↑ Back to top

The Smashing Editorial loves high-quality content and cares about little details. We also believe that content and design are crafts worth sharpening.

Related Articles

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

VI Editor / Linux Terminal Cheat Sheet (PDF)

VI Editor / Linux Terminal Cheat Sheet (PDF)

Photoshop Keyboard Shortcuts Cheat Sheet (PDF)

Photoshop Keyboard Shortcuts Cheat Sheet (PDF)

  1. 101

    Volledig Al Azar

    September 10th, 2011 12:44 am

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

    Reply
    0
  2. 104

    sliceyweb

    October 25th, 2011 2:19 am

    Great! Very useful information!

    Thanks!

    Reply
    0
  3. 105

    K

    October 27th, 2011 8:13 pm

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

    Reply
    +1
  4. 106

    Shridhara

    November 5th, 2011 1:53 am

    This will be useful for some time….

    Reply
    +1
  5. 107

    vkwave

    December 21st, 2011 1:30 pm

    Thanks for sharing :) Very helpful

    Reply
    0
  6. 108

    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
    +20
  7. 109

    Jacques Le Roux

    April 30th, 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

    Reply
    0
  8. 110

    Misty Beier

    May 14th, 2012 12:09 am

    Thank you! This will come in handy!

    Reply
    +1
  9. 111

    Picky

    July 21st, 2012 1:55 am

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

    Reply
    0
  10. 112

    Mohannad

    August 20th, 2012 7:29 pm

    This is awesome ,,, Thanks.

    Reply
    +1
  11. 113

    Mirko

    August 24th, 2012 6:49 pm

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

    Reply
    0
  12. 114

    radix018

    September 30th, 2012 11:37 am

    Great ! just in time :)

    Thanx for sharing.

    Reply
    0
  13. 115

    shahin

    February 14th, 2013 8:06 pm

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

    Reply
    0
  14. 116

    Jeff Rivers

    March 28th, 2013 5:17 pm

    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!

    Reply
    +2
1

  1. 1

    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

    +20
  2. 2

    Julian Flockton

    July 6th, 2009 1:38 am

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

    +5
  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. 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. 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. 6
  7. 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. 8
  9. 9

    yan

    August 31st, 2011 5:24 am

    thanks, very good html5

    +2
  10. 10

    Jeff Rivers

    March 28th, 2013 5:17 pm

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

    Shridhara

    November 5th, 2011 1:53 am

    This will be useful for some time….

    +1
  12. 12

    Mahesh

    July 6th, 2009 1:42 am

    Thanks.. Downloading now!!

    +1
  13. 13

    artmania

    July 6th, 2009 1:43 am

    wow great, thanks!!!! ;)

    +1
  14. 14

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

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

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

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

    tony_zhang

    May 4th, 2010 1:02 am

    very good. tanks

    +1
  19. 19

    Myto

    June 18th, 2010 5:43 pm

    Great！ that’s my need

    +1
  20. 20

    HozZzLi

    May 17th, 2010 7:48 am

    Nice work…
    Thanks to U fulL….

    +1
  21. 21

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

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

    smalllotus

    September 3rd, 2010 2:24 am

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

    +1
  24. 24

    InkSketch

    October 2nd, 2010 6:18 am

    Very useful. Thank you for providing this.

    +1
  25. 25

    Brett Widmann

    October 22nd, 2010 4:14 pm

    Exactly what I needed! Thanks for the info!

    +1
  26. 26

    Music

    January 6th, 2011 9:40 am

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

    +1
  27. 27

    K

    October 27th, 2011 8:13 pm

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

    +1
  28. 28

    sai

    July 19th, 2011 2:41 am

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

    +1
  29. 29

    yan

    August 31st, 2011 5:26 am

    its fine

    +1
  30. 30

    Mohannad

    August 20th, 2012 7:29 pm

    This is awesome ,,, Thanks.

    +1
1

Leave a Comment

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!

↑ Back to top