Scribd
Upload
2K views5 pages

Quickref Me HTML

The document provides an HTML cheat sheet listing many common HTML and HTML5 tags. It includes tags for headings, text formatting, images, links, and sections. It also lists some HTML5 specific tags.

Uploaded by

Daksh Prajapati
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
2K views5 pages

Quickref Me HTML

The document provides an HTML cheat sheet listing many common HTML and HTML5 tags. It includes tags for headings, text formatting, images, links, and sections. It also lists some HTML5 specific tags.

Uploaded by

Daksh Prajapati
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/ 5

 QuickRef.

ME  Search for cheatsheet ⌘K  Sponsor  Edit page  

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

# Getting started
hello.html Comment

<!DOCTYPE html> <!-- this is a comment -->


<html lang="en">
<head> <!--
<meta charset="UTF-8"> Or you can comment out a
<meta http-equiv="X-UA-Compatible" content="IE=edge"> large number of lines.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>HTML5 Boilerplate</title>
</head>
<body> Paragraph
<h1>Hello world, hello QuickRef.ME!</h1>
</body> <p>I'm from QuickRef.ME</p>
</html> <p>Share quick reference cheat sheet.</p>

Or try it out in the jsfiddle See: The Paragraph element

HTML link Image Tag Text Formatting Tags

<a href="https://quickref.me">QuickRef</a> <img loading="lazy" src="https://xxx.png" <b>Bold Text</b>


<a href="mailto:[email protected]">Email</a> alt="Describe image here" width="400" <strong>This text is important</strong>
<a href="tel:+12345678">Call</a> height="400"> <i>Italic Text</i>
<a href="sms:+12345678&body=ha%20ha">Msg</a <em>This text is emphasized</em>
Required, Image location (URL | <u>Underline Text</u>
src
href The URL that the hyperlink points to Path) <pre>Preformatted text</pre>
<code>Source code</code>
rel Relationship of the linked URL alt Describe of the image <del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
Link target location: width Width of the image <ins>Inserted text</ins>
target
_self, _blank, _top, _parent <sup>Makes text superscripted</sup>
height Height of the image <sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
loading How the browser should load <pre>Pre-formatted Text</pre>
<kbd>Ctrl</kbd>
See: The <a> Attributes See: The Image Embed element <blockquote>Text Block Quote</blockquote>

Headings Section Divisions Inline Frame

<h1> This is Heading 1 </h1> Division or Section of Page <iframe title="New York"
<div></div>
<h2> This is Heading 2 </h2> Content width="342"
<h3> This is Heading 3 </h3> height="306"
Section of text within other
<h4> This is Heading 4 </h4> <span></span> id="gmap_canvas"
content
<h5> This is Heading 5 </h5> src="https://maps.google.com/maps?
<h6> This is Heading 6 </h6> <p></p> Paragraph of Text q=2880%20Broadway,%20New%20York&t=&z=13&ie
=UTF8&iwloc=&output=embed"
<br> Line Break scrolling="no">
</iframe>
<hr> Basic Horizontal Line
↓ Preview
These are the tags used to divide your page up
You should only have one h1 on your page into sections

JavaScript in HTML CSS in HTML

<script type="text/javascript"> <style type="text/css">


let text = "Hello QuickRef.ME"; h1 {
alert(text); color: purple;
</script> }
</style>
External JavaScript
External stylesheet
<head>
<body>
... <body>
<script src="app.js"></script> ...
</head> <link rel="stylesheet" href="style.css"/>
</body> See: The Inline Frame element

# HTML5 Tags
Document Header Navigation HTML5 Tags

<body> <header> article Content that’s independent


<header> <nav>
aside Secondary content
<nav>...</nav> <ul>
</header> <li><a href="#">Edit Page</a></li>
audio Embeds a sound, or an audio stream
<main> <li><a href="#">Twitter</a></li>
<h1>QuickRef.ME</h1> <li><a href="#">Facebook</a></li> bdi The Bidirectional Isolate element
</main> </ul>
<footer> </nav> canvas Draw graphics via JavaScript
<p>©2023 QuickRef.ME</p> </header>
</footer> data Machine readable content
</body>
datalist A set of pre-defined options

details Additional information


HTML5 Video HTML5 Audio
dialog A dialog box or sub-window
<video controls="" width="100%"> <audio controls
embed Embeds external application
<source src="https://interactive- src="https://interactive-
examples.mdn.mozilla.net/media/cc0- examples.mdn.mozilla.net/media/cc0-
figcaption A caption or legend for a figure
videos/flower.mp4" type="video/mp4"> audio/t-rex-roar.mp3">
Sorry, your browser doesn't support Your browser does not support the figure A figure illustrated
embedded videos. audio element.
</video> </audio> footer Footer or least important

