HTML CheatSheet

An HTML cheat sheet is a valuable tool for web developers, providing a quick reference guide to essential HTML (HyperText Markup Language) syntax and elements. A sophisticated HTML cheat sheet typically includes a comprehensive list of commonly used HTML tags and attributes, as well as code snippets and examples that illustrate how they can be applied in real-world scenarios. It may also provide helpful tips and best practices for optimizing HTML code, ensuring browser compatibility, and creating responsive designs. With an up-to-date HTML cheat sheet at their disposal, developers can streamline their workflow, save time, and create high-quality web content that meets industry standards.

Table of Content

# Getting started HTML


HTML is the standard markup language for creating Web pages.

1. HTML stands for Hyper Text Markup Language

2. HTML is the standard markup language for creating Web pages

3. HTML describes the structure of a Web page

4. HTML consists of a series of elements

5. HTML elements tell the browser how to display the content

6. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Example</title>
    <h1>Hello, Welcome to Cheatsheet</h1>


<!-- this is a comment -->

    Or you can comment out a
    large number of lines.


<p>I'm from</p>

<p>I am Sharing the quick reference cheat sheet for HTML.</p>
<a href="">CoolCheatSheet</a>

<a href="mailto:[email protected]">Email</a>

<a href="tel:+01358585">Call</a>

<a href="sms:+01358585&body=ha%20ha">Msg</a>
href The URL that the hyperlink points to
rel Relationship of the linked URL
target Link target location:
_self, _blank, _top, _parent

Image Tag

<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">
src Required, Image location (URL | Path)
alt Describe of the image
width Width of the image
height Height of the image
loading How the browser should load

Text Formatting Tags

<b>Bold Text</b>

<strong>This text is important</strong>

<i>Italic Text</i>

<em>This text is emphasized</em>

<u>Underline Text</u>

<pre>Preformatted text</pre>

<code>Source code</code>

<del>Deleted text</del>

<mark>Highlighted text (HTML5)</mark>

<ins>Inserted text</ins>

<sup>Makes text superscripted</sup>

<sub>Makes text subscripted</sub>

<small>Makes text smaller</small>

<pre>Pre-formatted Text</pre>


<blockquote>Text Block Quote</blockquote>


<h1> This is Heading 1 </h1>

<h2> This is Heading 2 </h2>

<h3> This is Heading 3 </h3>

<h4> This is Heading 4 </h4>

<h5> This is Heading 5 </h5>

<h6> This is Heading 6 </h6>

Section Divisions

<div></div> Division or Section of Page Content
<span></span> Section of text within other content
<p></p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line

Inline Frame

<iframe title="New York"


JavaScript in HTML

<!-- Internal Javascript -->
<script type="text/javascript">
    let text = "Hello";

<!-- External Javascript -->
    <script src="app.js"></script>


