Scribd
Upload
62 views

HTML 5

This document defines HTML tags and their descriptions, organized into sections on basic tags, formatting tags, forms and input, frames, images, audio/video, links, lists, tables, styles and semantics, meta info, and programming. It provides the names and purposes of over 100 common HTML tags.

Uploaded by

The Developer
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

HTML 5

This document defines HTML tags and their descriptions, organized into sections on basic tags, formatting tags, forms and input, frames, images, audio/video, links, lists, tables, styles and semantics, meta info, and programming. It provides the names and purposes of over 100 common HTML tags.

Uploaded by

The Developer
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 77

Basic HTML

Tag Description

<!DOCTYPE>  Defines the document type

<html> Defines an HTML document

<head> Contains metadata/information for the


document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

Defines a comment
Formatting
<!--...-->

Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym
<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a


document/article

<b> Defines bold text

<bdi> Isolates a part of text that might be formatted in a different direction


from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document

<dfn> Specifies a term that is going to be defined within the content

<em> Defines emphasized text 

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<mark> Defines marked/highlighted text

<meter> Defines a scalar measurement within a known range (a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby


annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian


typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text
<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<template> Defines a container for content that should be hidden when the page
loads

<time> Defines a specific time (or datetime)

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled differently from
normal text

<var> Defines a variable

<wbr> Defines a possible line-break

Forms and Input


Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control


<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Frames
Tag Description

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames
<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support
frames

<iframe> Defines an inline frame

Images
Tag Description

<img> Defines an image

<map> Defines a client-side image map

<area> Defines an area inside an image map

<canvas> Used to draw graphics, on the fly, via scripting (usually


JavaScript)

<figcaption Defines a caption for a <figure> element


>

<figure> Specifies self-contained content

<picture> Defines a container for multiple image resources

<svg> Defines a container for SVG graphics

Audio / Video
Tag Description
<audio> Defines sound content

<source> Defines multiple media resources for media elements


(<video>, <audio> and <picture>)

<track> Defines text tracks for media elements (<video> and


<audio>)

<video> Defines a video or movie

Links
Tag Description

<a> Defines a hyperlink

<link> Defines the relationship between a document and an external


resource (most used to link to style sheets)

<nav> Defines navigation links

Lists
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item


<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description


list

Tables
Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table


<col> Specifies column properties for each column within a
<colgroup> element

<colgroup> Specifies a group of one or more columns in a table for


formatting

Styles and Semantics


Tag Description

<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

<header> Defines a header for a document or section

<footer> Defines a footer for a document or section

<main> Specifies the main content of a document

<section> Defines a section in a document

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or


hide
<dialog> Defines a dialog box or window

<summary> Defines a visible heading for a <details> element

<data> Adds a machine-readable translation of a given content

Meta Info
Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document

<base> Specifies the base URL/target for all relative URLs in a


document

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a
document

Programming
Tag Description

<script> Defines a client-side script

<noscript> Defines an alternate content for users that do not support


client-side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.


Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object

HTML Attribute Reference


The table below lists all HTML attributes and what elements they can be used
within:

Attribute Belongs to

accept <input>

accept-charset <form>

accesskey Global Attributes

action <form>
align Not supported in HTML 5.

alt <area>, <img>, <input>

async <script>

autocomplete <form>, <input>

autofocus <button>, <input>, <select>, <textarea>

autoplay <audio>, <video>

bgcolor Not supported in HTML 5.

border Not supported in HTML 5.


charset <meta>, <script>

checked <input>

cite <blockquote>, <del>, <ins>, <q>

class Global Attributes

color Not supported in HTML 5.

cols <textarea>

colspan <td>, <th>

content <meta>
contenteditable Global Attributes

controls <audio>, <video>

coords <area>

data <object>

data-* Global Attributes

datetime <del>, <ins>, <time>

default <track>

defer <script>
dir Global Attributes

dirname <input>, <textarea>

disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>

download <a>, <area>

draggable Global Attributes

enctype <form>

for <label>, <output>
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>

formaction <button>, <input>

headers <td>, <th>

height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

hidden Global Attributes

high <meter>

href <a>, <area>, <base>, <link>

hreflang <a>, <area>, <link>

http-equiv <meta>
id Global Attributes

ismap <img>

kind <track>

label <track>, <option>, <optgroup>

lang Global Attributes

list <input>

loop <audio>, <video>

low <meter>

max <input>, <meter>, <progress>

maxlength <input>, <textarea>
media <a>, <area>, <link>, <source>, <style>

method <form>

min <input>, <meter>

multiple <input>, <select>

muted <video>, <audio>

name <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, 
<textarea>

novalidate <form>

onabort <audio>, <embed>, <img>, <object>, <video>

onafterprint <body>
onbeforeprint <body>

onbeforeunload <body>

onblur All visible elements.

oncanplay <audio>, <embed>, <object>, <video>

oncanplaythroug <audio>, <video>
h

onchange All visible elements.

onclick All visible elements.

oncontextmenu All visible elements.

oncopy All visible elements.


oncuechange <track>

oncut All visible elements.

ondblclick All visible elements.

ondrag All visible elements.

ondragend All visible elements.

ondragenter All visible elements.

ondragleave All visible elements.

ondragover All visible elements.

ondragstart All visible elements.


ondrop All visible elements.

ondurationchang <audio>, <video>
e

onemptied <audio>, <video>

onended <audio>, <video>

onerror <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>

onfocus All visible elements.

onhashchange <body>

oninput All visible elements.


oninvalid All visible elements.

onkeydown All visible elements.

onkeypress All visible elements.

onkeyup All visible elements.

onload <body>, <iframe>, <img>, <input>, <link>, <script>, <style>

onloadeddata <audio>, <video>

onloadedmetada <audio>, <video>
ta

onloadstart <audio>, <video>

onmousedown All visible elements.


onmousemove All visible elements.

onmouseout All visible elements.

onmouseover All visible elements.

onmouseup All visible elements.

onmousewheel All visible elements.

onoffline <body>

ononline <body>

onpagehide <body>

onpageshow <body>
onpaste All visible elements.

onpause <audio>, <video>

onplay <audio>, <video>

onplaying <audio>, <video>

onpopstate <body>

onprogress <audio>, <video>

onratechange <audio>, <video>

onreset <form>

onresize <body>
onscroll All visible elements.

onsearch <input>

onseeked <audio>, <video>

onseeking <audio>, <video>

onselect All visible elements.

onstalled <audio>, <video>

onstorage <body>
onsubmit <form>

onsuspend <audio>, <video>

ontimeupdate <audio>, <video>

ontoggle <details>

onunload <body>

onvolumechange <audio>, <video>

onwaiting <audio>, <video>
onwheel All visible elements.

open <details>

optimum <meter>

pattern <input>

placeholder <input>, <textarea>

poster <video>

preload <audio>, <video>

readonly <input>, <textarea>
rel <a>, <area>, <form>, <link>

required <input>, <select>, <textarea>

reversed <ol>

rows <textarea>

rowspan <td>, <th>

sandbox <iframe>

scope <th>

selected <option>

shape <area>
size <input>, <select>

sizes <img>, <link>, <source>

span <col>, <colgroup>

spellcheck Global Attributes

src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>

srcdoc <iframe>

srclang <track>

srcset <img>, <source>

start <ol>
step <input>

style Global Attributes

tabindex Global Attributes

target <a>, <area>, <base>, <form>

title Global Attributes

translate Global Attributes

type <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>

usemap <img>, <object>

value <button>, <input>, <li>, <option>, <meter>, <progress>, <param>
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

wrap <textarea>

HTML Global Attributes


The global attributes are attributes that can be used with all HTML elements.

Attribute Description

accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classnames for an element (refers


to a class in a style sheet)

contenteditabl Specifies whether the content of an element is editable


e or not

data-* Used to store custom data private to the page or


application

dir Specifies the text direction for the content in an element

draggable Specifies whether an element is draggable or not

hidden Specifies that an element is not yet, or is no longer,


relevant

id Specifies a unique id for an element


lang Specifies the language of the element's content

spellcheck Specifies whether the element is to have its spelling and


grammar checked or not

style Specifies an inline CSS style for an element

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element should be


translated or not

Global Event Attributes


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

To learn more about programming events, please visit our JavaScript tutorial.

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

Window Event Attributes


Events triggered for the window object (applies to the <body> tag):

Attribute Value Description

onafterprint scrip Script to be run after the document is printed


t

onbeforeprint scrip Script to be run before the document is printed


t

onbeforeunload scrip Script to be run when the document is about to


t be unloaded

onerror scrip Script to be run when an error occurs


t

onhashchange scrip Script to be run when there has been changes to


t the anchor part of the a URL

onload scrip Fires after the page is finished loading


t

onmessage scrip Script to be run when the message is triggered


t

onoffline scrip Script to be run when the browser starts to work


t offline

ononline scrip Script to be run when the browser starts to work


t online

onpagehide scrip Script to be run when a user navigates away


t from a page

onpageshow scrip Script to be run when a user navigates to a page


t

onpopstate scrip Script to be run when the window's history


t changes
onresize scrip Fires when the browser window is resized
t

onstorage scrip Script to be run when a Web Storage area is


t updated

onunload scrip Fires once a page has unloaded (or the browser
t window has been closed)

Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML
elements, but is most used in form elements):

