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 have a cheat sheet, too. Now it’s all in my head, though.
Whether you’re 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 (5,8mb)
- 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
JSmith
I’m currently learning the basics of HTML5 so this cheat sheet has become extremely useful. Thanks.
Syed
Thanks for sharing this.
Derek Booth
Really good sheet, I like the not supported tags being highlighted. We are making cheat sheets for our SEO and site set ups within Google which includes the structured data stuff.
Sven
Thanks for the nice cheat sheet quite helpful
Mr. Frontend
Wow, this is good one. 10x for sharing.
Deeepak Jagade
I want to learn Web designing and Web development. What should I do? Is there career chances in Web design and development?
Robert Mening
Hi Deepak,
Best way is to start off with WordPress and then learn some additional HTML & CSS.
Robert
Sebastien
Hi,
Will you do a CSS3 Cheat Sheet ? I daily use the HTML5 one, and have the same thing for CSS3 would be awesome ! 🙂
Robert Mening
Hi Sebastien,
It’s already done here: https://websitesetup.org/css3-cheat-sheet/
Robert
Michille Salva
Thanks for this. I am using WordPress but for months now. But I think I need to learn some more of HTML now.
Fego
Your blog has been so useful, I just come, see and get what I need, so easy…. God bless you.
Jwaddell
Completely new to html…. I have an aerial view of a campus and have a img map created with click able areas. I want the areas defined to be one color and highlights another color when mouse hover overs it. Any ideas would be greatly appreciated. Thanks
Tammy Koelling
Amazing! thanks for sharing for a novice like me!
DanS
Would be really nice if “3. HTML Cheat sheet in .png” were available as a PDF!
Robert Mening
Thanks for the suggestion. I’ll start working on it 🙂
~Rob
Ryan
+1 because the PNG is not printable without killing my office printer [ink].
Amber
This is AWESOME, thank you!!!
Hammad Mughal
Thanks alot for this, really helpful for the beginners rather than opening books and looking onto the internet.
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.
Lin
Thanks for sharing this cheatsheet!
Robert Mening
No problem 🙂
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!!
Robert Mening
Hey John. JQ cheat sheet is located here: https://websitesetup.org/jquery-cheat-sheet/
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 🙂
Neil McCracken
Thanks, just learning HTML and CSS and this is really helpful
Thomas
At the bottom of the PNG image, in the “Collective Character Objects” section, there is a mistake for the last three entities.
(Uuml = Ü, ouml = ö, ucirc = û.)
The @-sign has no entity; bull = Bullet, trade = Trademark.
So, the table should read:
@ (no entity) @ sign /
• • Bullet /
™ ™ TM (Trademark)