HTML

Cheatsheet

Layout & Head Tag

HTML Document

<!DOCTYPE html> <html> <head>  </head> <body>  </body> </html>

Head

 <title> Webpage name </title>
 <meta charset="UTF-8"> <meta name="author" content="David">
 <base href="https://www.cheatsheet.com/" target="_blank">
 <link rel="icon" href="favicon.ico">

Webpage Layout

 <header> </header>
 <nav> </nav>
 <main> </main>
 <section> </section>
 <aside> </aside>
 <footer> </footer>

Content Formating

<br>  <hr> 

<div> <span> </span> <span> </span> </div>

(This is an empty line)

Text Tag

Text

<h1> Header 1 </h1> <h2> Header 2 </h2> <h3> Header 3 </h3> <h4> Header 4 </h4> <h5> Header 5 </h5> <h6> Header 6 </h6> <p> Paragraph </p> <pre> Pre-formatted text Pre-formatted text </pre>

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Paragraph

Pre-formatted text
    Pre-formatted text

Text - Font

<b> Bold </b> <i> Italic </i> <u> Underscore </u> <s> Strike </s> <small> Small </small> <sup> Superscript </sup> <sub> Subscript </sub> <mark> Mark </mark> <ruby> 寿司 <rt>すし</rt></ruby>

Bold
Italic
Underscore
~~Strike~~
Small
^Superscript
_Subscript
Mark
寿司すし

Text - Tone

<em> emphasized text </em> <ins> inserted text </ins> <del> deleted text </del> <strong> Important message!!! </strong>

emphasized text
inserted text
~~deleted text~~
Important message!!!

Text - Key Information

<address> 11 Wall St, New York </address> <time> 16:18:19 </time> <var> variable </var> <code> printf("Hello World"); </code> <abbr> HTML </abbr> <data value="#FF0000"> Red </data> <samp> C:\user> Hello World </samp> <def> Term to be defined </def> <kbd> Ctrl + C </kbd>

11 Wall St, New York

16:18:19
variable
printf("Hello World"); HTML
Red
C:\user> Hello World
Term to be defined
Ctrl + C

Text - Key Information

 <bdo dir="rtl"> This text start from right to left </bdo>
This text start from right to left

 <p> Isolate the arabic(R->L) <bdi>العربية</bdi> from English(L->R) text. </p>

Isolate the arabic(R->L) العربية from English(L->R) text.

 <p> LineBreakOccurAtWBR_Tag<wbr>IfLongWordIsOverflowed </p>

LineBreakOccurAtWBR_TagIfLongWordIsOverflowed

Text - Citation

<cite> Da Vinci, Leonardo. Mona Lisa. 1503 </cite>
Da Vinci, Leonardo. Mona Lisa. 1503

<blockquote cite="example.com">this is content from other website</blockquote>

this is content from other website

<q> I have not failed, I've just found 10000 ways that don't work.</q>
I have not failed, I've just found 10000 ways that don't work.

Grouping - Header Group

<hgroup> <h1> HTML </h1> <p> A markup language for webpage </p> </hgroup>

HTML

A markup language for webpage

Grouping - Article

<article> <h1> Article Title </h1> <p> This is the article paragraph. </p> </article>

Article Title

This is the article paragraph.

List & Table Tag

List - Ordered List

 <ol> <li> Ordered Item 1 </li> <li> Ordered Item 2 </li> <li> Ordered Item 3 </li> </ol>

Ordered Item 1
Ordered Item 2
Ordered Item 3

List - Un-ordered List

 <ul> <li> Item X </li> <li> Item Y </li> <li> Item Z </li> </ul>

Item X
Item Y
Item Z

List - Description List

 <dl> <dt> Espresso </dt> <dd> a concentrated pure coffee drink </dd> <dt> Latte </dt> <dd> mixing espresso with milk </dd> </dl>

Espresso: a concentrated pure coffee drink
Latte: mixing espresso with milk