Attribute Value Description

onblur scrip Fires the moment that the element loses focus
t

onchange scrip Fires the moment when the value of the element
t is changed

oncontextmen scrip Script to be run when a context menu is


u t triggered

onfocus scrip Fires the moment when the element gets focus
t

oninput scrip Script to be run when an element gets user input


t

oninvalid scrip Script to be run when an element is invalid


t
onreset scrip Fires when the Reset button in a form is clicked
t

onsearch scrip Fires when the user writes something in a search


t field (for <input="search">)

onselect scrip Fires after some text has been selected in an


t element

onsubmit scrip Fires when a form is submitted


t

Keyboard Events
Attribute Value Description

onkeydown script Fires when a user is pressing a key

onkeypress script Fires when a user presses a key

onkeyup script Fires when a user releases a key

Mouse Events
Attribute Value Description

onclick scrip Fires on a mouse click on the element


t
ondblclick scrip Fires on a mouse double-click on the element
t

onmousedown scrip Fires when a mouse button is pressed down on an


t element

onmousemove scrip Fires when the mouse pointer is moving while it is


t over an element

onmouseout scrip Fires when the mouse pointer moves out of an


t element

onmouseover scrip Fires when the mouse pointer moves over an


t element

onmouseup scrip Fires when a mouse button is released over an


