You want to learn HTML, right?
Having a proper cheat sheet will make your life a ton of easier.
When I started out with web development (back in 2004), I used to have a cheat sheet, too. Now it’s all in my head, though.
Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet below. I originally made it for my self, but since the launch of HTML5, I decided to update it, make it look better and share it on my website.
I’ve listed out all the mainstream HTML tags as well as the new HTML5 tags.
Enjoy!
- If you wish to download .pdf, click here (237kb) – This version is based on the HTML Cheat Sheet in .PNG
- Alternate HTML Cheat Sheet in .pdf, optimal for tabloid paper size (11x17in) printing, click here (138kb) to download
- If you wish to use this as an image, click here (3508 x 2717)
1. HTML Cheat Sheet in .pdf
2. HTML Canvas Cheat Sheet in .pdf
If you wish to download this as .pdf, use this link (right click, “Save link as”).
3. HTML Cheat sheet in .png
If you wish to download this as .png, open this link and save the image.
You can also download the image below directly (right click, “Save image”)
Ebenezer
I’m in love with this. Thank you for your passion to help us learn coding
Zeeshan
No words to say, This is really amazing.
Dennis
Wow! Thank you so much for posting these! While I was learning HTML I was trying to make my own cheat sheets but I was wasting too much time with those and slowing my progress. You just saved me so much time! thank you thank you thank you!
Elvin Gadama
This is wonderful, thank you so much.
Natalie
Hi there, this really helped a lot, thank you for putting this together!
ana lisboa
Awesome!! Thanks!! 🙂
Nick Schäferhoff
You’re awesome! Thank you!
Anisha
It helps me a lot, really love this! Thank you so much for all your efforts.
Herman
I just want to say thank you for all you hard work to put this out, this is really is a big help.
FANTASTIC work, God bless.
Nick Schäferhoff
Thanks for the kind words!
Rick
Nick, i wish to develop a website for my business ( my first). But instead of completely relying on wordpress i would also like to use my own html webpages and webframeworks ( like Django). Is there any way to do that.
Ps: i would also create an app in near future for my business. So is there any way to link both the website and the app to serve my clients.
Looking forward to your reply 🙂
Nick Schäferhoff
Hey Rick, if you have the requisite skills, you can, of course, develop your own website from scratch. Depending on what your goals and needs are, this can make more or less sense. I don’t know enough about Django to give any input on that but if you also want to create an app, be aware that with the REST API, it is now easier than ever to connect a mobile app to WordPress. Just saying…
rocky
Nick, just wanted to send out a quick note of thanks for the ‘cheat sheet’. I haven’t written HTML in years and wanted to add some new life into my personal web-page. I found that I was struggling to remember the syntax, etc. Thanks for making the time and effort.
-r
Nick Schäferhoff
Hey Rocky, glad you like it! Hope it helps you get your bearings quicker.
Victor Zarate
You did an amazing job at seperating all there is is to know about html. These cheat sheets will save me a ton of time learning HTML language code. Thanks a lot! I will pass this website along 😉
Nick Schäferhoff
Thanks for the kind words, Victor!
Dave
Thank you for sharing these Cheat Sheets.
Very useful!
A. Heart
Cheat sheet has some serious errors in the &…; I.e. Ö does not generate what you say it does.
With a name like Nick Schäferhoff, one would think you’d get the UMLAUTE correct.
Nick Schäferhoff
Ouch, going where it hurts – my umlauts! Can you elaborate on the errors you spotted? I want to get it fixed right away. Thanks for pointing that out!
Jorge Ham
Excellent job, perhaps you have plans for doing something similar with “C# Namespaces”, would be wonderful, thanks for sharing.
Nick Schäferhoff
We will take that suggestion under advisement. Glad you liked the post!
Jordnes
Merci bien. C’est très utile
Nick Schäferhoff
Heureux de l’entendre. Merci pour le commentaire!
ccm
Tried to print as pdf but save link as isn’t an option that I can find. Any suggestions?
WebsiteSetup Editorial
Hi, make sure you’re right clicking on the link itself and not the image: ‘save link as’ definitely shows up there. Alternatively, you can hover your mouse over the image and click on the ‘print’ button in the upper right corner of the image.
Victor
Thanks for the cheat sheet ;D!
Dan G
Thank you so much! I am learning HTML5 and this has been a life saver.
Nana
Hi, thanks for the abundance of knowledge presented here in pdf and image file. Would have to get them on pc, ipad and phone for easy reference. I find the following comments very encouraging: “You’ll remember the basics eventually after continuously using them and for the rest you’ll have cheat sheets like this – developers have to look up things online all the time.”
Thanks once again
WebsiteSetup Editorial
My pleasure, Nana. Good luck on your coding journey! 🙂
Tam
Just another thank you very much for your hard work to another novice web designer learning more of the basics than just drag and drop. This was extremely helpful in that journey. i will be back for more indepth reading & all those occasions where we pull our hair at 2am going, i know its just a missing comma. (smh now im reliving 30 year old high school votech cobol programming memories) Thanks again. Great site!
WebsiteSetup Editorial
Haha, thank you Tam, glad you found it useful 🙂
Quinntin Ruiz
Can you please send the download for the HTML Cheat sheet in .png? There is no download button on this link.
Best,
Quinn
WebsiteSetup Editorial
Hi Quinn,
You should be able to download it now 🙂
Terry
Thanks so much. These are great references. Just started with css so your guide is excellent.
Cheers.
Craig Ramsay
I think I need to print these cheat sheets out and stick them on my wall… lots to learn! Thanks for the great resources 🙂
WebsiteSetup Editorial
Glad you liked it 🙂
Ahmed J. Baqer
Hi, I just started learning HTML and CSS few months ago. I’m a computer science student in my second year of college, I really love this stuff but I have a memory problem. I tend to forget a lot of things that I learn especially when it comes down to programming, I’m worried that due to my short memory I might never become good at this. Is this cheat sheet ok for first timers, somebody please tell me that I’m not alone!
DBall
My short term memory is a LOT worse than that of the average person which makes learning programming or scripting more difficult for me. I was fortunate enough to come across SRS (Spaced Repetition Software), and it’s helped me a LOT when it comes to learning a large bunch of vocabulary. There are a few packages out there and they’re free to use. You need to commit to this however, in other words always dedicate 10-15 minutes a day and you’ll be golden, but it’s no substitute for actually coding the stuff- you’ll remember the commands but you need it in your muscle memory…
You’re not alone with the memory issues 🙂
WebsiteSetup Editorial
You’re not alone! It’s perfectly normal not to remember all of this stuff, especially the elements or attributes that rarely get used. You’ll remember the basics eventually after continuously using them and for the rest you’ll have cheat sheets like this – developers have to look up things online all the time 🙂
Neil McCracken
Thanks, just learning HTML and CSS and this is really helpful
Sara
Many thanks for sharing this! I started learning HTML and CSS like a week ago and I was looking for something just like your cheat sheets to help me with the tags, hopefully I will remember most of them soon. Best wishes 🙂
Jon
Is it too much to ask for the .HTML file? Haha if so I’d like the JS and JQ cheat sheets as well. Thanks!!
WebsiteSetup Editorial
Hey John. JQ cheat sheet is located here: https://websitesetup.org/jquery-cheat-sheet/
Lin
Thanks for sharing this cheatsheet!
WebsiteSetup Editorial
No problem 🙂
Pritam Haobam
Thank you so much for sharing this with all. Please give #3. HTML Cheat sheet in .png – in A4 pdf format. Kindly make it in white background so that it can be cheaper printing it (the dark background will consume too much ink). And lastly, not forgetting to make it down-loadable.
DanS
Would be really nice if “3. HTML Cheat sheet in .png” were available as a PDF!
WebsiteSetup Editorial
Thanks for the suggestion. I’ll start working on it 🙂
Ryan
+1 because the PNG is not printable without killing my office printer [ink].