How many times have you Googled:
“how to add forms in HTML”
or
“what are new HTML5 tags”
… only to end up twenty minutes later staring blankly at 30 new browser tabs, forgetting what got you here in the first place?
Remembering each HTML element off the top of your head at a moment’s notice is impossible. Some seasoned web developers still occasionally use html cheat sheets, but not much. But if you’re beginner it’s definitely a great place to start.
So instead of falling down yet another Google blackhole, use this HTML cheat sheet page as your go-to web development resource when learning HTML, CSS, PHP or Javascript.
#1 HTML CHEAT SHEET in .PDF
#2 HTML CHEAT SHEET in .PNG
Further resources:
- If you already know a bit about HTML, go and check our Web Development & Design guide here.
- If you want to speed up your website (without changing web host), check this post.
- If you want to make your website more secure, go see this guide.
- If you don’t have a website or a blog, go and check Robert’s Website Setup Guides.
- Alternative HTML Cheat Sheet can be found here: HTML5 Cheat Sheet.
Patrick
Did you use Atom to create that PNG? What plugin did you use to get that formatting?
Mike
What plugin for Atom or what software did you use to actually write the cheatsheet “screenshot” in the .PNG download? Looks really nice, and I write tons of markdown.
Keith Lee
Okay, I know nothing about webpage designs. The only thing I’m trying to do is to edit a YT style, using Stylish for Chrome. I want to keep on using the theme in question, except, I hate their YT logo (which replaced the original one). How can I remove the one they’re using and replace with it the original Google-owned one? Where can I find it in the long HTML edit page. By the way the first few lines before the line with the body of the site start. Here’s what it looks like, nothing about a logo (head) after these lines, it jumps right into the body of the modified look itself (it looks like…). Thanks, either, even if you cannot help me. I appreciated this compilation up there!
.yt-card {
margin: 0 0 10px;
border: 0;
background: rgba(0, 0, 0, 0.49);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
Yannis
Like the above…I want to know how you write this png cheatsheet? Really it looks amazing!
John Stevens
I used my photoshop skills, ha 🙂 Thanks!
Bryan
Thank you very much for this.
Mark
Wow, superb!
You helped for HTML beginners
Sandy
Thanks a million, this is very helpful. It my first day learning HTML and I find this extremely helpffull
John Stevens
Glad you liked it 🙂 By the way, here’s an additional guide for learning HTML: https://websitesetup.org/html-beginners-guide/
Hope this helps,
John
Steve
I’m self taught in CSS/HTML, know just enough to get by with the basics to adjust a few items on a template, this helps me tremendously in understanding more.
Bukacz
Hey! I really like your .png version of cheat sheet. Is it possible to post printable version of it with white background like in pdf version?
Ibrahim
+1, a printable version would be very nice to have 🙂