t element

onmousewheel scrip Deprecated. Use the onwheel attribute instead


t

onwheel scrip Fires when the mouse wheel rolls up or down


t over an element

Drag Events
Attribute Value Description

ondrag scrip Script to be run when an element is dragged


t
ondragend scrip Script to be run at the end of a drag operation
t

ondragenter scrip Script to be run when an element has been dragged


t to a valid drop target

ondragleave scrip Script to be run when an element leaves a valid drop


t target

ondragover scrip Script to be run when an element is being dragged


t over a valid drop target

ondragstart scrip Script to be run at the start of a drag operation


t

ondrop scrip Script to be run when dragged element is being


t dropped

onscroll scrip Script to be run when an element's scrollbar is being


t scrolled

Clipboard Events
Attribute Value Description

oncopy scrip Fires when the user copies the content of an element
t

oncut scrip Fires when the user cuts the content of an element
t

onpaste scrip Fires when the user pastes some content in an element
t

Media Events
Events triggered by medias like videos, images and audio (applies to all HTML
elements, but is most common in media elements, like <audio>, <embed>,
<img>, <object>, and <video>).

Tip: Look at our HTML Audio and Video DOM Reference for more information.

Attribute Value Description

onabort scrip Script to be run on abort


t

oncanplay scrip Script to be run when a file is ready to start


t playing (when it has buffered enough to
begin)

oncanplaythrough scrip Script to be run when a file can be played all


t the way to the end without pausing for
buffering

oncuechange scrip Script to be run when the cue changes in a


t <track> element

ondurationchange scrip Script to be run when the length of the media


t changes

onemptied scrip Script to be run when something bad


t happens and the file is suddenly unavailable
(like unexpectedly disconnects)
onended scrip Script to be run when the media has reach
t the end (a useful event for messages like
"thanks for listening")

onerror scrip Script to be run when an error occurs when


t the file is being loaded

onloadeddata scrip Script to be run when media data is loaded


t

onloadedmetadat scrip Script to be run when meta data (like


a t dimensions and duration) are loaded

onloadstart scrip Script to be run just as the file begins to load


t before anything is actually loaded

