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”)
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!
kodakshnio
hi thanks for the cheats they are useful for me
but i wish i had cheat sheet for CSS and maybe Java.
if you could do that please share it
thanks!
WebsiteSetup Editorial
Hi, we already have one for CSS here: https://websitesetup.org/css3-cheat-sheet/
And a Javascript one too: https://websitesetup.org/javascript-cheat-sheet/
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!
Anu
Thank you,
Keep up the good work.
People tend to think who cares if we maintain these things but they turn out to be life savers for some.
Cheers
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.