How many of you have googled
- How to use HTML form?
- How to align cells within the row?
- New HTML5 input tag attributes
- Attributes for text area tags
As a front-end designer, you may have searched for similar things and ended up staring at 20 new tabs a few minutes later. Sometimes, I find so many new (distracting) elements that I forget what I was looking for in the first place.
While learning HTML is simple, remembering each component could be difficult for many people. That’s what cheat sheets are designed for.
We have compiled a list of some of the best HTML cheat sheets for both beginners and experienced developers. They will help you save your precious time and learn new things. Bookmark them or download the file on your PC.
Table of Contents
23. Codecademy HTML Modules
Format: OnlineWebpage
With Codecademy’s cheat sheets, you can learn different HTML topics in detail. This one, for example, covers basic topics like Elements, Structure, Forums, Tables, and Semantic HTML.
22. MDN HTML Sheet
Format: OnlineWebpage
MDN is Mozilla’s documentation repository and learning resource for web developers. Its HTML cheat sheet gives you accurate, ready-to-use code snippets for common usages.
21. HTML Elements
Format: OnlineWebpage
Featured on InterviewBit, HTML Elements cheat sheet teaches basic to advanced concepts and everything in between. It includes the basic skeleton of HTML, syntax, root elements, meta tags, tables, forms, interactive elements, and much more.
20. HTML5 New Tags
This is a small cheat sheet containing information about new tags and non-supported tags.
19. Periodic Table of HTML5 Elements
Format: OnlineWebpage
The table shows all valid elements in HTML5 specification. They are colored and grouped according to content-model (type of element). The red color signifies that the item has complex requirements.
18. HTML Semantics Cheat Sheet
Format: OnlineWebpage
Get all necessary HTML elements in a single page, including lists, text, images and media, data and code, tags, links, and much more.
17. Cheat Sheet by SkillCrush
Format: PDF
If you have just started writing HTML, you might be facing difficulties like whether some elements need opening and closing tags, which one has self-closing tags, or what’s the correct abbreviation for some particular tag. This is the smallest and simplest cheat sheet that will help you out.
16. HTML5 Cheat Sheet
Format: PDF and PNG
A brief cheat sheet containing tons of HTML5 tags and their meaning.
15. The Ultimate Cheat Sheet
Format: OnlineWebpage
It’s a complete guide of HTML codes that you can copy and paste into your project. It will help you learn how to format text, add images, links, lists, backgrounds, and special HTML characters.
14. Cheat Sheet Infographics
A long and detailed cheat sheet in the form of infographics – It contains selected attributes and tags, canvas elements, table formatting, SEO, objects and iframes, and much more.
13. HTML & XHTML Tag Quick Reference
Format: PDF
This is a small reference note of commonly used HTML and XHTML tags, such as tables, text, and horizontal rules. It also includes details regarding the proper use of XHTML (at the end of the document).
12. HTML5 Element Flowchart
Format: PDF
It’s a flowchart showing HTML5 elements. It will help you better understand where to put opening and closing tags.
11. HTML and CSS Infographics
Format: PNG
Created by Bluehost, this infographic contains things you need to know about HTML and CSS. You will learn how to reduce HTTP requests and modify certain elements to make web pages load faster.
10. HTML5 Peeks, Pokes, and Pointers
Format: OnlineWebpage
This is quite different than other cheat sheets; it will tell you about HTML forms, multimedia, canvas, how to use HTML offline (cache information), and attributes related to bits and bytes.
9. Interactive HTML Cheat Sheet
Format: OnlineWebpage
This is an online interactive cheat sheet that consists of web developer tools, helpful code examples, markup generators, and more on a single page.
8. Canvas Cheat Sheet
Format: PDF
Here you will find canvas elements, 2D context, colors, styles, shadows, text, transformation, line style, and pixel manipulation.
7. HTML Cheat Sheet for Beginners
Format: PNG
Created by websitesetup.org, this cheat sheet contains basic document information and document structure, objects, frames, lists, tables, links, and image attributes. The best thing about this sheet is everything is explained with examples.
6. OverAPI HTML
Format: OnlineWebpage
Although this cheat sheet looks fancy, it is quite simple to understand. It consists of numerous elements, including basic tags, form/table, formatting, and HTTP status. When you click on an element, it takes you to the new page that describes what that particular element does and how to use it.
5. HTML Color Codes
Format: OnlineWebpage
One of the most common things you deal with while writing HTML is color code. It is kind of essential to learn some common hex color codes, but if you are looking for gorgeous pallets, this is currently the best site on the internet to look at. Along with the HTML color code, you will find Flat Design, Material Design, and color charts with various palettes for your app or website.
4. A Simple Guide to HTML
Format: OnlineWebpage
This cheat sheet goes into detail and explains the working of individual tags. It will help you compile a comprehensive HTML resource and understand the technique behind the snippet to get ahead in your learning.
3. The Mega Cheat Sheet
As the name suggests, it’s a complete list of HTML5 elements along with a brief description of what they are used for. It includes both new HTML5 tags and unsupported old tags.
2. Fully Interactive Cheat Sheet
Format: PDF and OnlineWebpage
This is specifically created for developers who work on e-commerce websites. It contains a comprehensive list of elements, including descriptions, code examples, and live previews. You can browse all tags either alphabetically or by their category. There is also an option to download the entire cheat sheet as a PDF.
1. HTML5 Cheat Sheet by Hostinger
Format: PDF, JPG
Designed by Hostinger, this comprehensive HTML cheat sheet helps you learn how to use the right tags for structuring and text formatting. It consists of all necessary objects, frames, links, images, tables, and optional attributes. Plus, everything is explained with easy-to-understand examples.
Related Materials
18 Useful CSS Cheat Sheets of 2022 | With New CSS3 Tags
35+ Tools to Minify Code (JavaScript, CSS & HTML)
thank you 🙂