onpause scrip Script to be run when the media is paused


t either by the user or programmatically

onplay scrip Script to be run when the media is ready to


t start playing

onplaying scrip Script to be run when the media actually has


t started playing

onprogress scrip Script to be run when the browser is in the


t process of getting the media data

onratechange scrip Script to be run each time the playback rate


t changes (like when a user switches to a slow
motion or fast forward mode)

onseeked scrip Script to be run when the seeking attribute is


t set to false indicating that seeking has ended
onseeking scrip Script to be run when the seeking attribute is
t set to true indicating that seeking is active

onstalled scrip Script to be run when the browser is unable


t to fetch the media data for whatever reason

onsuspend scrip Script to be run when fetching the media data


t is stopped before it is completely loaded for
whatever reason

ontimeupdate scrip Script to be run when the playing position has


t changed (like when the user fast forwards to
a different point in the media)

onvolumechange scrip Script to be run each time the volume is


t changed which (includes setting the volume
to "mute")

onwaiting scrip Script to be run when the media has paused


t but is expected to resume (like when the
media pauses to buffer more data)

Misc Events
Attribute Value Description

ontoggle scrip Fires when the user opens or closes the <details>
t element
Color Names Supported by All Browsers
All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with
different text colors):

For a full overview of HTML colors, visit our colors tutorial.

AliceBlue
#F0F8FF
Color Mixer
Color Picker

AntiqueWhite
#FAEBD7
Color Mixer
Color Picker

Aqua
#00FFFF
Color Mixer
Color Picker

Aquamarine
#7FFFD4
Color Mixer
Color Picker

Azure
#F0FFFF
Color Mixer
Color Picker

Beige
#F5F5DC
Color Mixer
Color Picker

Bisque
#FFE4C4
Color Mixer
Color Picker

Black
#000000
Color Mixer
Color Picker

BlanchedAlmond
#FFEBCD
Color Mixer
Color Picker

Blue
#0000FF
Color Mixer
Color Picker

BlueViolet
#8A2BE2
Color Mixer
Color Picker

Brown
#A52A2A
Color Mixer
Color Picker

BurlyWood
#DEB887
Color Mixer
Color Picker

CadetBlue
#5F9EA0
Color Mixer
Color Picker
Chartreuse
#7FFF00
Color Mixer
Color Picker

Chocolate
#D2691E
Color Mixer
Color Picker

Coral
#FF7F50
Color Mixer
Color Picker

CornflowerBlue
#6495ED
Color Mixer
Color Picker

Cornsilk
#FFF8DC
Color Mixer
Color Picker

Crimson
#DC143C
Color Mixer
Color Picker

Cyan
#00FFFF
Color Mixer
Color Picker

DarkBlue
#00008B
Color Mixer
Color Picker

DarkCyan
#008B8B
Color Mixer
Color Picker

DarkGoldenRod
#B8860B
Color Mixer
Color Picker

DarkGray
#A9A9A9
Color Mixer
Color Picker

DarkGrey
#A9A9A9
Color Mixer
Color Picker

DarkGreen
#006400
Color Mixer
Color Picker

DarkKhaki
#BDB76B
Color Mixer
Color Picker

DarkMagenta
#8B008B
Color Mixer
Color Picker

DarkOliveGreen
#556B2F
Color Mixer
Color Picker

DarkOrange
#FF8C00
Color Mixer
Color Picker

DarkOrchid
#9932CC
Color Mixer
Color Picker

DarkRed
#8B0000
Color Mixer
Color Picker

DarkSalmon
#E9967A
Color Mixer
Color Picker

DarkSeaGreen
#8FBC8F
Color Mixer
Color Picker

DarkSlateBlue
#483D8B
Color Mixer
Color Picker

DarkSlateGray
#2F4F4F
Color Mixer
Color Picker

DarkSlateGrey
#2F4F4F
Color Mixer
Color Picker

DarkTurquoise
#00CED1
Color Mixer
Color Picker

DarkViolet
#9400D3
Color Mixer
Color Picker

DeepPink
#FF1493
Color Mixer
Color Picker

DeepSkyBlue
#00BFFF
Color Mixer
Color Picker

DimGray
#696969
Color Mixer
Color Picker

DimGrey
#696969
Color Mixer
Color Picker

