Html5 Cheat Sheet 2018
Html 5 Sheet

HTML5 The Mega Cheat Sheet

Html5 Cheat Sheet 2019 brings support for APIs. APIs are used when connecting to external sites and services or creating web applications from scratch. Developers can use the new HTML 5 API tools to build exciting content, such as personalized video players and interactive games.

Having a proper cheat sheet will make your life a ton of easier.

Html5 Cheat Sheet 2019 –

Below is a full list of all the HTML5 tags / elements and a description of what they are used for.

New HTML5 Tags-

<article> : Self-contained composition that is independently distributable.

<aside> : Section of page that consists of content tangentially related to content around it.

<audio> : Sound content.

<bdi> : Span of text to be isolated from surroundings for bidirectional formatting puposes.

<canvas> : Area that can be used to draw graphics via JavaScript.

<command> : User invokable command.

<datalist> : dropdown list.

<datatemplate> : data template.

<details> : details of an element.

<dialog> : specifies that part of an application is interactive.

<embed> : embedded content.

<figcaption> : caption of figure element.

<figure> : group of media content.

<footer>: footer for section or page.

<header> : header for section or page.

<hgroup> : group of headings for section.

<keygen> : generated key in a form.

<main> : specifies the main content area of an HTML document

 <menuitem> : specifies a command that a user can invoke from a popup menu.

<mark> : marked text

<meter> : measurement in defined range

<nav> : navigation links

<output> : represents results of calculation

<progress> : progress of any kind of task

<rb> : marks the base text component of a ruby annotation

<rp> : parenthesized ruby text

<rt> : ruby text

<rtc> : marks a ruby text container for ruby text components in a ruby annotation

<ruby> : ruby annotations

<section> : section in a document

<source> : media resources

<summary> : header of a detail element

<template> : declares HTML fragments that can be cloned and inserted in the document by script

<time> : date/time

<track> : specifies a text track for media such as video and audio

<video> : video

<wbr> : possible line break

Html5 Cheat Sheet 2019 – Old Unsupported Tags

<acronym> : acronym

<applet> : applet

<basefont> : base font

<bgsound> : background sound

<big> : big text

<center> : centered text

<fn> : footnotes

<font> : text font, size, and color

<frame> : sub window

<frameset> : set of frames

<isindex> : provides searchable index related to current document

<dir> : directory list

<noembed> : no embed section

<noframes> : no frame section

<s> : strikethrough text

<tt> : teletype text

<u> : underlined text

<xmp> : preformatted text

Existing HTML 5 Tags-

<!–…–> : comment

<!doctype> : document type

<a> : hyperlink

<abbr> : abbreviation

<address> : address element

<area> : Image map area

<b> : bold text

<base> : base URL for all links in page relative to document root

<bdo> : text direction

<blockquote> : long quotation

<body> : body element

<br> : single line break

<button> : push button

<caption> : table caption

<cite> : citation

<code> : code text

<col> : attributes for columns

<colgroup> : groups of columns

<dd> : definition of description

<del> : deleted text

<div> : generic block-level element

<dfn> : defining instance of a term

<dl> : definition list

<dt> : definition term

<em> : emphasized text

<fieldset> : logically  group items in a form

<form> : defines a form

<h1> to <h6> : header 1 to header 6

<head> : document information

<hr> : horizontal rule

<html> : html document

<i> : italic text

<iframe> : inline sub window

<img> : image

<input> : input field

<ins> : inserted text

<kbd> : keyboard text

<label> : label for a form control

<legend> : title in a fieldset

<li> : list item

<link> : resource reference

<map> : image map

<menu> : menu list

<meta> : meta information

<noscript> : no script section

<object> : embedded object

<ol> : ordered list

<optgroup> : option group

<option> : option in a drop-down list

<p> : paragraph

<param> : parameter for an object

<pre> : preformatted object

<q> : short quotation

<samp> : sample computer code

<script> : script

<select> : selectable list

<small> : small text

<span> : inline generic container

<strong> : strong text

<style> : style definition

<sub> : subscripted text

<sup> : superscripted text

<table> : table

<tbody> : table body

<td> : table cell

<textarea> : text area

<tfoot> : table footer

<th> : table header

<thead> : wraps row containing table headers

<title> : document title

<tr> : table row

<ul> : unordered list

<var> : variable

Existing Attributes in HTML 4 & 5

A list of existing attributes that are support in both HTML 4 & HTML 5

onabort – abort event

onbeforeunload – before unload event

