The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size HTML cheat sheet.
In case you didn't already know, there is a complementary CSS Cheat Sheet available as well.
I have been working on this particular cheat sheet for a little over a year. It's been a tough one to put together - partly because of the wealth of information that could be included (a few colours and element attributes being the obvious items), and partly because it is difficult to know what web designers might find useful in an HTML cheat sheet.
Tags
The bulk of the HTML cheat sheet is comprised of the tags themselves. They are split into sections according to their function. Deprecated and formatting tags (e.g. <b>) are not included in the lists. Each tag is accompanied with a description of its purpose, and where relevant is flagged as an "empty" tag.
Common Character Entities
There is a more expansive HTML Character Entities Cheat Sheet available, however that is more than many people need (or want), so I have included the most common character entity codes here as well.
Empty Tags
I have called the cheat sheet an HTML Cheat Sheet, however it is a little more complicated than that. HTML is an evolving language, and has passed through several incarnations. Most recently, use of XHTML has become more widespread. This cheat sheet is a useful tag reference for both HTML and XHTML. Empty tags exist within HTML however should not be closed with a trailing slash (i.e. <br />). In XHTML they must be closed. This section lists the empty tags for HTML and XHTML.
Attributes
Unfortunately, as the overriding principle of the cheat sheets is that they must be an easily printable single page A4 reference, I had far too little space to include all possible attributes for each element (though in future there may be a multi-page version that includes this information, if enough people are interested). However, I did have space to include some of the more important attributes. These sections include those core attributes.
Events
Events in HTML allow a developer to add client-side functionality to a page with JavaScript. While inline events are frowned on by those (including myself) who feel behaviour should be separated from content, they are still widely used and included here for that reason, broken down by type.
Download
The cheat sheet is available in two formats, PNG and PDF:
Update: 8 January 2006: The font issue should be resolved. If you were receiving a font error, please re-download the cheat sheet.
And finally, if you like the cheat sheets, and want to say thanks, please consider buying me something from my Amazon Wishlist. Thankyou very much to those who have already hunted it down and sent me something nice - I'm very grateful!
Please note: If you wish to link to the HTML cheat sheet from elsewhere, please link to this page so others find the description, rather than linking directly to the sheet.
87 Comments
Nice work
#1, George, Unknown, 5 January 2007. Reply to this.
Added to http://techcheatsheets.com
Also on digg here:
[redacted]
#2, TCS, United States, 5 January 2007. Reply to this.
Although it doesn't matter for HTML, the events should be all lower case for XHTML. See
http://www.w3.org/TR/xhtml1/#h-4.2
#3, Nick Fitzsimons, United Kingdom, 5 January 2007. Reply to this.
Looks good. HTML is the sort of thing most people become fairly familiar with but it is always easy to get hung up on the occasional function.
Reminds me I need to grab your MySQL cheatsheet as well.
#4, Jonathan Street, United Kingdom, 5 January 2007. Reply to this.
Something is wrong with the PDF it tells me that the font ArialRoundedMTBold is missing. I tried both on my server (Win2k3 SP1 EN with Adobe Acrobat Reader 7) and on my own pc (WinXP SP2 NL with Adobe Acrobat Reader 8)
#5, Olger901, Netherlands, 7 January 2007. Reply to this.
Hi Olger,
The PDF shouldn't be using that font - that's the font used in the logo. I'll re-export it and see if I can correct the bug.
#6, Dave Child, United Kingdom, 7 January 2007. Reply to this.
Yes, that would be great, thank you :)
#7, Olger901, Netherlands, 8 January 2007. Reply to this.
Olger: Should be sorted now. Please let me know if not.
#8, Dave Child, United Kingdom, 8 January 2007. Reply to this.
Its fixed, thank you.
#9, Olger901, Netherlands, 8 January 2007. Reply to this.
Thanks a bunch, sometimes a little reminder is nice :P
#10, Dana, Unknown, 10 January 2007. Reply to this.
A life(time)-saver!
Thanks a lot!
#11, Dom, United Kingdom, 14 January 2007. Reply to this.
Thanks a bunch!
I just printed most of your sheets, they are very helpful when
you have a memory like a sieve - err - what did i want to write?
#12, Frank, Germany, 15 January 2007. Reply to this.
We are developing our new site and have used lots of your cheat sheets, thanks for the great resource!
#13, Industrial Flooring, United Kingdom, 17 January 2007. Reply to this.
Oh my !!
This is the best and awesome Cheat-sheet even i seen.
#14, ZEGii, Australia, 1 February 2007. Reply to this.
Love the cheat sheets! Could you do one for Vi/Vim?
#15, Tablespork, United States, 1 February 2007. Reply to this.
There are some bugs in the PDF version: the euro sign, trademark etc. do not display correctly. The PNG is okay however.
#16, Reinier, Netherlands, 9 February 2007. Reply to this.
Just a note: You might want to replace anything between € and Ÿ with their more-widely-supported Unicode counterparts: € • ™ or € • ™ if you want to stick with numeric. Thanks!
#17, Darren Embry, United States, 12 February 2007. Reply to this.
Thanks man... this looks great..
#18, Hieysk, United States, 17 February 2007. Reply to this.
Nice sheet. I always find myself refering to your Mod_Rewrite cheat sheet. Very useful!
Andy
#19, Andy, Unknown, 19 February 2007. Reply to this.
Plus it's XHTML which is always nice to see...
#20, Website Promotions, United States, 4 March 2007. Reply to this.
great job
#21, zafar, Canada, 4 March 2007. Reply to this.
Um were do I send the check? Thanks for this nice piece of work.
#22, chocolate cowgirl, United States, 9 March 2007. Reply to this.
Good Work !
#23, Dhirendra, Unknown, 16 March 2007. Reply to this.
These are AWESOME man! I'm downloading all of them. :D
#24, Eric Brooks, United States, 19 March 2007. Reply to this.
Thanx for these cheat lists, I find them very useful
#25, Groningen, Netherlands, 20 March 2007. Reply to this.
Looks Good !
#26, Pravin, India, 22 March 2007. Reply to this.
Gr8 Stuff
#27, Ashish Sehra, India, 30 March 2007. Reply to this.
I really do love you hack daniels!!
#28, Comedy Blog, United States, 4 April 2007. Reply to this.
Great cheatsheet. I was looking for one for my wife to help her get the hang of XHTML. I have to reiterate #3 though, the events need to be all lowercase. Other than that, great work man. Thanks.
#29, Chat Clussman, United States, 13 April 2007. Reply to this.
Those are very good. i just downloaded all of them.
#30, Timberland, Australia, 15 April 2007. Reply to this.
Thanks very much - very useful cheat sheets!
#31, JW, United Kingdom, 18 April 2007. Reply to this.
Great job, thanks!
#32, Bart, Belgium, 18 April 2007. Reply to this.
Great Job ! You are Great! Could you make XML, XSL cheat sheet? :)
#33, Artos, Poland, Poland, 2 May 2007. Reply to this.
Brilliant, i struggle with some codes out side the normal Bold, H1 etc and this is perfect!
#34, Blogger, Australia, 29 May 2007. Reply to this.
Another great cheat sheet, thankyou!
#35, Jon, United Kingdom, 31 May 2007. Reply to this.
^ lol@me typing my URL wrong!
#36, Jon, United Kingdom, 31 May 2007. Reply to this.
Thanks for the great cheat sheets! Very nice, every one of them.
#37, Danny, United States, 8 June 2007. Reply to this.
Very useful! Thank you!
#38, Arctic Monkey, Unknown, 29 June 2007. Reply to this.
Are you able to let me know what application you use to format your excellent cheat sheets? I'd love to make my own with a similar layout for DirectX 9. Thanks!
#39, James, United Kingdom, 4 July 2007. Reply to this.
Hi James. I use Xara Xtreme.
#40, Dave Child, Unknown, 4 July 2007. Reply to this.
Thanks, hopefully I'll have the patience to make my own! So far I have most of yours stuck on my wall, very useful :)
#41, James, United Kingdom, 4 July 2007. Reply to this.
dude where is the cheat for wow ???
#42, Anonymous, Australia, 10 July 2007. Reply to this.
i love the fact that this website really works and yes almost every night i go home and use it sometimes i even wonder if teachers know about this site?
#43, wendy, United States, 28 August 2007. Reply to this.
Nice work! Thanks a lot!
#44, ZuccHero, Unknown, 29 August 2007. Reply to this.
Very helpfull your sheets. not to big and good sorted
#45, Andreas, Germany, 8 September 2007. Reply to this.
Your cheat sheets are works of art. Great job
#46, DerekK, New Zealand, 9 September 2007. Reply to this.
good html codes i liked it i love you
#47, ros, India, 23 September 2007. Reply to this.
Thankyou for this, it's really useful!
#48, Warren M, United Kingdom, 3 October 2007. Reply to this.
Very useful.. I just printed this out and now it's on my wall above my Screen :) Thanks alot for this
#49, Stars, Germany, 14 October 2007. Reply to this.
Thanks for making these available Dave, I've posted on my blog TheAdsenseIdiot.com about your blog and the cheat sheets.
Cheers
The Resident Idiot
#50, The Adsense Idiot, Hong Kong, 16 October 2007. Reply to this.
Well done, and thank you. Why no-one has ever thought of these sheets before is beyond me!
#51, Darrell N, Unknown, 3 November 2007. Reply to this.
Wow, it's really handy. Very nicely layout. Thanks.
#52, Allan Chua, France, 19 November 2007. Reply to this.
I've just found your sheets, thank you very much they are really useful
#53, Zaharije, Unknown, 29 November 2007. Reply to this.
Great, very useful cheat sheet. Thanks for your work.
#54, Jobu, Unknown, 13 December 2007. Reply to this.
amazing, very handy. Thanks for all the cheatsheets.
#55, the review zone, Unknown, 19 January 2008. Reply to this.
Nice cheatsheet ! Great Job!
#56, Selina, Israel, 29 January 2008. Reply to this.
Wow. Very good job
#57, sacario, Russian Federation, 31 January 2008. Reply to this.
Thanks for the Cheat Sheet! Cant wait to start using them! :) Just out of curiosity - do you offer Java coding as well?
#58, DeusExMachina, United States, 5 February 2008. Reply to this.
Thansk for the great job!!
#59, Manolo, Chile, 12 February 2008. Reply to this.
Good job on the cheatsheet, you did a good job and its very professional and informative.
#60, wartex8, Unknown, 20 February 2008. Reply to this.
Dave-
I love the site and the cheat sheets. I wish I had found it sooner. With so much great information in one place it would have saved me a lot of googling.
I am a web design novice and would be very interested in a more detailed two page cheat sheet. It would sure beat flipping between the index and body of books just to be reminded of what I already know.
#61, hipstershaun, United States, 15 March 2008. Reply to this.
I am a web design novice and would be very interested in a more detailed two page cheat sheet. It would sure beat flipping between the index and body of books just to be reminded of what I already know.
#62, divx izle, Unknown, 17 April 2008. Reply to this.
very good
#63, David, China, 25 April 2008. Reply to this.
nice work, thanks a lot
#64, santosh, India, 3 May 2008. Reply to this.
Yes. Cheatsheets are always welcome. Use for XHTML only lower cases!
#65, Jarno, Netherlands, 14 May 2008. Reply to this.
Great stuff man. Major props for making these great cheat sheets.
#66, Aleksander R. Rødner, Norway, 5 June 2008. Reply to this.
Nice Work! Thanks for this! ;)
#67, Starreporter, Unknown, 14 June 2008. Reply to this.
Just what I was looking for. Thanks, Dave.
#68, Philip Yeoh, Malaysia, 1 July 2008. Reply to this.
Nice work. This is really very useful and helpful and something what i was looking for..You have really done an excellent work. This is something which i as a software programer require everyday, so i have stucked it on my wall in my office..Thanks.
#69, Milan Chheda, India, 26 July 2008. Reply to this.
Excellent job! I love your cheatsheets. As soon as I get a chance to print them out they're going to make my desk a lot less cluttered with books. If you're planning on revising this sheet, it would be nice to have the different doctype declarations on there too, I hate having to look them up =)
#70, Ziv, Unknown, 15 August 2008. Reply to this.
The PDF and the PNG do not download properly for me. At first it looks like it will download, but then the following page loads: "Page Not Found - Sorry, I couldn't find the page you're looking for." It will still let me save the file, but when I try to open it, I get the followign message: Couldn?t open the file. It may be corrupt or a file format that Preview doesn?t recognize." Would love to use this sheet, as all others are very helpful!
#71, Mel, Unknown, 5 October 2008. Reply to this.
Yep, it keeps making redirects until the server finally gives up and shows you a 404 not found.
It happened the same to me when I tried to download one of the cheat sheets.
I bet Apache is extremely angry with Dave right now!
#72, =IceBurn=, Unknown, 5 October 2008. Reply to this.
Downloads should be fine now - sorry about that, looks like a third party ad was causing a loop of doom.
#73, Dave Child, United Kingdom, 6 October 2008. Reply to this.
u r blog Is very nice
thank u r info
it very useful
#74, Matthew, Unknown, 8 October 2008. Reply to this.
Hey, just wanted to say thanks for these cheat sheets. Lots of internet sources for learning web design are kind of frustrating, I find your stuff very straight forward and I really appreciate it. I'm also starting to dabble in CSS and perhaps eventually PHP, and I'm sure you'll be helpful with those too. Gonna share your site around a bit I think. :)
On a side note, the comments on your WoW cheat sheet? absolutely hilarious. A real showcase of the WoW community, haha! I play too so I appreciate how short some of their attention spans are.
anyway, thanks!
~Ana
#75, Anab, Canada, 21 October 2008. Reply to this.
wow its really helpful.............
#76, ashish, Unknown, 10 December 2008. Reply to this.
Another interesting and easy to understand HTML cheat sheet. Well done, Dave.
#77, Mexabet, Australia, 22 February 2009. Reply to this.
These are all great. I am going to keep them all on my desk.
#78, Realicity Internet Marketing, Minnesota, Unites States, 4 March 2009. Reply to this.
thank's for cheatsheet
can i request cheatsheet for joomla?
#79, Dito Prasetiyanto, Indonesia, 30 March 2009. Reply to this.
muy buena!!! jaja todos en ingles y yo en español... te agradesco
10!!!
#80, ASD, Unknown, 9 April 2009. Reply to this.
Very nice, I'll test it as soon as possible ;-))
#81, Uwe, Germany, 11 April 2009. Reply to this.
it good.
thank.
#82, glos, Thailand, 23 June 2009. Reply to this.
I love the cheat sheets. Everyone in the office has one.
Any chance of HTML 5 update?
#83, Rodrigo, United States, 13 July 2009. Reply to this.
There's no onClick method but onclick and so go on with other events - that's what W3 Validator says, onClick refers to Flash -> http://validator.w3.org/docs/help.html#faq-flash
#84, Piotr, Poland, 10 September 2009. Reply to this.
Muy interesantes las plantillas pero he echado de menos una monográfica sobre formularios en html, los tipos de campos, atributos, etc...
#85, Andy, Spain, 17 September 2009. Reply to this.
This decodes the mystery of HTML. I like the way this teaches the syntax and stuff.
#86, Kid Cudi, Australia, 25 October 2009. Reply to this.
This is helpful for a newbie like me.
#87, Kyle, Ireland, 25 October 2009. Reply to this.