DodgerBlue
#1E90FF
Color Mixer
Color Picker
FireBrick
#B22222
Color Mixer
Color Picker

FloralWhite
#FFFAF0
Color Mixer
Color Picker

ForestGreen
#228B22
Color Mixer
Color Picker

Fuchsia
#FF00FF
Color Mixer
Color Picker

Gainsboro
#DCDCDC
Color Mixer
Color Picker

GhostWhite
#F8F8FF
Color Mixer
Color Picker

Gold
#FFD700
Color Mixer
Color Picker

GoldenRod
#DAA520
Color Mixer
Color Picker

Gray
#808080
Color Mixer
Color Picker

Grey
#808080
Color Mixer
Color Picker

Green
#008000
Color Mixer
Color Picker

GreenYellow
#ADFF2F
Color Mixer
Color Picker

HoneyDew
#F0FFF0
Color Mixer
Color Picker

HotPink
#FF69B4
Color Mixer
Color Picker

IndianRed
#CD5C5C
Color Mixer
Color Picker

Indigo
#4B0082
Color Mixer
Color Picker

Ivory
#FFFFF0
Color Mixer
Color Picker

Khaki
#F0E68C
Color Mixer
Color Picker

Lavender
#E6E6FA
Color Mixer
Color Picker

LavenderBlush
#FFF0F5
Color Mixer
Color Picker

LawnGreen
#7CFC00
Color Mixer
Color Picker

LemonChiffon
#FFFACD
Color Mixer
Color Picker

LightBlue
#ADD8E6
Color Mixer
Color Picker

LightCoral
#F08080
Color Mixer
Color Picker

LightCyan
#E0FFFF
Color Mixer
Color Picker

LightGoldenRodYellow
#FAFAD2
Color Mixer
Color Picker

LightGray
#D3D3D3
Color Mixer
Color Picker

LightGrey
#D3D3D3
Color Mixer
Color Picker

LightGreen
#90EE90
Color Mixer
Color Picker

LightPink
#FFB6C1
Color Mixer
Color Picker

LightSalmon
#FFA07A
Color Mixer
Color Picker
LightSeaGreen
#20B2AA
Color Mixer
Color Picker

LightSkyBlue
#87CEFA
Color Mixer
Color Picker

LightSlateGray
#778899
Color Mixer
Color Picker

LightSlateGrey
#778899
Color Mixer
Color Picker

LightSteelBlue
#B0C4DE
Color Mixer
Color Picker

LightYellow
#FFFFE0
Color Mixer
Color Picker

Lime
#00FF00
Color Mixer
Color Picker

LimeGreen
#32CD32
Color Mixer
Color Picker

Linen
#FAF0E6
Color Mixer
Color Picker

Magenta
#FF00FF
Color Mixer
Color Picker

Maroon
#800000
Color Mixer
Color Picker

MediumAquaMarine
#66CDAA
Color Mixer
Color Picker

MediumBlue
#0000CD
Color Mixer
Color Picker

MediumOrchid
#BA55D3
Color Mixer
Color Picker

MediumPurple
#9370DB
Color Mixer
Color Picker

MediumSeaGreen
#3CB371
Color Mixer
Color Picker

MediumSlateBlue
#7B68EE
Color Mixer
Color Picker

MediumSpringGreen
#00FA9A
Color Mixer
Color Picker

MediumTurquoise
#48D1CC
Color Mixer
Color Picker

MediumVioletRed
#C71585
Color Mixer
Color Picker

MidnightBlue
#191970
Color Mixer
Color Picker

MintCream
#F5FFFA
Color Mixer
Color Picker

MistyRose
#FFE4E1
Color Mixer
Color Picker

Moccasin
#FFE4B5
Color Mixer
Color Picker

NavajoWhite
#FFDEAD
Color Mixer
Color Picker

Navy
#000080
Color Mixer
Color Picker

OldLace
#FDF5E6
Color Mixer
Color Picker

Olive
#808000
Color Mixer
Color Picker

OliveDrab
#6B8E23
Color Mixer
Color Picker

Orange
#FFA500
Color Mixer
Color Picker

OrangeRed
#FF4500
Color Mixer
Color Picker
Orchid
#DA70D6
Color Mixer
Color Picker

PaleGoldenRod
#EEE8AA
Color Mixer
Color Picker

PaleGreen
#98FB98
Color Mixer
Color Picker

