09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
[Link] Stars 6.8k
HTML
This HTML quick reference cheat sheet lists the common HTML and HTML5 tags in readable layout.
# Getting Started
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<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 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello [Link]!</h1>
</body>
</html>
Or try it out in the jsfiddle
Comment
<!-- this is a comment -->
[Link] 1/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
<!--
Or you can comment out a
large number of lines.
-->
Paragraph
<p>I'm from [Link]</p>
<p>Share quick reference cheat sheet.</p>
See: The Paragraph element
HTML link
<a href="[Link]
<a href="[Link]
<a href="[Link]
<a href="[Link]
href The URL that the hyperlink points to
rel Relationship of the linked URL
Link target location:
target
_self, _blank, _top, _parent
See: The <a> Attributes
Image Tag
<img loading="lazy" src="[Link] 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
See: The Image Embed element
Text Formatting Tags
<b>Bold Text</b>
<strong>This text is important</strong>
[Link] 2/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted 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>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
Headings
<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>
You should only have one h1 on your page
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
These are the tags used to divide your page up into sections
Inline Frame
<iframe title="New York"
width="342"
height="306"
id="gmap_canvas"
src="[Link]
q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
[Link] 3/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
scrolling="no">
</iframe>
↓ Preview
2880 Broadway
View larger map
Map data ©2025 Google Report a map error
JavaScript in HTML
<script type="text/javascript">
let text = "Hello [Link]";
alert(text);
</script>
External JavaScript
<body>
...
<script src="[Link]"></script>
</body>
CSS in HTML
<style type="text/css">
h1 {
color: purple;
}
</style>
External stylesheet
<head>
...
<link rel="stylesheet" href="[Link]"/>
</head>
[Link] 4/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
# HTML5 Tags
Document
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>[Link]</h1>
</main>
<footer>
<p>©2023 [Link]</p>
</footer>
</body>
Header Navigation
<header>
<nav>
<ul>
<li><a href="#">Edit Page</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</header>
HTML5 Tags
article Content that’s independent
aside Secondary content
audio Embeds a sound, or an audio stream
bdi The Bidirectional Isolate element
canvas Draw graphics via JavaScript
data Machine readable content
datalist A set of pre-defined options
details Additional information
[Link] 5/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
dialog A dialog box or sub-window
embed Embeds external application
figcaption A caption or legend for a figure
figure A figure illustrated
footer Footer or least important
header Masthead or important information
main The main content of the document
mark Text highlighted
meter A scalar value within a known range
nav A section of navigation links
output The result of a calculation
picture A container for multiple image sources
progress The completion progress of a task
rp Provides fall-back parenthesis
rt Defines the pronunciation of character
ruby Represents a ruby annotation
section A group in a series of related content
source Resources for the media elements
summary A summary for the <details> element
template Defines the fragments of HTML
time A time or date
track Text tracks for the media elements
video Embeds video
wbr A line break opportunity
HTML5 Video
<video controls="" width="100%">
<source src="[Link]
videos/flower.mp4" type="video/mp4">
[Link] 6/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
Sorry, your browser doesn't support embedded videos.
</video>
↓ Preview
0:00 / 0:05
HTML5 Audio
<audio controls
src="[Link]
roar.mp3">
Your browser does not support the audio element.
</audio>
↓ Preview
0:00 / 0:02
HTML5 Ruby
<ruby>
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
↓ Preview
hàn zì
汉字
[Link] 7/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
HTML5 kdi
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi><إيان/bdi>: 90 points</li>
</ul>
↓ Preview
User hrefs: 60 points
User jdoe: 80 points
User إيان: 90 points
HTML5 progress
<progress value="50" max="100"></progress>
HTML5 mark
<p>I Love <mark>[Link]</mark></p>
I Love [Link]
# HTML Tables
Table Example
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
[Link] 8/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
HTML Table Tags
<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
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
See: td#Attributes
<th> Attributes
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
[Link] 9/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
# HTML Lists
Unordered list
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
See: The Unordered List element
Ordered list
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
See: The Ordered List element
Definition list
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
See: The Description List element
# HTML Forms
Form tags
<form method="POST" action="api/login">
<label for="mail">Email: </label>
[Link] 10/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
<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>
↓ Preview
Email:
Password:
Login
Remember me
The HTML <form> element is used to collect and send information to an external source.
Form Attribute
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"/>
</label>
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>
for in a label references an input's id attribute
[Link] 11/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
Input tags
<label for="Name">Name:</label>
<input type="text" name="Name" id="">
↓ Preview
Username:
See: HTML input Tags
Textarea tags
<textarea rows="2" cols="30" name="address" id="address"></textarea>
↓ Preview
Textarea is a multiple-line text input control
Radio Buttons
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
↓ Preview
Male Female
Radio buttons are used to let the user select exactly one
Checkboxes
<input type="checkbox" name="s" id="soc">
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Baseball</label>
↓ Preview
Soccer Baseball
[Link] 12/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
Checkboxes allows the user to select one or more
Select tags
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
↓ Preview
City: Sydney
A select box is a dropdown list of options
Fieldset tags
<fieldset>
<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>
</fieldset>
↓ Preview
Your favorite monster
Kraken
Sasquatch
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">
</datalist>
[Link] 13/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
↓ Preview
Choose a browser:
Submit and Reset Buttons
<form action="[Link]" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
↓ Preview
Name: Submit Reset
Submit the data to server; Reset to default values
# HTML input Tags
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="6" 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
[Link] 14/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
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="checkbox"
type="radio"
type="file" Choose file No file chosen
type="hidden"
type="text"
type="password"
type="image"
type="reset" Reset
type="button" Button
[Link] 15/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
type="submit" Submit
New Input Types in HTML5
type="color"
type="date" dd-mm-yyyy
type="time" --:--
type="month" ---------, ----
type="datetime-local" dd-mm-yyyy --:--
type="week" Week --, ----
type="email"
type="tel"
type="url"
type="number"
type="search"
type="range"
Input CSS selectors
input:focus When its keyboard focused
See: Input pseudo classes
# HTML meta Tags
Meta tags
The meta tag describes meta data within an HTML document. It explains additional material about the
HTML.
<meta charset="utf-8">
<!-- title -->
<title>···</title>
[Link] 16/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
<meta property="og:title" content="···">
<meta name="twitter:title" content="···">
<!-- url -->
<link rel="canonical" href="[Link]
<meta property="og:url" content="[Link]
<meta name="twitter:url" content="[Link]
<!-- description -->
<meta name="description" content="···">
<meta property="og:description" content="···">
<meta name="twitter:description" content="···">
<!-- image -->
<meta property="og:image" content="[Link]
<meta name="twitter:image" content="[Link]
<!-- 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="[Link]
<meta property="og:image" content="[Link]
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">
Used by Facebook, Instagram, Pinterest, LinkedIn, etc.
Twitter Cards
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@FechinLi">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="[Link]
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="[Link]
[Link] 17/19
09/01/2025, 23:58 HTML Cheat Sheet & Quick Reference
Geotagging
<meta name="ICBM" content="45.416667,-75.7">
<meta name="[Link]" content="45.416667;-75.7">
<meta name="[Link]" content="ca-on">
<meta name="[Link]" content="Ottawa">
See: Geotagging
# Also see
HTML 4.01 Specification ([Link])
MS OFFICEHACKS WITH AI
MS Office
With
ChatGPT &
AI
Save upto 2 Hours of Your
Time Working on MS Office
Every Day
Open
[Link] 18/19