Scribd
Upload
35 views

HTML Cheat Sheet

This document provides a cheat sheet overview of common HTML tags and their usage in a readable layout. It lists many common HTML tags and their purpose, such as headings, paragraphs, images, links, and sectioning elements. The cheat sheet also shows how to add comments, format text, and include external stylesheets and scripts.

Uploaded by

kotapati Thrilok
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
35 views

HTML Cheat Sheet

This document provides a cheat sheet overview of common HTML tags and their usage in a readable layout. It lists many common HTML tags and their purpose, such as headings, paragraphs, images, links, and sectioning elements. The cheat sheet also shows how to add comments, format text, and include external stylesheets and scripts.

Uploaded by

kotapati Thrilok
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/ 1

QuickRef.

ME Search for cheatsheet ⌘ K Stars 4k Follow Me

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>
src Required, Image location (URL | Path) <u>Underline Text</u>
href The URL that the hyperlink points to <pre>Pre-formatted Text</pre>
alt Describe of the image <code>Source code</code>
rel Relationship of the linked URL <del>Deleted text</del>
width Width of the image <mark>Highlighted text (HTML5)</mark>
Link target location: <ins>Inserted text</ins>
target
_self, _blank, _top, _parent height Height of the image <sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
loading How the browser should load
<small>Makes text smaller</small>
<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> <div></div> Division or Section of Page Content <iframe title="New York"
<h2> This is Heading 2 </h2> width="342"
<span></span> Section of text within other content
<h3> This is Heading 3 </h3> height="306"
<h4> This is Heading 4 </h4> id="gmap_canvas"
<p></p> Paragraph of Text
<h5> This is Heading 5 </h5> src="https://maps.google.com/maps?
<h6> This is Heading 6 </h6> <br> Line Break q=2880%20Broadway,%20New%20York&t=&z=13&ie
=UTF8&iwloc=&output=embed"
<hr> Basic Horizontal Line scrolling="no">
</iframe>
These are the tags used to divide your page up into
You should only have one h1 on your page sections ↓ Preview

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
<body>
... <head>
...
<script src="app.js"></script> <link rel="stylesheet" href="style.css"/>
</body> </head> 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
<source src="https://interactive- src="https://interactive- embed Embeds external application
examples.mdn.mozilla.net/media/cc0- examples.mdn.mozilla.net/media/cc0-
videos/flower.mp4" type="video/mp4"> audio/t-rex-roar.mp3"> figcaption A caption or legend for a figure
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:00 / 0:00
output The result of a calculation

picture A container for multiple image sources


HTML5 Ruby HTML5 kdi
progress The completion progress of a task
<ruby> <ul>
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp> <li>User <bdi>hrefs</bdi>: 60 points</li> rp Provides fall-back parenthesis
字 <rp>(</rp><rt>zì</rt><rp>)</rp> <li>User <bdi>jdoe</bdi>: 80 points</li>
rt Defines the pronunciation of 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 summary A summary for the <details> 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 headers One or more header cells a cell is related to
<tr>
<td>name</td> <tr> Defines a row in a table rowspan Number of rows a cell should span
<td>age</td>
</tr> <td> Defines a cell in a table See: td#Attributes
</thead>
<tbody> <caption> Defines a table caption
<tr> <th> Attributes
<td>Roberta</td> <colgroup> Defines a group of columns
colspan Number of columns a cell should span
<td>39</td>
<col> Defines a column within a table
</tr>
headers One or more header cells a cell is related to
<tr>
<thead> Groups the header content
<td>Oliver</td> rowspan Number of rows a cell should span
<td>25</td> <tbody> Groups the body content
</tr> abbr Description of the cell's content
</tbody> <tfoot> Groups the footer content
</table> 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
action URL of form script
<input type="email" id="mail" name="mail" <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 information to type="checkbox"
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

minlength="…" Minimum number of characters type="week" Week --, ----

min="…" Minimum numerical value on range & number type="email"

max="…" Maximum numerical value on range & number type="tel"

step="…" How the number will increment in range & number type="url"

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

autofocus Be focused type="search"

spellcheck Perform spell checking type="range"

multiple Whether to allow multiple values


Input CSS selectors
accept="" Expected file type in file upload controls
input:focus When its keyboard focused

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 additional <meta property="og:type" content="website">
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="@FechinLi">
<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="···">

See: Twitter Card Documentation


<!-- image -->
<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
CSS 3 Cheatsheet JavaScript Cheatsheet Remote Work Revolution Ch Homebrew Cheatsheet
Share quick reference and cheat sheet for
Quick Reference Quick Reference Quick Reference Quick Reference
developers.

中文版 #Notes
jQuery Cheatsheet Laravel Cheatsheet PyTorch Cheatsheet Taskset Cheatsheet
Quick Reference Quick Reference Quick Reference Quick Reference

© 2023 QuickRef.ME, All rights reserved.

You might also like