Scribd
Upload
122 views

HTML Cheat Sheet & Quick Reference

The document provides an overview of common HTML and HTML5 tags arranged in a readable layout. It lists tags such as headings, paragraphs, images, links, tables and introduces newer HTML5 specific tags. The summary provides essential information about the purpose and structure of the document in 3 sentences.

Uploaded by

Mostafa Mirbabaie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
122 views

HTML Cheat Sheet & Quick Reference

The document provides an overview of common HTML and HTML5 tags arranged in a readable layout. It lists tags such as headings, paragraphs, images, links, tables and introduces newer HTML5 specific tags. The summary provides essential information about the purpose and structure of the document in 3 sentences.

Uploaded by

Mostafa Mirbabaie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

HTML

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

# Getting Started
hello.html

<!DOCTYPE html>
<html lang="en">
<head>
<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>
</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

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

target Link target location:


_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

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>
h hi i di /h
You should only have one h1 on your page

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

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&iwloc=&output=embed"
scrolling="no">
</iframe>

↓ Preview
See: The Inline Frame element

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;
}
External stylesheet

<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>
<li><a href="#">Facebook</a></li>
</ul>
</nav>

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


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
HTML5 Audio

<audio controls
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
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à ì
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

User ‫إيان‬: 90 points

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

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>

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

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

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

<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

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

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">
<input type="reset" value="Reset">
</form>
↓ Preview

Name: Submit Reset

Submit the data to server; Reset to default values


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

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 <input> element

Input types

type="checkbox"

type="radio"

type="file" Choose File No file chosen

type="hidden"

type="text"
type="password"

type="image"

type="reset" Reset

type="button" Button

type="submit" Submit

New Input Types in HTML5

type="color"

type="date" mm/dd/yyyy

type="time" --:-- --

type="month" --------- ----

type="datetime-local" mm/dd/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

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

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

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/html">
<meta property="og:image" content="https://xxx.com/image.jpg">
<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.

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/html">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">

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

You might also like