↓ Preview ↓ Preview 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

0:00 / 0:05 output The result of a calculation


0:00 / 0:02
A container for multiple image
picture
sources

HTML5 Ruby HTML5 kdi progress The completion progress of a task

<ruby> <ul> rp Provides fall-back parenthesis


汉 <rp>(</rp><rt>hàn</rt><rp>)</rp> <li>User <bdi>hrefs</bdi>: 60 points</li>
Defines the pronunciation of
字 <rp>(</rp><rt>zì</rt><rp>)</rp> <li>User <bdi>jdoe</bdi>: 80 points</li> rt
character
</ruby> <li>User <bdi>‫<إﯾﺎن‬/bdi>: 90 points</li>
</ul>
ruby Represents a ruby annotation
↓ Preview
↓ Preview section A group in a series of related content
hàn zì
User hrefs: 60 points

汉字
source Resources for the media elements

User jdoe: 80 points A summary for the <details>


summary
element
User ‫إﻳﺎن‬: 90 points
template Defines the fragments of HTML

time A time or date


HTML5 progress HTML5 mark
track Text tracks for the media elements
<progress value="50" max="100"></progress> <p>I Love <mark>QuickRef.ME</mark></p>
video Embeds video

I Love QuickRef.ME wbr A line break opportunity

# HTML Tables
Table Example HTML Table Tags <td> Attributes

<table> <table> Defines a table colspan Number of columns a cell should span
<thead>
<th> Defines a header cell in a table One or more header cells a cell is
<tr> headers
related to
d / d
e a ed o
<td>name</td>
<tr> Defines a row in a table
<td>age</td>
rowspan Number of rows a cell should span
</tr> <td> Defines a cell in a table
</thead>
See: td#Attributes
<tbody> <caption> Defines a table caption
<tr>
<td>Roberta</td> <colgroup> Defines a group of columns
<th> Attributes
<td>39</td>
<col> Defines a column within a table colspan Number of columns a cell should span
</tr>
<tr>
<thead> Groups the header content One or more header cells a cell is
<td>Oliver</td> headers
related to
<td>25</td> <tbody> Groups the body content
</tr>
rowspan Number of rows a cell should span
</tbody> <tfoot> Groups the footer content
</table> abbr Description of the cell's content

scope The header element relates to

See: th#Attributes

# HTML Lists
Unordered list Ordered list Definition list

<ul> <ol> <dl>


<li>I'm an item</li> <li>I'm the first item</li> <dt>A Term</dt>
<li>I'm another item</li> <li>I'm the second item</li> <dd>Definition of a term</dd>
<li>I'm another item</li> <li>I'm the third item</li> <dt>Another Term</dt>
</ul> </ol> <dd>Definition of another term</dd>
</dl>

See: The Unordered List element See: The Ordered List element See: The Description List element

# HTML Forms
Form tags Form Attribute Label tags

<form method="POST" action="api/login"> name Name of form for scripting <!-- Nested label -->
<label for="mail">Email: </label> <label>Click me
<input type="email" id="mail" name="mail"
action URL of form script <input type="text" id="user" name="name"/>
<br/> </label>
method HTTP method, POST / GET (default)
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw">
enctype Media type, See enctype <!-- 'for' attribute -->
<br/>
<label for="user">Click me</label>
<input type="submit" value="Login">
onsubmit Runs when the form was submit <input id="user" type="text" name="name"/>
<br/>
<input type="checkbox" id="ck" name="ck"> onreset Runs when the form was reset
<label for="ck">Remember me</label> for in a label references an input's id attribute
</form>

Input tags Textarea tags


↓ Preview

<label for="Name">Name:</label> <textarea rows="2" cols="30"


Email: <input type="text" name="Name" id=""> name="address" id="address"></textarea>

Password:
↓ Preview ↓ Preview
Login
Remember me Username:

The HTML <form> element is used to collect and


send information to an external source. See: HTML input Tags Textarea is a multiple-line text input control

Radio Buttons Checkboxes Select tags

<input type="radio" name="gender" id="m"> <input type="checkbox" name="s" id="soc"> <label for="city">City:</label>
<label for="m">Male</label> <label for="soc">Soccer</label> <select name="city" id="city">
<input type="radio" name="gender" id="f"> <input type="checkbox" name="s" id="bas"> <option value="1">Sydney</option>
<label for="f">Female</label> <label for="bas">Baseball</label> <option value="2">Melbourne</option>
<option value="3">Cromwell</option>
↓ Preview ↓ Preview </select>