PaleTurquoise
#AFEEEE
Color Mixer
Color Picker

PaleVioletRed
#DB7093
Color Mixer
Color Picker

PapayaWhip
#FFEFD5
Color Mixer
Color Picker

PeachPuff
#FFDAB9
Color Mixer
Color Picker

Peru
#CD853F
Color Mixer
Color Picker

Pink
#FFC0CB
Color Mixer
Color Picker

Plum
#DDA0DD
Color Mixer
Color Picker

PowderBlue
#B0E0E6
Color Mixer
Color Picker

Purple
#800080
Color Mixer
Color Picker

RebeccaPurple
#663399
Color Mixer
Color Picker

Red
#FF0000
Color Mixer
Color Picker

RosyBrown
#BC8F8F
Color Mixer
Color Picker

RoyalBlue
#4169E1
Color Mixer
Color Picker

SaddleBrown
#8B4513
Color Mixer
Color Picker

Salmon
#FA8072
Color Mixer
Color Picker

SandyBrown
#F4A460
Color Mixer
Color Picker

SeaGreen
#2E8B57
Color Mixer
Color Picker

SeaShell
#FFF5EE
Color Mixer
Color Picker

Sienna
#A0522D
Color Mixer
Color Picker

Silver
#C0C0C0
Color Mixer
Color Picker

SkyBlue
#87CEEB
Color Mixer
Color Picker

SlateBlue
#6A5ACD
Color Mixer
Color Picker

SlateGray
#708090
Color Mixer
Color Picker

SlateGrey
#708090
Color Mixer
Color Picker

Snow
#FFFAFA
Color Mixer
Color Picker

SpringGreen
#00FF7F
Color Mixer
Color Picker

SteelBlue
#4682B4
Color Mixer
Color Picker

Tan
#D2B48C
Color Mixer
Color Picker
Teal
#008080
Color Mixer
Color Picker

Thistle
#D8BFD8
Color Mixer
Color Picker

Tomato
#FF6347
Color Mixer
Color Picker

Turquoise
#40E0D0
Color Mixer
Color Picker

Violet
#EE82EE
Color Mixer
Color Picker

Wheat
#F5DEB3
Color Mixer
Color Picker

White
#FFFFFF
Color Mixer
Color Picker

WhiteSmoke
#F5F5F5
Color Mixer
Color Picker

Yellow
#FFFF00
Color Mixer
Color Picker

YellowGreen
#9ACD32
Color Mixer
Color

HTML Canvas Reference


The HTML <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).

To learn more about <canvas>, please read our HTML Canvas tutorial.

Colors, Styles, and Shadows


Property Description

fillStyle Sets or returns the color, gradient, or pattern used to fill


the drawing

strokeStyle Sets or returns the color, gradient, or pattern used for


strokes

shadowColor Sets or returns the color to use for shadows

shadowBlur Sets or returns the blur level for shadows


shadowOffset Sets or returns the horizontal distance of the shadow
X from the shape

shadowOffsetY Sets or returns the vertical distance of the shadow from


the shape

Method Description

createLinearGradient() Creates a linear gradient (to use on canvas


content)

createPattern() Repeats a specified element in the specified


direction

createRadialGradient() Creates a radial/circular gradient (to use on


canvas content)

addColorStop() Specifies the colors and stop positions in a


gradient object

Line Styles
Property Description

lineCap Sets or returns the style of the end caps for a line

lineJoin Sets or returns the type of corner created, when two lines
meet

lineWidth Sets or returns the current line width

miterLimit Sets or returns the maximum miter length


Rectangles
Method Description

rect() Creates a rectangle

fillRect() Draws a "filled" rectangle

strokeRect( Draws a rectangle (no fill)


)

clearRect() Clears the specified pixels within a given rectangle

Paths
Method Description

fill() Fills the current drawing (path)

stroke() Actually draws the path you have defined

beginPath() Begins a path, or resets the current path

moveTo() Moves the path to the specified point in the canvas,


without creating a line

closePath() Creates a path from the current point back to the


starting point
lineTo() Adds a new point and creates a line to that point
from the last specified point in the canvas

clip() Clips a region of any shape and size from the


original canvas

quadraticCurveTo( Creates a quadratic Bézier curve


)

bezierCurveTo() Creates a cubic Bézier curve