Table

<table> <caption> Fruit Market </caption>
 <calgroup> <col style="background-color:Sienna"> <col style="background-color:SteelBlue"> <col style="background-color:SteelBlue"> </calgroup>
 <thead> <tr> <th></th> <th>Price</th> <th>Quantity</th> </tr> </thead> <tbody> <tr> <td>apple</td> <td>$1.6</td> <td>15</td> </tr> <tr> <td>orange</td> <td>$0.9</td> <td>8</td> </tr> </tbody> <tfoot> <tr> <td>Total:</td> <td>$2.5</td> <td>23</td> </tr> </tfoot> </table>

Fruit Market
	Price	Quantity
apple	$1.6	15
orange	$0.9	8
Total:	$2.5	23

Input & Form Tag

Input - Text Input

<input type="text"> <input type="email"> <input type="number"> <input type="password"> <input type="search"> <input type="tel"> <input type="url">

<textarea> Here is text area </textarea>

Input - Text Input (w. preset
options)

<input list="mylist"> <datalist id="mylist"> <option> Hawaii </option> <option> Margherita </option> </datalist>

Input - Button

<button> Button </button> <input type="button"> <input type="image" src="snow.svg"> <input type="reset"> <input type="submit">

Input - Date & Time

<input type="date"> <input type="week"> <input type="month"> <input type="time"> <input type="datetime-local">

Input - Selection

<select> <option>option 1</option> <option>option 2</option>
<optgroup label="Option Group"> <option>option 3</option> <option>option 4</option> </optgroup> </select>

Input - Selection Button

<input type="checkbox"> <input type="color"> <input type="radio"> <input type="range">

Input - File

<input type="file">

Output

<form oninput="out.value=parseInt(i.value); meter.value=parseInt(i.value)/100; prog.value=parseInt(i.value)/100";>
 <input type="number" id="i">
 <output name="out">0</output> <meter id="meter"> </meter> <progress id="prog"> </progress> </form>

Grouping - Form

<form> <fieldset> <legend>Group A</legend> <label>First Name:</label> <input type="text"> <br> <label>Last Name:</label> <input type="text"> </fieldset>
<fieldset> <legend>Group B</legend> <label for="ra">Male:</label> <input id="ra" name="form" type="radio"> <label for="rb">Female:</label> <input id="rb" type="radio" name="form"> </fieldset> </form>

(Label tag allow user to click on small input region)

Media Tag

Image

 <picture> <source media="(max-width:700px)" srcset="img_s.jpg"> <source media="(max-width:1000px)" srcset="img_m.jpg">
 <img src="img.jpg"> </picture>

Video

 <video controls> <source src="meme.mp4" type="video/mp4"> <source src="meme.webm" type="video/webm">
 <track src="subtitle.vtt" kind="subtitles"> </video>

Audio

 <audio controls> <source src="audio.mp3" type="audio/mp3"> <source src="audio.wav" type="audio/wav"> </audio>

Hyperlink

<a href="https://www.google.com/">Google</a>

Google

IFrame

<iframe src="https://www.youtube.com/embed/3KtWfp0UopM?si=H-gkLOLB_rtG5DdE"></iframe>

Canvas

<canvas width="200" height="200" id="myCanvas"></canvas>
<script> let ctx = document.getElementById("myCanvas").getContext("2d"); for (let i = 0; i < 10; i++){ for (let j = 0; j < 10; j++){ ctx.fillStyle = `hsl(${i*36} ${100} ${(j+1)*9})` ctx.fillRect(i*20,j*20,(i+1)*20,(i+1)*20); } } </script>

Map & Area

<img src="shape.svg" usemap="#map">
 <map name="map"> <area shape="rect" coords="20 20 60 60" href="url"> <area shape="circle" coords="100 100 40" href="url"> </map>

Hidden Content

Input - Hidden

<input type="hidden">

(Here lies a hidden input)

Dropdown Content