Male Female Soccer Baseball ↓ Preview

City: Sydney

Radio buttons are used to let the user select


exactly one Checkboxes allows the user to select one or more A select box is a dropdown list of options
Fieldset tags Datalist tags(HTML5) Submit and Reset Buttons

<fieldset> <label for="b">Choose a browser: </label> <form action="register.php" method="post">


<legend>Your favorite monster</legend> <input list="list" id="b" name="browser"/> <label for="foo">Name:</label>
<input type="radio" id="kra" name="m"> <datalist id="list"> <input type="text" name="name" id="foo">
<label for="kraken">Kraken</label><br/> <option value="Chrome"> <input type="submit" value="Submit">
<input type="radio" id="sas" name="m"> <option value="Firefox"> <input type="reset" value="Reset">
<label for="sas">Sasquatch</label> <option value="Internet Explorer"> </form>
</fieldset> <option value="Opera">
<option value="Safari"> ↓ Preview
↓ Preview <option value="Microsoft Edge">
</datalist> Name: Submit Reset
Your favorite monster
↓ Preview
Kraken
Sasquatch Choose a browser:
Submit the data to server; Reset to default values

# HTML input Tags


_ Input Attributes Input types

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

<input type="text" name="?" value="?" minlength="6" required />


type="file" Choose File No file chosen

type="…" The type of data that is being input type="hidden"

value="…" Default value type="text"

name="…" Used to describe this data in the HTTP request type="password"

id="…" Unique identifier that other HTML elements type="image"

readonly Stops the user from modifying


type="reset" Reset

disabled Stops any interaction


type="button" Button
checked The radio or checkbox select or not
type="submit" Submit
required Being compulsory, See required
New Input Types in HTML5

placeholder="…" Adds a temporary, See ::placeholder type="color"

autocomplete="off" Disable auto completion type="date" mm/dd/yyyy

autocapitalize="none" Disable auto capitalization type="time" --:-- --

inputmode="…" Display a specific keyboard, See inputmode type="month" --------- ----

list="…" The id of an associated datalist


type="datetime-local" mm/dd/yyyy, --:-- --

maxlength="…" Maximum number of characters


type="week" Week --, ----
minlength="…" Minimum number of characters
type="email"
min="…" Minimum numerical value on range & number
type="tel"
max="…" Maximum numerical value on range & number
type="url"
How the number will increment in range &
step="…" type="number"
number

pattern="…" Specifies a Regular expression, See pattern type="search"

autofocus Be focused type="range"

spellcheck Perform spell checking

Input CSS selectors


multiple Whether to allow multiple values
input:focus When its keyboard focused
accept="" Expected file type in file upload controls

Also see: Attributes for the <input> element See: Input pseudo classes

# HTML meta Tags


_ Meta tags Open Graph

The meta tag describes meta data within an HTML document. It explains <meta property="og:type" content="website">
additional material about the HTML. <meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML cheatsheet">
<meta charset="utf-8"> <meta property="og:url" content="https://quickref.me/html">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="Name of your website">
<!-- title -->
<meta property="og:description" content="Description of this page">
<title>···</title>
<meta property="og:title" content="···">
<meta name="twitter:title" content="···">
Used by Facebook, Instagram, Pinterest, LinkedIn, etc.

<!-- url -->


<link rel="canonical" href="https://···"> Twitter Cards

<meta property="og:url" content="https://···">


<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://···">
<meta name="twitter:site" content="@QuickRef_ME">
<meta name="twitter:title" content="HTML cheatsheet">
<!-- description --> <meta name="twitter:url" content="https://quickref.me/html">
<meta name="description" content="···"> <meta name="twitter:description" content="Description of this page">
<meta property="og:description" content="···"> <meta name="twitter:image" content="https://xxx.com/image.jpg">
<meta name="twitter:description" content="···">

<!-- image --> See: Twitter Card Documentation


<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
Geotagging

<!-- ua --> <meta name="ICBM" content="45.416667,-75.7">


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=1024"> See: Geotagging

# Also see
HTML 4.01 Specification (w3.org)

Related Cheatsheet Recent Cheatsheet


QuickRef.ME
PHP Cheatsheet WebStorm Cheatsheet Neo4j Cheatsheet HTML Cheatsheet Share quick reference and cheat sheet for
developers.
Quick Reference Quick Reference Quick Reference Quick Reference

#Notes
CSS 3 Cheatsheet JavaScript Cheatsheet GraphQL Cheatsheet Chmod Cheatsheet
Quick Reference Quick Reference Quick Reference Quick Reference     

© 2021 QuickRef.ME, All rights reserved.

You might also like