arc() Creates an arc/curve (used to create circles, or


parts of circles)

arcTo() Creates an arc/curve between two tangents

isPointInPath() Returns true if the specified point is in the current


path, otherwise false

Transformations
Method Description

scale() Scales the current drawing bigger or smaller

rotate() Rotates the current drawing

translate() Remaps the (0,0) position on the canvas

transform() Replaces the current transformation matrix for the


drawing

setTransform() Resets the current transform to the identity matrix. Then


runs transform()
Text
Property Description

font Sets or returns the current font properties for text content

textAlign Sets or returns the current alignment for text content

textBaseline Sets or returns the current text baseline used when drawing
text

Method Description

fillText() Draws "filled" text on the canvas

strokeText() Draws text on the canvas (no fill)

measureText() Returns an object that contains the width of the specified


text

Image Drawing
Method Description

drawImage() Draws an image, canvas, or video onto the canvas

Pixel Manipulation
Propert Description
y
width Returns the width of an ImageData object

height Returns the height of an ImageData object

data Returns an object that contains image data of a specified


ImageData object

Method Description

createImageData( Creates a new, blank ImageData object


)

getImageData() Returns an ImageData object that copies the pixel


data for the specified rectangle on a canvas

putImageData() Puts the image data (from a specified ImageData


object) back onto the canvas

Compositing
Property Description

globalAlpha Sets or returns the current alpha or


transparency value of the drawing

globalCompositeOperation Sets or returns how a new image is drawn


onto an existing image

Other
Method Description
save() Saves the state of the current context

restore() Returns previously saved path state and attributes

createEvent(  
)

getContext()  

toDataURL()  

HTML Canvas Reference


The HTML <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).

To learn more about <canvas>, please read our HTML Canvas tutorial.

Colors, Styles, and Shadows

Property Description

fillStyle Sets or returns the color, gradient, or pattern used to fill


the drawing

strokeStyle Sets or returns the color, gradient, or pattern used for


strokes

shadowColor Sets or returns the color to use for shadows

shadowBlur Sets or returns the blur level for shadows


shadowOffset Sets or returns the horizontal distance of the shadow
X from the shape

shadowOffsetY Sets or returns the vertical distance of the shadow from


the shape

Method Description

createLinearGradient() Creates a linear gradient (to use on canvas


content)

createPattern() Repeats a specified element in the specified


direction

createRadialGradient() Creates a radial/circular gradient (to use on


canvas content)

addColorStop() Specifies the colors and stop positions in a


gradient object

Line Styles

Property Description

lineCap Sets or returns the style of the end caps for a line

lineJoin Sets or returns the type of corner created, when two lines
meet

lineWidth Sets or returns the current line width

miterLimit Sets or returns the maximum miter length


Rectangles

Method Description

rect() Creates a rectangle

fillRect() Draws a "filled" rectangle

strokeRect( Draws a rectangle (no fill)


)

clearRect() Clears the specified pixels within a given rectangle

Paths

Method Description

fill() Fills the current drawing (path)

stroke() Actually draws the path you have defined

beginPath() Begins a path, or resets the current path

moveTo() Moves the path to the specified point in the canvas,


without creating a line

closePath() Creates a path from the current point back to the


starting point
lineTo() Adds a new point and creates a line to that point
from the last specified point in the canvas

clip() Clips a region of any shape and size from the


original canvas

quadraticCurveTo( Creates a quadratic Bézier curve


)

bezierCurveTo() Creates a cubic Bézier curve

arc() Creates an arc/curve (used to create circles, or


parts of circles)

arcTo() Creates an arc/curve between two tangents

isPointInPath() Returns true if the specified point is in the current


path, otherwise false

Transformations

Method Description

scale() Scales the current drawing bigger or smaller

rotate() Rotates the current drawing

translate() Remaps the (0,0) position on the canvas

transform() Replaces the current transformation matrix for the


drawing
setTransform() Resets the current transform to the identity matrix. Then
runs transform()

Text

Property Description

font Sets or returns the current font properties for text content

textAlign Sets or returns the current alignment for text content

textBaseline Sets or returns the current text baseline used when drawing
text

Method Description

fillText() Draws "filled" text on the canvas

strokeText() Draws text on the canvas (no fill)

measureText() Returns an object that contains the width of the specified


