Complete HTML Cheat Sheet With PDF Included 2021

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

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

				
					<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>

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

				
					<h1><span id="Heading_1">Heading 1</span></h1>

H2 Tag

				
					<h2><span id="Heading_2">Heading 2</span></h2>

H3 Tag

				
					<h3><span id="Heading_3">Heading 3</span></h3>

H4 Tag

				
					<h4><span id="Heading_4">Heading 4</span></h4>

H5 Tag

				
					<h5><span id="Heading_5">Heading 5</span></h5>

H6 Tag

				
					<h6><span id="Heading_6">Heading 6</span></h6>

Paragraph Tag

If you want to add a paragraph to your website you can add this paragraph tag.

				
					<p>Paragraph</p><div class='code-block code-block-7' style='margin: 8px auto; text-align: center; display: block; clear: both;'>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7519203537851091"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7519203537851091"
     data-ad-slot="3900734608"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Image Tag

				
					<div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7519203537851091"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7519203537851091"
     data-ad-slot="1145379640"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>


</div>
<img loading="lazy" src="img.jpg" alt="Describe image here" width="400" height="400">

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

				
					<a href="https://www.coderzway.com">This is a link</a>

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

				
					<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<mark>milk</mark>
<del>blue</del>
<ins>red</ins>
<sub>subscripted</sub>
<sup>superscripted</sup>

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

				
					<blockquote cite="https://coderzway.com">
    Readers are leaders
</blockquote>

This tag defines a section that is quoted from another source.

<q> Tag

				
					<q>Hello world</q>

This tag is used to show a short quotation.

<abbr> Tag

				
					<abbr title="World Health Organization">WHO</abbr>

This tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.

<address> Tag

				
					<address>
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
</address>

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

				
					<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

				
					<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

				
					<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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

				
					<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

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

				
					<form>
    <input name="name" type="text" /> <br />
    <input max="90" min="1" name="age" step="1" type="number" value="18" /> <br />
    <select name="gender">
        <option selected="selected" value="male">Male</option>
        <option value="female">Female</option>
    </select>
    <input checked="checked" name="newsletter" type="radio" value="daily" />
    <textarea cols="20" name="comments" rows="5">Comment</textarea>
    <label>
        <input name="terms" type="checkbox" value="tandc" />Accept terms
    </label>
    <input type="submit" value="Submit" />
</form>

HTML Button Tag

				
					<button>Click Me</button>

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.

&copy;

Less than (<)

&lt

Greater than (>)

&gt;

Ampersand (&)

&amp;

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.

Download HTML Cheat Sheet PDF

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:

Thank you for reading, Have a nice day 🙂

Spread the love