Looking for a HTML cheat sheet then you are at the right place because today I will share with you a complete HTML cheat sheet with pdf included. I have prepared this HTML cheat sheet specially for you.
So you can download the HTML Cheatsheet pdf for FREE or you can read on this page. Having a cheat sheet is very helpful and useful specially a HTML cheat sheet because there are lot of tags in HTML which we tend to forget.
Next time you forget something in HTML you just have to look at this HTML cheat sheet and find your answer so without wasting much time let’s see the complete HTML cheat sheet.
If you want to test out your HTML code then you can use our online live HTML, CSS and Javascript Compiler here – HTML COMPILER.
Complete HTML Cheat Sheet
Contents
- 1 Heading 1
- 1.1 Heading 2
- 1.1.1 Heading 3
- 1.1.2 Paragraph Tag
- 1.1.3 Image Tag
- 1.1.4 HTML Link Tag
- 1.1.5 HTML Text Formatting Tags
- 1.1.6 HTML Quotation and Citation Elements
- 1.1.7 HTML Comments
- 1.1.8 HTML Table
- 1.1.9 HTML Lists
- 1.1.10 HTML Inline And Block Tags
- 1.1.11 code tag
- 1.1.12 HTML Semantic Tags
- 1.1.13 HTML Form and Inputs
- 1.1.14 HTML Button Tag
- 1.1.15 HTML Characters & Symbols
- 1.2 HTML Cheat Sheet PDF Download
- 1.3 Summary
HTML is one of the most important and basic language for creating websites it is like the skeleton of the website so if you want to do web development you need to learn HTML language.
It is not a programming language so it is very easy to learn. You just need to remember the tags but incase you forgot something you just need to look in this HTML cheat sheet.
HTML Boilerplate Code
Page Title
This is the HTML boilerplate code which is there in all HTML files documents. Below are some of tags from the boilerplate code.
- This tag
<!DOCTYPE html>
defines this document as an HTML5 document. - The
<html>
tag is the root element of an HTML page. All the code is written inside this tag. - The
<head>
tag contains meta data about the HTML page. Which is essential for SEO. - The
<title>
tag specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab) - The
<body>
tag defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
HTML Heading Tags
There are six heading tags in HTML. They range from 1 to 6. One is the biggest tag in size then size decreases as their number increases.
H1 Tag
Heading 1
H2 Tag
Heading 2
H3 Tag
Heading 3
H4 Tag
Heading 4
H5 Tag
Heading 5
H6 Tag
Heading 6
Paragraph Tag
If you want to add a paragraph to your website you can add this paragraph tag.
Paragraph
Image Tag

Image tag is a single tag there is no closing tag for image tag you may see some things inside the img tag they are called as tag attribute let’s see what this does.
- src – In this attribute you add the image location you can either add the image url from internet or image file path in your computer.
- alt – In this you need to describe what the image is about the text inside alt will show if your image does not load.
- width – This specifies the width of the image.
- height – This specifies the height of the image.
HTML Link Tag
This is a link
This HTML tag is used to link to other pages you can link to your own page or a external page. If someone clicks on it they will go that page. Let’s see the attribute for this tag.
- href – inside this you need to add the url which you want the user to go when they click.
- Anything between the tag will be shown as text.
HTML Text Formatting Tags
This text is bold
This text is important!
This text is italic
This text is emphasized
This is some smaller text.
milk
blue
red
subscripted
superscripted
These are all HTML text formatting tags which you can use in headings, paragraphs and buttons. Now let’s see how they work.
- <b>: Makes text bold.
- <em>: Makes text emphasized.
- <i>: Makes a part of text in an alternate voice or mood.
- <small>: Makes text smaller.
- <strong>: Defines important text.
- <sub>: Makes text subscripted.
- <sup>: Makes text superscripted.
- <ins>: Defines inserted text.
- <del>: Defines deleted text.
- <mark>: Defines marked/highlighted text.
HTML Quotation and Citation Elements
Below are some of the HTML Quotation and citation tags.
<blockquote> Tag
Readers are leaders
This tag defines a section that is quoted from another source.
<q> Tag
Hello world
This tag is used to show a short quotation.
<abbr> Tag
WHO
This tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.
<address> Tag
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
This tag is used to show a the contact information of a person in a web page.
HTML Comments
You can use the below code to write comments this code will not be visible on websites it is for you.
HTML Table
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
A table is set of rows and columns. It allows you to show data in a tabular format. Here is explaination of the above tags
- Use the HTML
<table>
tag to create a table - Use the HTML
<tr>
tag to create a table row - Use the HTML
<td>
tag to create a table data - Use the HTML
<th>
tag to define a table heading
HTML Lists
Html lists are used to display a set of items in the form of lists there are 3 types of lists in HTML:
- Ordered List
- Unordered List
- Description list
Ordered List
- Coffee
- Tea
- Milk
In ordered list the list will be shown in number format like 1,2,3….
- <ol>: This tag is used to define a ordered list.
- <li>: This tag is used to define list items.
Unordered List
- Coffee
- Tea
- Milk
In Unordered list the list will be shown in dot format like
- <ul>: This tag is used to define a Unordered list.
- <li>: This tag is used to define list items.
Description List
- Coffee
- - black hot drink
- Milk
- - white cold drink
In Description list the list will be shown with description.
- <dl>: This tag is used to define a Description list.
- <dt>: This tag is used to Define the term in a description list.
- <dd>: This tag is used to Describes the term in a description list.
HTML Inline And Block Tags
div tag
div tag or division tag is used to make blocks or divisions in the document.
<div> This is div block </div>
span tag
span is a container for inline content
<span> This is span block </span>
p tag
Paragraph
<p> This is a paragraph </p>
pre tag
pre tag represents pre-formatted text
<pre> Hello World </pre>
code tag
code tag is used to represent source codes
<code>
import python
</code>
HTML Semantic Tags
HTML Semantic tags are self described they are very important for SEO.
<header> tag
It defines a section in the document
<header>This is a header</header>
<section> tag
It defines a section in the document
<section>This is a section</section>
<article> tag
It represents self-contained content
<article> Enter your data here </article>
<aside> tag
It is used to place content in the sidebar
<aside> Your data </aside>
HTML Form and Inputs
HTML Button Tag
HTML Characters & Symbols
Some symbols are not directly present on the keyboard, but there are some ways to use them in HTML documents. We can display them either by entity name, decimal, or hexadecimal value.
Copyright Symbol (©)
©
Less than (<)
<
Greater than (>)
>
Ampersand (&)
&
Dollar ($)
$dollar;
HTML Cheat Sheet PDF Download
As I have told you that I will be giving you the HTML Cheat Sheet PDF to download in the HTML Cheat Sheet pdf you everything which I have told here so you can download HTML Cheat Sheet pdf below.
Summary
This was the complete HTML Cheat Sheet. This HTML Cheat Sheet can be used by beginners and advanced programmers. I have tried to add everything I could possibily add. You can also download the HTML Cheat Sheet PDF.
I hope you found this HTML Cheat Sheet useful and helpful if it did then do share it with your friends who are using or learning HTML. If I missed anything in this cheatsheet comment down below. If you want more guides like this then join our Telegram channel for future updates – Join Coderzway.
Here are some more guides you can read:
- Best cyber security books for beginners.
- Best coding books for beginners.
- Roadmap to become a full stack web developer.
- Udemy paid courses for FREE.
Thank you for reading, Have a nice day 🙂