<details> <summary>Details Tag</summary> <p>You can hide content under a dropdown.</p> </details>

Details Tag

You can hide content under a dropdown.

Pop Up Window

 <dialog open> <p>Dialog is a pop up sub-window.</p> </dialog>

Dialog is a pop up sub-window.

Template

<template> </template>

(Template is a container of HTML fragment)

(Use Javascript to clone there fragment and insert them into the DOM tree to display them.)

Javascript, CSS & XML

CSS Support

 <link rel="stylesheet" href="style.css">
 <style> h1 { color:red; } </style>

Javascript Support

 <script src="code.js"> </script>
 <script> console.log("Hello World!") </script>
<noscript> Alternative text if javascript is not supported </noscript>

XML Support - MathML

 <math> <mi>y</mi><mi>=</mi><mi>2</mi><mi>x</mi> </math>

y = 2 x

XML Support - SVG

 <svg> <circle cx="40" cy="40" r="30" fill="coral"/> </svg>

DOM Tree

When web browser receive the HTML document, it turn the file into a Document Object Model (DOM) Tree.

The tree contains has 4 type of node:

Document Type node
Element node
Text node
Comment node

HTML elements are converted into a Javascript object , then combine into a tree structure.

Their attributes become a member variable with object function to manipulate.

Meta name, http-equiv & Link

Meta Name

<meta name="description" content="This is an example of a meta description"> <meta name="keywords" content="HTML,cheatsheet,website"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> (HTML viewport key-value pair) <meta name="application-name" content="My Web App"> <meta name="generator" content="WordPress 5.8"> <meta name="theme-color" content="#FFFFFF"> <meta name="referrer" content="no-referrer"> <meta name="color-scheme" content="light dark"> (HTML color scheme name)

Meta http-equiv

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> (MIME Type) <meta http-equiv="content-security-policy" content="default-src 'self'"> (HTML content security policy) <meta http-equiv="default-style" content="my_style.css"> <meta http-equiv="refresh" content="30">

Open Graph

<meta property="og:title" content="Example Title"> <meta property="og:description" content="This is the website description"> <meta property="og:image" content="https://cheatsheet.com/image.jpg"> <meta property="og:url" content="https://cheatsheet.com/page.html"> <meta property="og:type" content="website"> (more open graph tags ...)

Link

<link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico"> <link rel="alternate" href="https://example.com/fr" hreflang="fr"> <link rel="preload" href="main.js" as="script"> (more rel values ...)

HTML Attributes

Global Attribute

id class title tabindex nonce style data-* contenteditable autocapitalize autofocus spellcheck inputmode accesskey enterkeyhint draggable hidden popover lang dir translate inert exportparts part slot itemprop itemid itemref itemscope itemtype

Visible Element

onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll onwheel ondrag ondrop ondragenter ondragleave ondragover ondragstart onblur onchange oncontextmenu onfocus oninput oninvalid onselect oncopy oncut onpaste onkeydown onkeypress onkeyup

Playable Media Element

autoplay controls controlslist crossorigin disableremoteplayback height loop muted preload src width onplay onpause onsuspend ontimeupdate onvolumechange onratechange onplaying onwaiting onended oncanplay oncanplaythrough ondurationchange onloadeddata onloadedmetadata onloadstart onprogress onseeked onseeking onemptied onstalled onabort onerror

a

download href hreflang ping referrerpolicy rel target type

area

alt coords download href hreflang ping referrerpolicy rel shape target

body

onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhashchange onlanguagechange onload onmessage onmessageerror onoffline ononline onpageswap onpagehide onpagereveal onpageshow onpopstate onresize onrejectionhandled onstorage onunhandlerejection onunload

button

autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name popovertarget popovertargetaction type value

base

href target

blockquote

cite

canvas

height width

col & colgroup

span

data

value

del

cite datetime

details

open ontoggle name

dialog

open

fieldset

disabled form name