text

Image Drawing

Method Description

drawImage() Draws an image, canvas, or video onto the canvas

Pixel Manipulation

Propert Description
y

width Returns the width of an ImageData object

height Returns the height of an ImageData object

data Returns an object that contains image data of a specified


ImageData object

Method Description

createImageData( Creates a new, blank ImageData object


)

getImageData() Returns an ImageData object that copies the pixel


data for the specified rectangle on a canvas

putImageData() Puts the image data (from a specified ImageData


object) back onto the canvas

Compositing

Property Description

globalAlpha Sets or returns the current alpha or


transparency value of the drawing

globalCompositeOperation Sets or returns how a new image is drawn


onto an existing image

Other

Method Description
save() Saves the state of the current context

restore() Returns previously saved path state and attributes

createEvent(  
)

getContext()  

toDataURL()  

HTML Audio and Video DOM Reference


The HTML5 DOM has methods, properties, and events for
the <audio> and <video> elements.

HTML Audio/Video Methods

Method Description

addTextTrack( Adds a new text track to the audio/video


)

canPlayType() Checks if the browser can play the specified audio/video


type

load() Re-loads the audio/video element

play() Starts playing the audio/video


pause() Pauses the currently playing audio/video

HTML Audio/Video Properties

Property Description

audioTracks Returns an AudioTrackList object representing available audio tracks

autoplay Sets or returns whether the audio/video should start playing as soon as it is
loaded

buffered Returns a TimeRanges object representing the buffered parts of the


audio/video

controller Returns the MediaController object representing the current media


controller of the audio/video

controls Sets or returns whether the audio/video should display controls (like
play/pause etc.)

crossOrigin Sets or returns the CORS settings of the audio/video

currentSrc Returns the URL of the current audio/video

currentTime Sets or returns the current playback position in the audio/video (in
seconds)

defaultMuted Sets or returns whether the audio/video should be muted by default

defaultPlaybackRat Sets or returns the default speed of the audio/video playback


e

duration Returns the length of the current audio/video (in seconds)


ended Returns whether the playback of the audio/video has ended or not

error Returns a MediaError object representing the error state of the


audio/video

loop Sets or returns whether the audio/video should start over again when
finished

mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple
audio/video elements)

muted Sets or returns whether the audio/video is muted or not

networkState Returns the current network state of the audio/video

paused Returns whether the audio/video is paused or not

playbackRate Sets or returns the speed of the audio/video playback

played Returns a TimeRanges object representing the played parts of the


audio/video

preload Sets or returns whether the audio/video should be loaded when the page
loads

readyState Returns the current ready state of the audio/video

seekable Returns a TimeRanges object representing the seekable parts of the


audio/video

seeking Returns whether the user is currently seeking in the audio/video

src Sets or returns the current source of the audio/video element


startDate Returns a Date object representing the current time offset

textTracks Returns a TextTrackList object representing the available text tracks

videoTracks Returns a VideoTrackList object representing the available video tracks

volume Sets or returns the volume of the audio/video

HTML Audio/Video Events

Event Description

abort Fires when the loading of an audio/video is aborted

canplay Fires when the browser can start playing the audio/video

canplaythrough Fires when the browser can play through the audio/video without stopping for
buffering

durationchange Fires when the duration of the audio/video is changed

emptied Fires when the current playlist is empty

ended Fires when the current playlist is ended

error Fires when an error occurred during the loading of an audio/video

loadeddata Fires when the browser has loaded the current frame of the audio/video
loadedmetadat Fires when the browser has loaded meta data for the audio/video
a

loadstart Fires when the browser starts looking for the audio/video

pause Fires when the audio/video has been paused

play Fires when the audio/video has been started or is no longer paused

playing Fires when the audio/video is playing after having been paused or stopped for
buffering

progress Fires when the browser is downloading the audio/video

ratechange Fires when the playing speed of the audio/video is changed

seeked Fires when the user is finished moving/skipping to a new position in the
audio/video

seeking Fires when the user starts moving/skipping to a new position in the
audio/video

stalled Fires when the browser is trying to get media data, but data is not available

suspend Fires when the browser is intentionally not getting media data

timeupdate Fires when the current playback position has changed

volumechange Fires when the volume has been changed

waiting Fires when the video stops because it needs to buffer the next frame

You might also like