onclick – mouse clicked event

ondblclick – mouse double-clicked event

ongesturechange – gesture change event

ongestureend – end of gesture event

ongesturestart – start of gesture event

onkeydown – key pressed down event

onkeypress – key pressed event

onkeyup – key released event

onmousedown – mouse button pressed down event

onmousemove – mouse moved event

onmouseout – mouse cursor excited event

onmouseover – mouse cursor entered event

onmouseup – mouse button released event

onmove – move event

onorientationchange – device orientation changed event

onpaste – paste event

onresize – resize event

ontouchcancel – touch canceled event

ontouchend – touch ended event

ontouchmove – touch move event

ontouchstart – touch started event

Html5 Cheat Sheet 2019 – HTML 5 Browser Support

Below is a table showing the individual browser support specifications for each of the major web browsers in both desktop and mobile. We have given an overall percentage score on each browser, based on scores gathered by html5test.com

Fully supported (F)

Partially Supported (P)

Not supported (N)

Desktop  11.0 internet explorer 38.0 firefox 43.0 chrome 8.0 apple_safari 15.0 Opera
Detail & Summary Elements P F F P P
WebGL-3D Canvas Graphics F F F F F
Inline SVG in HTML5 F F F F F
Data list Element P F F N F
Progress &Meter P F F F F
Class List (DOM Token List) F F F F F
Ruby Annotation P P P P P
Form Validation F F F F F
Session History Management F F F F F
HTML5 Form Features P P F P F
Drag & Drop F P F F F

 

 

Mobile

2.3 Android

8.0 apple_safari 29.0 Opera 35.0 firefox 43.0 chrome 43.0 windows
Detail & Summary Elements P P N P F F
WebGL-3D Canvas Graphics N F F F F F
Inline SVG in HTML5 F F F F F F
Data list Element F F F F F F
Progress &Meter F P F F F P
Class List (DOM Token List) F F F F F N
Ruby Annotation P P P F P P
Form Validation F F F F F F
Session History Management F F F F F F
HTML5 Form Features F P F F F P
Drag & Drop F N N N N N

 

Desktop 11.0 internet explorer 38.0 firefox 43.0 chrome
8.0 apple_safari 29.0 Opera
Content Editable Attribute F F F F F
Text API for Canvas P F F F F
Audio Element F F F F F
Video Element F F F F F
Data & Data (Attributes) P P F P P
New Semantic Elements F F F F F
Canvas (Basic Support) F F F F F
Hashchange Event N F F F F
Offline Web Apps N F F F F
Get Elements by Class Name N F F F F
  61% 83% 95% 71% 94%

 

Mobile 5.0 Android 6.0 apple_safari 12.0 Opera 35.0 firefox 43.0 chrome 8.1 windows
Content Editable Attribute F P F F F N
Text API for Canvas F F F N P N
Audio Element F F N N N N
Video Element F F N N N N
Data & Data (Attributes) F F P N F N
New Semantic Elements P P P P P P
Canvas (Basic Support) F F P F F N
Hashchange Event F F F F F N
Offline Web Apps F F N F F N
Get Elements by Class Name F F F F F N
81% 73% 88% 82% 89% 62%

 

Overall Support of HTML5 on Desktop Browsers

 internet explorer 61%
 firefox 83%
 chrome 95%
 apple_safari 71%
 Opera 94%

 

Overall Support of HTML5 on Mobile Browsers

 Android 81%
 apple_safari 73%
 Opera 88%
 firefox 82%
 chrome 89%
 windows 62%

 

Event Handler Content Attributes-

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

Below are event handler attributes that can be added to HTML elements to define event actions.

onbeforeonload – before onload event

oncanplay – media can start play

oncanplaythrough – media can be played to end

oncontextmenu – context menu is triggered

ondrag – element is dragged

ondragend – at the end of drag operation

ondragenter – element dragged on drop target

ondragleave – element dragged on drop target

ondragleave – element leaves valid drop target

ondragover – element is dragged over drop target

ondragstart – at the start of drag operation

ondrop – dragged element is being dropped

ondurationchange – length of media is changed

onemptied – media resource element becomes empty

onended – media has reached end

onerror – error occurs

onformchange – form changes

onforminput – form gets user input

onhaschange – document has changed

oninput – message is triggered

oninvalid – element gets user input

onloadeddata – media data is loaded

onloadedmetadata – duration of media element is loaded

onloadstart – browser starts to load media data

onmessage – element is invalid

onmousewheel – mouse wheel is being rotated