form

accept-charset action autocapitalize autocomplete enctype method novalidate name onreset onsubmit rel target

html

xmls

img

alt crossorigin decoding elementtiming fetchpriority height ismap loading onabort onerror onload referrerpolicy sizes src srcset usemap width

input

accept alt autocomplete autofocus capture checked dirname disabled form formaction formenctype formmethod formnovalidate formtarget height list max maxlength min minlength multiple name onload onsearch pattern placeholder popovertarget popovertargetaction readonly required size src step type value width

ins

cite datetime

iframe

allow allowfullscreen height loading name referrerpolicy sandbox src srcdoc width

label

for form

li

value

link

as blocking crossorigin disabled fetchpriority href hreflang imagesizes imagesrcset integrity media onload referrerpolicy rel sizes title type

map

name

meter

form high low max min optimum value

ol

reversed start type

optgroup

disabled label

option

disabled label selected value

output

for form name

progress

max value

q

cite

script

async blocking crossorigin defer fetchpriority integrity nomodule nonce onerror onload referrerpolicy src type

select

autocomplete autofocus disabled form multiple name required size

slot

name

source

height media sizes src srcset type width

style

blocking media nonce type

td

colspan headers rowspan

template

shadowrootmode shadowrootclonable shadowrootdelegatesfocus

textarea

autocapitalize autocomplete autocorrect autofocus cols dirname disabled form maxlength minlength name placeholder readonly required rows spellcheck wrap

th

colspan headers rowspan scope

time

datetime

track

default kind label oncuechange src srclang

video

disablepictureinpicture playsinline poster

HTML Values

accept

"audio/*" "video/*" "image/*" [.File Types]

accept-charset

[Character Encoding]

accesskey

[Keyboard Key]

action

[Backend URL]

allow

[Permission Policy Syntax]

alt

string

as

"audio" "document" "embed" "fetch" "font" "image" "object" "script" "style" "track" "video" "worker"

async

[Javascript File]

autocapitalize

"on" "off" "words" "characters"

autocomplete

"on" "off" [Auto Fill Detail Tokens]

autofocus

boolean

autoplay

boolean

charset

[character encoding]

checked

boolean

cite

[URL]

class

string

cols

int

colspan

int

content

(see HTML head section)

contenteditable

boolean

controls

boolean

coords

rectangle: x1,y1,x2,y2 circle: x,y,r polygon: x1,y1,x2,y2,...,xn,yn

crossorigin

"anonymous" "use-credentils" ""

data-*

string

datetime

[ISO8601 time format] (eg. YYYY-MM-DDThh:mm:ssTZD)

decoding

"sync" "async" "auto"

default

boolean

defer

boolean

dir

"ltr" "rtl" "auto"

dirname

"{HTML name}.dir" "rtl" "ltr"

disabled

boolean

download

boolean

draggable

boolean

enctype

[MIME type]

enterkeyhint

"enter" "done" "go" "next" "previous" "search" "send"

fetchpriority

"high" "low" "auto"

for

{HTML id}

form

{HTML id}

formaction

[backend URL]

formenctype

"application/x-www-form-urlencoded" "multipart/form-data" "text/plain"

formmethod

"get" "post "dialog"

formnovalidate

boolean

formtarget

"_self" "_blank_" "_parent" "_top"

headers

{HTML id}

height

int

hidden

boolean

high

int

href

[URL]

hreflang

[ISO 639-1 language code]

http-equiv

(see HTML head section)

id

string

integrity

[hash algorithm]-[hash key] (eg. sha256-A591A6D40BF...)

inert

boolean

inputmode

"none" "text" "decimal" "numeric" "tel" "search" "email" "url"

ismap

boolean

itemid

string

itemprop

string

itemref

string

itemscope

boolean

itemtype

string

kind

"subtitles" "captions" "chapters" "metadata"

label

string

lang

[ISO 639-1 language code]

loading

"lazy" "eager"

