Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

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

HTML 5 Cheat Sheet4

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

Further Resources About HTML 5 Link

  • Yes, You Can Use HTML 5 Today!7
    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.8 Let’s see what’s happening in the world of HTML 5.
  • HTML 5 Demos9
    A couple of HTML 5 examples and experiments.
  • HTML 5 Doctor10
    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 Gallery11
    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!

Footnotes Link

  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 https://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/preview.gif
  6. 6 https://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://html5gallery.com/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Julian Flockton

    July 6, 2009 1:38 am

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

    6
  2. 2

    wow great, thanks!!!! ;)

    0
  3. 3

    Nice post!!!thanks for publishing =)

    2
  4. 4

    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.

    1
  5. 5

    Thanks.. Downloading now!!

    1
  6. 6

    Thanx for the Cheatsheet!

    0
  7. 7

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

    1
  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

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

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

    Great! Thanks! =)

    0
  14. 15

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

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

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

    0
  17. 19

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

    0
  18. 20

    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
  19. 21

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

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

    lol I could be dead in 2022!

    0
    • 24

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

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

    0
  23. 26

    Armig Esfahani

    July 6, 2009 4:56 am

    yup this can be so useful sometimes

    0
  24. 27

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

    0
  25. 28

    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
  26. 29

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

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

    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
  29. 32

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

    Defo going to place one of these on my desktop

    0

↑ Back to top