<!-- INternal stylesheet -->
<style type="text/css">
    h1 {
        color: purple;

<!-- External stylesheet -->
    <link rel="stylesheet" href="style.css"/>

# Tags in HTML5


<!DOCTYPE html>
            <p> 2021</p>

Header Navigation

            <li><a href="">Apple</a></li>
            <li><a href="">SamSung</a></li>
            <li><a href="">LG</a></li>

HTML5 Tags

Tag Description
<!--...--> Specifies a comment
<!DOCTYPE> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Deprecated:Specifies an acronym
<address> Specifies an address element
<applet> Deprecated: Specifies an applet
<area> Specifies an area inside an image map
<article> New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article
<aside> New Tag:Specifies a piece of content that is only slightly related to the rest of the page.
<audio> New Tag:Specifies an audio file.
<base> Specifies a base URL for all the links in a page
<basefont> Deprecated: Specifies a base font
<bdo> Specifies the direction of text display
<bgsound> Specifies the background music
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
<canvas> New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<caption> Specifies a table caption
<center> Deprecated: Specifies centered text
<col> Specifies attributes for table columns 
<colgroup> Specifies groups of table columns
<command> New Tag:Specifies a command the user can invoke.
<comment> Puts a comment in the document
<datalist> New Tag:Together with the a new list attribute for input can be used to make comboboxes
<dd> Specifies a definition description
<del> Specifies deleted text
<details> New Tag:Specifies additional information or controls which the user can obtain on demand.
<dir> Deprecated: Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<embed> New Tag:Defines external interactive content or plugin.
<fieldset> Specifies a fieldset
<figure> New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<b> Specifies bold text
<big> Deprecated:Specifies big text
<i> Specifies italic text
<small> Specifies small text
<tt> Deprecated:Specifies teletype text
<font> Deprecated: Specifies text font, size, and color
<footer> New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.
<form> Specifies a form 
<frame> Deprecated:Specifies a sub window (a frame)
<frameset> Deprecated:Specifies a set of frames
<head> Specifies information about the document
<header> New Tag:Specifies a group of introductory or navigational aids.
<hgroup> New Tag:Specifies the header of a section.
<h1> to <h6> Specifies header 1 to header 6
<hr> Specifies a horizontal rule
<html> Specifies an html document
<isindex> Deprecated: Specifies a single-line input field
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<keygen> New Tag:Specifies control for key pair generation.
<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<map> Specifies an image map 
<mark> New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<marquee> Create a scrolling-text marquee
<menu> Deprecated: Specifies a menu list
<meta> Specifies meta information
<meter> New Tag:Specifies a measurement, such as disk usage.
<multicol> Specifies a multicolumn text flow
<nav> New Tag:Specifies a section of the document intended for navigation.
<nobr> No breaks allowed in the enclosed text
<noembed> Specifies content to be presented by browsers that do not support the <embed>tag
<noframes> Deprecated:Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> New Tag:Specifies some type of output, such as from a calculation done through scripting.
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<cite> Specifies a citation
<code> Specifies computer code text
<dfn> Specifies a definition term
<em> Specifies emphasized text 
<kbd> Specifies keyboard text
<samp> Specifies sample computer code
<strong> Specifies strong text
<var> Specifies a variable
<plaintext> Deprecated: Render the raminder of the document as preformatted plain text
<pre> Specifies preformatted text
<progress> New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.
<q> Specifies a short quotation
<ruby> New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.
<script> Specifies a script
<section> New Tag:Represents a generic document or application section.
<select> Specifies a selectable list
<spacer> Specifies a white space
<span> Specifies a section in a document
<s> Deprecated: Specifies strikethrough text
<strike> Deprecated: Specifies strikethrough text
<style> Specifies a style definition
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> New Tag:Specifies a date and/or time.
<title> Specifies the document title
<tr> Specifies a table row
<u> Deprecated: Specifies underlined text
<ul> Specifies an unordered list
<video> New Tag:Specifies a video file.
<wbr> New Tag:Specifies a line break opportunity.
<wbr> Indicate a potential word break point within a <nobr> section
<xmp> Deprecated: Specifies preformatted text

HTML5 Video

<!DOCTYPE html>

        <video controls="" width="100%">
        <source src="" type="video/mp4">
        Sorry, your browser doesn't support embedded videos.


The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

// Example

HTML5 Audio

<audio controls
    Your browser does not support the audio element.

// Example

HTML5 Ruby

    ? <rp>(</rp><rt>hn</rt><rp>)</rp>
    ? <rp>(</rp><rt>z</rt><rp>)</rp>


? ( hn ) ? ( z )

The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.

Use <ruby> together with <rt> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that do not support ruby annotations.

HTML5 kdi

    <li>User <bdi>hrefs</bdi>: 60 points</li>
    <li>User <bdi>jdoe</bdi>: 80 points</li>
    <li>User <bdi>????</bdi>: 90 points</li>


  • User hrefs: 60 points
  • User jdoe: 80 points
  • User ????: 90 points

HTML5 progress

<progress value="30" max="100"></progress>


HTML5 mark

<p>I Love <mark></mark></p>

I Love

# Tables in HTML

Table Example


HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Defines a group of columns
<col> Defines a column within a table
<thead> Groups the header content
<tbody> Groups the body content
<tfoot> Groups the footer content

td Attributes

Attribute Description
colspan Number of columns a cell should span
headers One or more header cells a cell is related to
rowspan Number of rows a cell should span

th Attributes

Attribute Description
colspan Number of columns a cell should span
headers One or more header cells a cell is related to
rowspan Number of rows a cell should span
abbr Description of the cell's content
scope The header element relates to

# Lists in HTML

Unordered list

    <li>I'm an item</li>
    <li>I'm another item</li>
    <li>I'm another item</li>

Ordered list

    <li>I'm the first item</li>
    <li>I'm the second item</li>
    <li>I'm the third item</li>

Definition list

    <dt>A Term</dt>
    <dd>Definition of a term</dd>
    <dt>Another Term</dt>
    <dd>Definition of another term</dd>

# Forms in HTML

Form tags

<form method="POST" action="api/login">
    <label for="mail">Email: </label>
    <input type="email" id="mail" name="mail">
    <br />
    <label for="pw">Password: </label>
    <input type="password" id="pw" name="pw">
    <br />
    <input type="submit" value="Login">
    <br />
    <input type="checkbox" id="ck" name="ck">
    <label for="ck">Remember me</label>


Form Attribute

Attribute Description
name Name of form for scripting
action URL of form script
method HTTP method, POST / GET (default)
enctype Media type, See enctype
onsubmit Runs when the form was submit
onreset Runs when the form was reset

Label tags

<!-- Nested label -->
<label>Click me:
    <input type="text" id="user" name="name" />


<!-- 'for' attribute -->
<label for="user">Click me:</label>
<input id="user" type="text" name="name" />


Input tags

<label for="username">username:</label>
<input type="text" name="username" id="username">


Textarea tags

<textarea rows="4" cols="30" name="Your comment" id="comment"></textarea>


Radio Buttons

<input type="radio" name="gender" id="m" value="male">
<label for="m">Male</label>

<input type="radio" name="gender" id="f" value="femail">
<label for="f">Female</label>



<input type="checkbox" name="sport" id="football">
<label for="footbal">Football</label>

<input type="checkbox" name="sport" id="basketball">
<label for="basketball">Basketball</label>


Select tags

<label for="city">City:</label>
<select name="city" id="city">
    <option value="1">New York</option>
    <option value="2">LA</option>
    <option value="3">California</option>


Fieldset tags

    <legend>Your favorite monster</legend>
    <input type="radio" id="kra" name="m">
    <label for="kraken">Kraken</label><br/>
    <input type="radio" id="sas" name="m">
    <label for="sas">Sasquatch</label>


Your favorite monster

Datalist tags(HTML5)

<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">


Submit and Reset Buttons

<form action="register.php" method="post">
    <label for="foo">Name:</label>
    <input type="text" name="name" id="foo">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">


# Input Tags in HTML

Input Attributes

The input tag is an empty element, identifying the particular type of field information to obtain from a user.

<input type="text" name="?" value="?" minlength="10"	 required />
type="" The type of data that is being input
value="" Default value
name="" Used to describe this data in the HTTP request
id="" Unique identifier that other HTML elements
readonly Stops the user from modifying
disabled Stops any interaction
checked The radio or checkbox select or not
required Being compulsory, See required
placeholder="" Adds a temporary, See ::placeholder
autocomplete="off" Disable auto completion
autocapitalize="none" Disable auto capitalization
inputmode="" Display a specific keyboard, See inputmode
list="" The id of an associated datalist
maxlength="" Maximum number of characters
minlength="" Minimum number of characters
min="" Minimum numerical value on range & number
max="" Maximum numerical value on range & number
step="" How the number will increment in range & number
pattern="" Specifies a Regular expression, See pattern
autofocus Be focused
spellcheck Perform spell checking
multiple Whether to allow multiple values
accept="" Expected file type in file upload controls

Input types

type="button" Button

New Input Types in HTML5


Input CSS selectors

input:focus When its keyboard focused

# Meta Tags in HTML

Meta tags

Meta keywords are a <meta> tag option that could be used to give more information to search engines on what a page is about.

A <meta> tag defines what different types of metadata are about in an HTML document. These meta tags can be found in the source pages of a website, which is what search engine crawlers scan to determine what a page is about. The question is, should you use the meta keyword tag? It depends; let's find out more...

<meta charset="utf-8">

<!-- title -->
<meta property="og:title" content="">
<meta name="twitter:title" content="">

<!-- url -->
<link rel="canonical" href="https://">
<meta property="og:url" content="https://">
<meta name="twitter:url" content="https://">

<!-- description -->
<meta name="description" content="">
<meta property="og:description" content="">
<meta name="twitter:description" content="">

<!-- image -->
<meta property="og:image" content="https://">
<meta name="twitter:image" content="https://">

<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=1024">

Open Graph

<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML cheatsheet">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">

Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="">


<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">

Best Suggest