Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

HTML Cheat Sheet & Quick Reference

The document is an HTML cheat sheet that provides a quick reference to common HTML and HTML5 tags, including their attributes and usage examples. It covers various elements such as headings, paragraphs, links, images, forms, and multimedia tags. Additionally, it includes information on HTML5 specific tags and their functionalities.

Uploaded by

rvsharmacool
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML Cheat Sheet & Quick Reference

The document is an HTML cheat sheet that provides a quick reference to common HTML and HTML5 tags, including their attributes and usage examples. It covers various elements such as headings, paragraphs, links, images, forms, and multimedia tags. Additionally, it includes information on HTML5 specific tags and their functionalities.

Uploaded by

rvsharmacool
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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:jack@abc.com">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

You might also like