list

{HTML id}

loop

boolean

low

int

max

int

maxlength

int

media

[media query]

method

"post" "get" "dialog"

min

int

minlength

int

multiple

boolean

muted

boolean

name

string

novalidate

boolean

oneventhandler

[Javascript function]

open

boolean

optimum

int

pattern

[regular expression]

ping

[URL]

placeholder

string

playsinline

boolean

popover

boolean

popovertarget

{HTML id}

popovertargetaction

"show" "hide" "toggle"

poster

[image URL]

preload

"auto" "metadata" "none"

readonly

boolean

rel

"alternate"  "author"  "bookmark"  "canonical" "dns-prefetch" "external" "expect" "help" "icon" "license" "manifest" "me" "modulepreload" "next" "nofollow" "noopener" "noreferrer" "opener" "pingback" "preconnect" "prefetch" "preload" "prerender" "prev" "privacy-policy" "search" "stylesheet" "tag" "terms-of-service"

referrerpolicy

"no-referrer" "no-referrer-when-downgrade" "origin" "origin-when-cross-origin" "same-origin" "strict-origin""strict-origin-when-cross-origin" "unsafe-url"

required

boolean

reversed

boolean

role

[WAI-ARIA role]

rows

int

rowspan

int

sandbox

"allow-downloads" "allow-forms" "allow-modals" "allow-orientation-lock" "allow-pointer-lock" "allow-popups" "allow-popups-to-escape-sandbox" "allow-presentation" "allow-same-origin" "allow-scripts" "allow-top-navigation" "allow-top-navigation-by-user-activation" "allow-top-navigation-to-custom-protocols"

scope

"row" "col" "rowgroup" "colgroup"

selected

boolean

shape

"rect" "circle" "poly" "default"

size

int

sizes

[media condition] "int x int"

slot

{HTML name}

span

int

spellcheck

boolean

src

[file URL]

srcdoc

[HTML code]

srclang

[ISO 639-1 language code]

srcset

[image URL]

start

int

step

int

style

[CSS code]

tabindex

int

target

"_self" "_blank" "_parent" "_top" "_unfencedTop"

title

string

translate

"yes" "no"

type <button>

"yes" "no"

type <input>

"button" "checkbox" "color" "date" "datetime-local" "email" "file" "hidden" "image" "month" "number" "password" "radio" "range" "reset" "search" "submit" "tel" "text" "time" "url" "week"d

type <ol>

"a" "A" "i" "I" '1"

type <script>

"module" "importmap" [MIME Type]

type <source> <link>

[MIME Type]

usemap

{#HTML name}

value <button> <input> <option>

string

value <li> <meter> <progress>

int

width

int

wrap

"soft" "hard"

HTML

Cheatsheet

Layout & Head Tag

HTML Document

Head

Webpage Layout

Content Formating

Text Tag

Text

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Text - Font

Text - Tone

Text - Key Information

Text - Key Information

Text - Citation

Grouping - Header Group

HTML

Grouping - Article

Article Title

List & Table Tag

List - Ordered List

List - Un-ordered List

List - Description List

Table

Input & Form Tag

Input - Text Input

Input - Text Input (w. preset options)

Input - Button

Input - Date & Time

Input - Selection

Input - Selection Button

Input - File

Output

Grouping - Form

Media Tag

Image

Video

Audio

Hyperlink

IFrame

Canvas

Map & Area

Hidden Content

Input - Hidden

Dropdown Content

Pop Up Window

Template

Javascript, CSS & XML

CSS Support

Javascript Support

XML Support - MathML

XML Support - SVG

DOM Tree

Meta name, http-equiv & Link

Meta Name

Meta http-equiv

Open Graph

Link

HTML Attributes

Global Attribute

Visible Element

Playable Media Element

a

area

body

button

base

blockquote

canvas

col & colgroup

data

del

details

dialog

fieldset

Input - Text Input (w. preset
options)