4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
QuickRef.ME Stars 8k
HTML
This HTML quick reference cheat sheet lists the common HTML
and HTML5 tags in readable layout.
Test Your IQ
Take our IQ test and find out your true IQ score in just 3 mi
# Getting Started
hello.html
https://quickref.me/html 1/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=ed
<meta name="viewport" content="width=device-width
<title>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello QuickRef.ME!</h1>
</body>
</html>
Or try it out in the jsfiddle
Comment
<!-- this is a comment -->
<!--
Or you can comment out a
large number of lines.
-->
Paragraph
<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>
See: The Paragraph element
https://quickref.me/html 2/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
HTML link
<a href="https://quickref.me">QuickRef</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
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="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
See: The Image Embed element
https://quickref.me/html 3/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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>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
https://quickref.me/html 4/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<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"
width="342"
height="306"
id="gmap_canvas"
src="https://maps.google.com/maps?
q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwlo
c=&output=embed"
scrolling="no">
</iframe>
↓ Preview
https://quickref.me/html 5/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
Armstrong
Armstrong, 2880 Broadway, New
York, NY 10025, USA
View larger map
JavaScript in HTML
<script type="text/javascript">
let text = "Hello QuickRef.ME";
alert(text);
</script>
External JavaScript
<body>
...
<script src="app.js"></script>
</body>
CSS in HTML
<style type="text/css">
h1 {
color: purple;
}
</style>
External stylesheet
https://quickref.me/html 6/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<head>
...
<link rel="stylesheet" href="style.css"/>
</head>
# HTML5 Tags
Document
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>QuickRef.ME</h1>
</main>
<footer>
<p>©2023 QuickRef.ME</p>
</footer>
</body>
Header Navigation
<header>
<nav>
<ul>
<li><a href="#">Edit Page</a></li>
<li><a href="#">Twitter</a></li>
https://quickref.me/html 7/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<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
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
https://quickref.me/html 8/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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
https://quickref.me/html 9/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
HTML5 Video
<video controls="" width="100%">
<source src="https://interactive-
examples.mdn.mozilla.net/media/cc0-
videos/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded
videos.
</video>
↓ Preview
0:05 / 0:05
HTML5 Audio
<audio controls
src="https://interactive-
examples.mdn.mozilla.net/media/cc0-audio/t-rex-
roar.mp3">
https://quickref.me/html 10/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
Your browser does not support the audio element.
</audio>
↓ Preview
HTML5 Ruby
<ruby>
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
↓ Preview
hàn zì
汉 字
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
https://quickref.me/html 11/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
HTML5 progress
<progress value="50" max="100"></progress>
HTML5 mark
<p>I Love <mark>QuickRef.ME</mark></p>
I Love QuickRef.ME
# HTML Tables
Table Example
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
https://quickref.me/html 12/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<td>39</td>
</tr>
<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
https://quickref.me/html 13/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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
See: th#Attributes
# HTML Lists
Unordered list
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
https://quickref.me/html 14/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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
https://quickref.me/html 15/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<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>
↓ 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)
https://quickref.me/html 16/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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
Input tags
<label for="Name">Name:</label>
<input type="text" name="Name" id="">
↓ Preview
Username:
See: HTML input Tags
Textarea tags
https://quickref.me/html 17/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<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
https://quickref.me/html 18/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
Soccer Baseball
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
https://quickref.me/html 19/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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>
↓ Preview
Choose a browser:
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">
https://quickref.me/html 20/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<input type="reset" value="Reset">
</form>
↓ Preview
Name: Submit Reset
# 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 />
The type of data that is being
type="…"
input
value="…" Default value
Used to describe this data in
name="…"
the HTTP request
Unique identifier that other
id="…"
HTML elements
https://quickref.me/html 21/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
readonly Stops the user from modifying
disabled Stops any interaction
The radio or checkbox select or
checked
not
Being compulsory, See
required
required
Adds a temporary, See
placeholder="…"
::placeholder
autocomplete="off" Disable auto completion
autocapitalize="none" Disable auto capitalization
Display a specific keyboard,
inputmode="…"
See inputmode
list="…" The id of an associated datalist
Maximum number of
maxlength="…"
characters
Minimum number of
minlength="…"
characters
Minimum numerical value on
min="…"
range & number
Maximum numerical value on
max="…"
range & number
https://quickref.me/html 22/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
How the number will
step="…"
increment in range & number
Specifies a Regular expression,
pattern="…"
See pattern
autofocus Be focused
spellcheck Perform spell checking
Whether to allow multiple
multiple
values
Expected file type in file upload
accept=""
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
https://quickref.me/html 23/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
type="button" Button
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
https://quickref.me/html 24/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
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>
<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="···">
https://quickref.me/html 25/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<!-- image -->
<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,c
<!-- viewport -->
<meta name="viewport" content="width=device-width">
t " i t" t t " idth 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="https://quickref.me/
<meta property="og:image" content="https://xxx.com/im
<meta property="og:site_name" content="Name of your w
<meta property="og:description" content="Description
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="https://quickref.me
https://quickref.me/html 26/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
<meta name="twitter:description" content="Description
<meta name="twitter:image" content="https://xxx.com/i
See: Twitter Card Documentation
Geotagging
<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">
See: Geotagging
# Also see
HTML 4.01 Specification (w3.org)
Related Cheatsheet
CSS 3 Cheatsheet JavaScript Cheatsheet
Quick Reference Quick Reference
https://quickref.me/html 27/28
4/26/25, 4:07 PM HTML Cheat Sheet & Quick Reference
jQuery Cheatsheet Laravel Cheatsheet
Quick Reference Quick Reference
Recent Cheatsheet
Remote Work Revolution Che Homebrew Cheatsheet
Quick Reference Quick Reference
PyTorch Cheatsheet Taskset Cheatsheet
Quick Reference Quick Reference
© 2025 QuickRef.ME, All rights reserved.
https://quickref.me/html 28/28
