HTML Cheat Sheet

This HTML quick reference cheat sheet lists the common HTML and HTML5 tags in readable layout.

HTML meta Tags


<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

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="">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="">

See: Twitter Card Documentation

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">

Used by Facebook, Instagram, Pinterest, LinkedIn, etc.

Meta tags

The meta tag describes meta data within an HTML document. It explains additional material about the HTML.

<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">

HTML input Tags

Input CSS selectors

input:focus When its keyboard focused
See: Input pseudo classes

Input types

type="button" Button

#New Input Types in HTML5


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
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
Also see: Attributes for the element

HTML Forms

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">

#↓ Preview

Name: Submit the data to server; Reset to default values

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">

#↓ Preview

Choose a browser:

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>

#↓ Preview

Your favorite monster Kraken

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>

#↓ Preview

City: Sydney Melbourne Cromwell A select box is a dropdown list of options


<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 Checkboxes allows the user to select one or more

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

Textarea tags

<textarea rows="2" cols="30" name="address" id="address"></textarea>

#↓ Preview

Textarea is a multiple-line text input control

Input tags

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

#↓ Preview

Username: See: HTML input Tags

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"/>

for in a label references an input's id attribute

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

Form tags

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

#↓ Preview



Remember me The HTML <form> element is used to collect and send information to an external source.

HTML Lists

Definition list

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

See: The Description List element

Ordered list

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

See: The Ordered List element

Unordered list

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

See: The Unordered List element

HTML Tables

<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
See: th#Attributes

<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
See: td#Attributes

HTML Table Tags

Tag Description
Defines a table
Defines a header cell in a table
Defines a row in a table
Defines a cell in a table
Defines a table caption
Defines a group of columns
Defines a column within a table
Groups the header content
Groups the body content
Groups the footer content

Table Example


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
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
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 mark

<p>I Love <mark>QuickRef.ME</mark></p>

I Love QuickRef.ME

HTML5 progress

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

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>

#↓ Preview

  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

HTML5 Ruby

  汉 <rp>(</rp><rt>hÃ&nbsp;n</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>

#↓ Preview

汉 (hàn) 字 (zì)

HTML5 Audio

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

#↓ Preview

Your browser does not support the audio element.

HTML5 Video

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

#↓ Preview

Sorry, your browser doesn't support embedded videos.

Header Navigation

      <li><a href="#">Edit Page</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>


    <p>©2023 QuickRef.ME</p>

Getting Started


<style type="text/css">
 h1 {
 color: purple;

#External stylesheet

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

JavaScript in HTML

<script type="text/javascript">
 let text = "Hello QuickRef.ME";

#External JavaScript


    <script src="app.js"></script>

Inline Frame

<iframe title="New York"

#↓ Preview

See: The Inline Frame element

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


<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

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>
<blockquote>Text Block Quote</blockquote>

Image Tag

<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">

src Required, Image location *(URL
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

HTML link

<a href="">QuickRef</a>
<a href="mailto:[[email&nbsp;protected]](/cdn-cgi/l/email-protection)">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
target Link target location: _self, _blank, _top, _parent
See: The Attributes


<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>

See: The Paragraph element


<!-- this is a comment -->
 Or you can comment out a
 large number of lines.


<!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 Boilerplate</title>
    <h1>Hello world, hello QuickRef.ME!</h1>

Or try it out in the jsfiddle