Article Title
This is the article paragraph.
HTML
Cheatsheet
Layout & Head Tag
HTML Document
<! DOCTYPE html > < html > < head >
<!-- Here are the metadata -->
</ head >
< body >
<!-- Here are the visual elements -->
</ body >
</ html > Head
<!-- Define the name of webpage --> < title > Webpage name </ title > <!-- Define metadata of webpage --> < meta charset ="UTF-8" > < meta name ="author" content ="David" > <!-- Specify the base URL for resource files --> < base href ="https://www.cheatsheet.com/" target ="_blank" > <!-- Link external file to webpage --> < link rel ="icon" href ="favicon.ico" > Webpage Layout
<!-- Intro content --> < header > </ header > <!-- Navigation Bar --> < nav > </ nav > <!-- Main Body --> < main > </ main > <!-- Section inside main body --> < section > </ section > <!-- Left/Right side content --> < aside > </ aside > <!-- End of page --> < footer > </ footer > 
Content Formating
< br > <!-- Empty line --> < hr > <!-- Horizonal line --> < 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
寿司
Italic
Underscore
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!!!
inserted 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
variable
Red
C:\user> Hello World
Term to be defined
Ctrl + C
variable
printf("Hello World");
HTMLRed
C:\user> Hello World
Ctrl + C
Text - Key Information
<!-- Bi-direction overwrite --> < bdo dir ="rtl" > This text start from right to left </ bdo > This text start from right to left
<!-- Bi-direction isolation --> < p > Isolate the arabic(R->L) < bdi > العربية</ bdi > from English(L->R) text. </ p > Isolate the arabic(R->L) العربية from English(L->R) text.
<!-- Word break --> < p > LineBreakOccurAtWBR_Tag< wbr > IfLongWordIsOverflowed </ p > LineBreakOccurAtWBR_Tag
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 > List & Table Tag
List - Ordered 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
<!-- 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
<!-- 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 >
<!-- For Styling Columns -->
< calgroup >
< col style ="background-color:Sienna" >
< col style ="background-color:SteelBlue" >
< col style ="background-color:SteelBlue" >
</ calgroup >
<!-- Visible Table -->
< 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 > | 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: -->
< input type ="number" id ="i" >
<!-- Output: -->
< 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
<!-- Alternate image base on screen size --> < picture > < source media ="(max-width:700px)" srcset ="img_s.jpg" >
< source media ="(max-width:1000px)" srcset ="img_m.jpg" >
<!-- Image (can be used alone) -->
< img src ="img.jpg" >
</ picture > 
Video
<!-- Browser pick the first supported format --> < video controls > < source src ="meme.mp4" type ="video/mp4" >
< source src ="meme.webm" type ="video/webm" >
<!-- Subtitles -->
< track src ="subtitle.vtt" kind ="subtitles" >
</ video > Audio
<!-- Browser pick the first supported format --> < audio controls > < source src ="audio.mp3" type ="audio/mp3" >
< source src ="audio.wav" type ="audio/wav" >
</ audio > 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" > <!-- Create a clickable area in image --> < 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
<!-- Add/Remove "open" to toggle the dialog --> < 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 CSS file --> < link rel ="stylesheet" href ="style.css" > <!-- Add CSS file --> < style > h1 { color:red; }
</ style > Javascript Support
<!-- Add Javascript file --> < script src ="code.js" > </ script > <!-- Add Javascript code --> < script > console.log("Hello World!")
</ script > < noscript > Alternative text if javascript is not supported </ noscript > XML Support - MathML
<!-- All MathML XML tag is allowed --> < math > < mi > y</ mi > < mi > =</ mi > < mi > 2</ mi > < mi > x</ mi >
</ math > XML Support - SVG
<!-- All SVG XML tag is allowed --> < 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 meta
charset content http-equiv 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"