onpause – media data is paused

onplay – media data is going to start playing

onplaying – media data has started playing

onprogress – browser is fetching media data

onratechange – media data’s playing rate has changed

onscroll – element’s scrollbar is being scrolled

onseeked – element’s seeking attribute is not true

onseeking – element’s seeking attribute is true

onstalled – there is error in fetching media data

ontimeupdate – media changes its playing position

onvolumechange – media changes volume, also when mute

onwaiting – media has stopped playing

HTML 5 Canvas-

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Element-

Attributes
Name Type Default
Width Unsigned Long 300
Height Unsigned Long 150

 

Methods
Return Name
String toDataURL ([Optional] string type, [Variadic] any args)
Object getContext9 string contextid

 

Canvas Element

Attributes-
Name Type Default
globalAlpha float 1
globalCompositeOperation string Source-over

 

Supports any of the following values:-
  • Source-over
  • Source-in
  • Source-atop
  • Source-out
  • Destination-out
  • Destination-atop
  • Lighter
  • XOR
  • Copy
  • Darker

2D Context-

Attributes
Name Type
Canvas HTMLCanvasObject [readonly]

 

Methods-
Return Name
Void save()
Void restore()

 

Transformation

Methods-
Return Name
Void scale (float x, float y)
Void rotate (float x, float y)
Void transform (float m11, float m12, float m21, float m22, float dx, float dy)
Void transform (float m11, float m12, float m21, float m22, float dx, float dy)

 

Image Drawing

Methods-
Return Name
Void drawImage (Object image float dx, float dy, [optional] float dw, float dh)

 

Argument “image” can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement

Void drawImage (float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)

 

Html5 Cheat Sheet 2019 – Colors, Styles and Shadows

Attributes-
Name Type Default
strokeStyle any black
fillStyle any black
shadowOffsetX float 0.0
shadowOffsetX float 0.0
shadowBlur float 0.0
shadowColor string transparent black

 

Methods-
Return Name
CanvasGradient createLinearGradient (float x0, float y0, float r0, float x1, float y1, float r1)
CanvasPattern createPattern (Object image, string repetition)

 

Argument “image” can be of type HTMLImageElement “repetition” supports any of the following values: [repeat (default), repeat-x, repeat-y, no-repeat]

Canvasgradient Interface-

Return Name
Void addColorStop (float offset, string color)

 

Line Styles

Attributes-
Name Type Default
LineWidth float 1
lineCap string Butt

 

Supports any of the following values:-
  • Butt (lineJoin)
  • Rounded (String)
  • Square (miter)
  • Supports any of the following values:-
  • Round (miterLimit)
  • Bevel (float)
  • Miter (10)

Paths

Methods-
Return Name
Void beginPath()
Void closePath()
Void fill()
Void stroke()
Void clip()
Void moveTo (float x, float y)
Void lineTo (float x, float y)
Void quadraticCurveTo (float cpx, float cpy, floatx, float y)
Void bezierCurveTo (float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
Void arcTo (float x1, float y1, float x2, float y2, float radius)
Void arc (float x1, float y1, float radius)

float startAngle, float endAngle, Boolean anticlockwise)

Void rect (float x, float w, float h)

isPointInPath (float x, float y)

 

Text

Attributes
Name Type Default
font String 10px sans-serif
textAlign String Start

 

Supports any of the following values:-

{start, end, left, right, center}

textBaseline String alphabetic

 

Supports any of the following values:-

{top, hanging, middle, alphabetic, ideographic, bottom}

Methods
Return Name
Void fillText( string text, float x, float y, [Optional] float maxWidth)
Void Stroke text (string text, float x, float y, [Optional] float maxWidth)
TextMetrics Measure Text (string text)

 

TextMetrics interface

Width Float [readonly]

 

Rectangles

Methods
Return Name
Void clearRect (float x, float y, float w, float h)
Void fillRect (float x, float y, float w, float h)
Void strokeRect (float x, float y, float w, float h)

 

Pixel Manipulation

Methods
Return Name
ImageData createImageData (float sw, float sh)
ImageData createImageData (imageData imagedata)
ImageData

void

getImageData (ImageData imagedata, float dx, float dy, [Optional] float dirtyX, float dirty, float dirtyWidth, float dirtyHeight)

 

ImageData interface
Width Unsigned long [readonly]
Height Unsigned long [readonly]
Data CanvasPixelArray [readonly]

 

 Comment if you think I missed any tag. Thanks

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.