HTML5 - Color Code Builder

You need to decorate your HTML pages using different colors. HTML5 provides a vide range of attribute which can be used to set background color, font color etc.
To use colors in your HTML5 pages you would need valid color codes. Following two tools would help you generate valid HTML5 color codes.

Java Servlet Color Picker:

Click on a color which you like and pickup equivalent color code to use in your HTML code or CSS. All the code generated by this palette will be in Hexa. This Color Palette requires JAVA enabled browser.

JQuery Color Picker:

Click on a color which you like and pickup equivalent color code to use in your HTML code or CSS. All the code generated by this palette will be in Hexa. Equivalent Color Hexa Code:

HTML5 Validation

At the time of writing this tutorial HTML5 is very much in initial stage and there are only few validtors available on the net.
But following two validators are very authentic and can be used:

(1) The W3C Markup Validator:

The W3C Markup Validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. This validator is part of Unicorn, W3C's unified validator service.
To use this validator for HTML5, you need to use More Options and select Document Type as HTML5 (experimental) as shown below.

(2) The Validator.nu (X)HTML5 Validator:

Here is the another currently known HTML5 validators: Henri's Validator.nu (X)HTML5 Validator (Highly Experimental):
This validator has compatibility problem, so you can try it in lower versions of IE or Mozilla.

HTML5 Modernizr Tutorial

Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies
There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers do not support these news features.
Modernizr provides an easy way to detect any new feature so that you can take corresponding action. For example, if a browser does not support video feature then you would like to display a simple page.
You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new featur.
You can download latest version of this utility from Modernizr Download.

Syntax:

Before you start using Modernizr, you would have to include its javascript library in your HTML page header as follows:

<script src="modernizr.min.js" type="text/javascript"></script>

As mentioned above, you can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new featur.
Following is the simple syntax to handle supported and non supported features:

/* In your CSS: */ .no-audio #music { display: none; /* Don't show Audio options */ } .audio #music button { /* Style the Play and Pause buttons nicely */ } <!-- In your HTML: --> <div id="music"> <audio> <source src="audio.ogg" /> <source src="audio.mp3" /> </audio> <button id="play">Play</button> <button id="pause">Pause</button> </div>

Here it is notable that you need to prefix "no-" to every feature/property you want to handle for the browser which does not support them.
Following is the syntax to detect a particular feature through Javascript:

if (Modernizr.audio) { /* properties for browsers that support audio */ }else{ /* properties for browsers that does not support audio */ }

To learn above concept - Do Online Practice using different browsers.

Features detected by Modernizr:

Following is the list of features which can be detected by Modernizr:

Feature	CSS Property	JavaScript Check
@font-face	.fontface	Modernizr.fontface
Canvas	.canvas	Modernizr.canvas
Canvas Text	.canvastext	Modernizr.canvastext
HTML5 Audio	.audio	Modernizr.audio
HTML5 Audio formats	NA	Modernizr.audio[format]
HTML5 Video	.video	Modernizr.video
HTML5 Video Formats	NA	Modernizr.video[format]
rgba()	.rgba	Modernizr.rgba
hsla()	.hsla	Modernizr.hsla
border-image	.borderimage	Modernizr.borderimage
border-radius	.borderradius	Modernizr.borderradius
box-shadow	.boxshadow	Modernizr.boxshadow
Multiple backgrounds	.multiplebgs	Modernizr.multiplebgs
opacity	.opacity	Modernizr.opacity
CSS Animations	.cssanimations	Modernizr.cssanimations
CSS Columns	.csscolumns	Modernizr.csscolumns
CSS Gradients	.cssgradients	Modernizr.cssgradients
CSS Reflections	.cssreflections	Modernizr.cssreflections
CSS 2D Transforms	.csstransforms	Modernizr.csstransforms
CSS 3D Transforms	.csstransforms3d	Modernizr.csstransforms3d
CSS Transitions	.csstransitions	Modernizr.csstransitions
Geolocation API	.geolocation	Modernizr.geolocation
Input Types	NA	Modernizr.inputtypes[type]
Input Attributes	NA	Modernizr.input[attribute]
localStorage	.localstorage	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
Web Workers	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
SVG Clip Paths	.svgclippaths	Modernizr.svgclippaths
SMIL	.smil	Modernizr.smil
Web SQL Database	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
Web Sockets	.websockets	Modernizr.websockets
Hashchange Event	.hashchange	Modernizr.hashchange
History Management	.historymanagement	Modernizr.historymanagement
Drag and Drop	.draganddrop	Modernizr.draganddrop
Cross-window Messaging	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest() Plugin API	NA	Modernizr.addTest(str,fn)

HTML5 - Character Encodings

A character encoding is a method of converting bytes into characters. To validate or display an HTML document, a program must choose a character encoding. HTML 5 authors have three means of setting the character encoding:

HTTP Content-Type Header:

If you are writing cgi or similar program then you would use HTTP Content-Type header to set any character encoding.
Following is the simple example:

print "Content-Type: text/html; charset=utf-8\r\n";

The <meta> element:

You can use a <meta> element with a charset attribute that specifies the encoding within the first 512 bytes of the HTML5 document.
Following is the simplified example:

<meta charset="UTF-8">

Above syntax replaces the need for <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> although that syntax is still allowed.

Unicode Byte Order Mark (BOM):

A byte order mark (BOM) consists of the character code U+FEFF at the beginning of a data stream, where it can be used as a signature defining the byte order and encoding form, primarily of unmarked plaintext files.
Many Windows programs (including Windows Notepad) add the bytes 0xEF, 0xBB, 0xBF at the start of any document saved as UTF-8. This is the UTF-8 encoding of the Unicode byte order mark (BOM), and is commonly referred to as a UTF-8 BOM even though it is not relevant to byte order.
For HTML5 document, you can use a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used.

HTML5 - Entities Reference

Characters Entities in HTML5

Some characters are reserved in HTML5. For example, you cannot use the greater than and less than signs or angle brackets within your text because the browser could mistake them for markup.
HTML5 processors must support the five special characters listed in the table that follows.

Symbol	Description	Entity Name	Number Code
"	quotation mark	"	"
'	apostrophe	'	'
&	ampersand	&	&
<	less-than	&lt;	&#60;
>	greater-than	&gt;	&#62;

To write an element and attribute into your page so that the code is shown to the user rather than being processed by the browser (for example as <div id="character">) you would write:

&div id="character">

There is also a long list of special characters that HTML5 aware processors should support. In order for these to appear in your document, you can use either the numerical code or the entity name. For example, to insert a copyright symbol you could use either of the following:

© 2007 or © 2007

ISO 8859-1 Character set is the most widly used character set. A complete reference of ISO 885901 character set is gievn below.

ISO 8859-1 Symbol Entities

Result	Description	Entity Name	Number Code
	non-breaking space	 	 
¡	inverted exclamation mark	¡	¡
¤	currency	¤	¤
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
¦	broken vertical bar	¦	¦
§	section	§	§
¨	spacing diaeresis	¨	¨
©	copyright	©	©
ª	feminine ordinal indicator	ª	ª
«	angle quotation mark (left)	«	«
¬	negation	¬	¬
­	soft hyphen	­	­
®	registered trademark	®	®
™	trademark	™	™
¯	spacing macron	¯	¯
°	degree	°	°
±	plus-or-minus	±	±
²	superscript 2	²	²
³	superscript 3	³	³
´	spacing acute	´	´
µ	micro	µ	µ
¶	paragraph	¶	¶
·	middle dot	·	·
¸	spacing cedilla	¸	¸
¹	superscript 1	¹	¹
º	masculine ordinal indicator	º	º
»	angle quotation mark (right)	»	»
¼	fraction 1/4	¼	¼
½	fraction 1/2	½	½
¾	fraction 3/4	¾	¾
¿	inverted question mark	¿	¿
×	multiplication	×	×
÷	division	÷	÷

ISO 8859-1 Character Entities

Result	Description	Entity Name	Number Code
À	capital a, grave accent	À	À
Á	capital a, acute accent	Á	Á
Â	capital a, circumflex accent	Â	Â
Ã	capital a, tilde	Ã	Ã
Ä	capital a, umlaut mark	Ä	Ä
Å	capital a, ring	Å	Å
Æ	capital ae	Æ	Æ
Ç	capital c, cedilla	Ç	Ç
È	capital e, grave accent	È	È
É	capital e, acute accent	É	É
Ê	capital e, circumflex accent	Ê	Ê
Ë	capital e, umlaut mark	Ë	Ë
Ì	capital i, grave accent	Ì	Ì
Í	capital i, acute accent	Í	Í
Î	capital i, circumflex accent	Î	Î
Ï	capital i, umlaut mark	Ï	Ï
Ð	capital eth, Icelandic	Ð	Ð
Ñ	capital n, tilde	Ñ	Ñ
Ò	capital o, grave accent	Ò	Ò
Ó	capital o, acute accent	Ó	Ó
Ô	capital o, circumflex accent	Ô	Ô
Õ	capital o, tilde	Õ	Õ
Ö	capital o, umlaut mark	Ö	Ö
Ø	capital o, slash	Ø	Ø
Ù	capital u, grave accent	Ù	Ù
Ú	capital u, acute accent	Ú	Ú
Û	capital u, circumflex accent	Û	Û
Ü	capital u, umlaut mark	Ü	Ü
Ý	capital y, acute accent	Ý	Ý
Þ	capital THORN, Icelandic	Þ	Þ
ß	small sharp s, German	ß	ß
à	small a, grave accent	à	à
á	small a, acute accent	á	á
â	small a, circumflex accent	â	â
ã	small a, tilde	ã	ã
ä	small a, umlaut mark	ä	ä
å	small a, ring	å	å
æ	small ae	æ	æ
ç	small c, cedilla	ç	ç
è	small e, grave accent	è	è
é	small e, acute accent	é	é
ê	small e, circumflex accent	ê	ê
ë	small e, umlaut mark	ë	ë
ì	small i, grave accent	ì	ì
í	small i, acute accent	í	í
î	small i, circumflex accent	î	î
ï	small i, umlaut mark	ï	ï
ð	small eth, Icelandic	ð	ð
ñ	small n, tilde	ñ	ñ
ò	small o, grave accent	ò	ò
ó	small o, acute accent	ó	ó
ô	small o, circumflex accent	ô	ô
õ	small o, tilde	õ	õ
ö	small o, umlaut mark	ö	ö
ø	small o, slash	ø	ø
ù	small u, grave accent	ù	ù
ú	small u, acute accent	ú	ú
û	small u, circumflex accent	û	û
ü	small u, umlaut mark	ü	ü
ý	small y, acute accent	ý	ý
þ	small thorn, Icelandic	þ	þ
ÿ	small y, umlaut mark	ÿ	ÿ

Other Entities Supported by HTML5 Browser:

Result	Description	Entity Name	Number Code
Œ	capital ligature OE	Œ	Œ
œ	small ligature oe	œ	œ
Š	capital S with caron	Š	Š
š	small S with caron	š	š
Ÿ	capital Y with diaeres	Ÿ	Ÿ
ˆ	modifier letter circumflex accent	ˆ	ˆ
˜	small tilde	˜	˜
	en space	 	 
	em space	 	 
	thin space	 	 
‌	zero width non-joiner	‌	‌
‍	zero width joiner	‍	‍
‎	left-to-right mark	‎	‎
‏	right-to-left mark	‏	‏
–	en dash	–	–
—	em dash	—	—
‘	left single quotation mark	‘	‘
’	right single quotation mark	’	’
‚	single low-9 quotation mark	‚	‚
“	left double quotation mark	“	“
”	right double quotation mark	”	”
„	double low-9 quotation mark	„	„
†	dagger	†	†
‡	double dagger	‡	‡
…	horizontal ellipsis	…	…
‰	per mille	‰	‰
‹	single left-pointing angle quotation	‹	‹
›	single right-pointing angle quotation	›	›
€	euro	€	€

HTML5 - URL Encoding

URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers. These characters include:

• ASCII control characters - Unprintable characters typically used for output control. Character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal). A complete encoding table is given below.
• Non-ASCII control characters - These are characters beyond the ASCII character set of 128 characters. This range is part of the ISO-Latin character set and ncludes the entire "top half" of the ISO-Latin set 80-FF hex (128-255 decimal). A complete encoding table is given below.
• Reserved characters - These are special characters such as the dollar sign, ampersand, plus, common, forward slash, colon, semi-colon, equals sign, question mark, and "at" symbol. All of these can have different meanings inside a URL so need to be encoded. A complete encoding table is given below.
• Unsafe characters - These are space, quotation marks, less than symbol, greater than symbol, pound character, percent character, Left Curly Brace, Right Curly Brace , Pipe, Backslash, Caret, Tilde, Left Square Bracket , Right Square Bracket, Grave Accent. These character present the possibility of being misunderstood within URLs for various reasons. These characters should also always be encoded. A complete encoding table is given below.

The encoding notation replaces the desired character with three characters: a percent sign and two hexadecimal digits whose correspond to the position of the character in the ASCII character set.

Example:

One of the most common special characters is the space. You can't type a space in a URL directly. A space position in the character set is 20 hexadecimal. So you can use %20 in place a space when passing your request to the server.

http://www.example.com/new%20pricing.html

This URL actually retrieves a document named new pricing.html from the www.example.com

ASCII control characters encoding

This includes the encoding for character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal)

Decimal	Hex Value	Character	URL Encode
0	00
1	01		%01
2	02		%02
3	03		%03
4	04		%04
5	05		%05
6	06		%06
7	07		%07
8	08	backspace	%08
9	09	tab	%09
10	0a	linefeed	%0a
11	0b		%0b
12	0c		%0c
13	0d	carriage return	%0d
14	0e		%0e
15	0f		%0f
16	10		%10
17	11		%11
18	12		%12
19	13		%13
20	14		%14
21	15		%15
22	16		%16
23	17		%17
24	18		%18
25	19		%19
26	1a		%1a
27	1b		%1b
28	1c		%1c
29	1d		%1d
30	1e		%1e
31	1f		%1f
127	7f		%7f

Non-ASCII control characters encoding

This includes the encoding for the entire "top half" of the ISO-Latin set 80-FF hex (128-255 decimal.)

Decimal	Hex Value	Character	URL Encode
128	80	€	%80
129	81		%81
130	82	‚	%82
131	83	ƒ	%83
132	84	„	%84
133	85	…	%85
134	86	†	%86
135	87	‡	%87
136	88	ˆ	%88
137	89	‰	%89
138	8a	Š	%8a
139	8b	‹	%8b
140	8c	Œ	%8c
141	8d		%8d
142	8e	Ž	%8e
143	8f		%8f
144	90		%90
145	91	‘	%91
146	92	’	%92
147	93	“	%93
148	94	”	%94
149	95	•	%95
150	96	–	%96
151	97	—	%97
152	98	˜	%98
153	99	™	%99
154	9a	š	%9a
155	9b	›	%9b
156	9c	œ	%9c
157	9d		%9d
158	9e	ž	%9e
159	9f	Ÿ	%9f
160	a0		%a0
161	a1	¡	%a1
162	a2	¢	%a2
163	a3	£	%a3
164	a4	¤	%a4
165	a5	¥	%a5
166	a6	¦	%a6
167	a7	§	%a7
168	a8	¨	%a8
169	a9	©	%a9
170	aa	ª	%aa
171	ab	«	%ab
172	ac	¬	%ac
173	ad	­	%ad
174	ae	®	%ae
175	af	¯	%af
176	b0	°	%b0
177	b1	±	%b1
178	b2	²	%b2
179	b3	³	%b3
180	b4	´	%b4
181	b5	µ	%b5
182	b6	¶	%b6
183	b7	·	%b7
184	b8	¸	%b8
185	b9	¹	%b9
186	ba	º	%ba
187	bb	»	%bb
188	bc	¼	%bc
189	bd	½	%bd
190	be	¾	%be
191	bf	¿	%bf
192	c0	À	%c0
193	c1	Á	%c1
194	c2	Â	%c2
195	c3	Ã	%c3
196	c4	Ä	%c4
197	c5	Å	%c5
198	c6	Æ	%v6
199	c7	Ç	%c7
200	c8	È	%c8
201	c9	É	%c9
202	ca	Ê	%ca
203	cb	Ë	%cb
204	cc	Ì	%cc
205	cd	Í	%cd
206	ce	Î	%ce
207	cf	Ï	%cf
208	d0	Ð	%d0
209	d1	Ñ	%d1
210	d2	Ò	%d2
211	d3	Ó	%d3
212	d4	Ô	%d4
213	d5	Õ	%d5
214	d6	Ö	%d6
215	d7	×	%d7
216	d8	Ø	%d8
217	d9	Ù	%d9
218	da	Ú	%da
219	db	Û	%db
220	dc	Ü	%dc
221	dd	Ý	%dd
222	de	Þ	%de
223	df	ß	%df
224	e0	à	%e0
225	e1	á	%e1
226	e2	â	%e2
227	e3	ã	%e3
228	e4	ä	%e4
229	e5	å	%e5
230	e6	æ	%e6
231	e7	ç	%e7
232	e8	è	%e8
233	e9	é	%e9
234	ea	ê	%ea
235	eb	ë	%eb
236	ec	ì	%ec
237	ed	í	%ed
238	ee	î	%ee
239	ef	ï	%ef
240	f0	ð	%f0
241	f1	ñ	%f1
242	f2	ò	%f2
243	f3	ó	%f3
244	f4	ô	%f4
245	f5	õ	%f5
246	f6	ö	%f6
247	f7	÷	%f7
248	f8	ø	%f8
249	f9	ù	%f9
250	fa	ú	%fa
251	fb	û	%fb
252	fc	ü	%fc
253	fd	ý	%fd
254	fe	þ	%fe
255	ff	ÿ	%ff

Reserved characters encoding

Following is the table to be used to encode reserved characters.

Decimal	Hex Value	Char	URL Encode
36	24	$	%24
38	26	&	%26
43	2b	+	%2b
44	2c	,	%2c
47	2f	/	%2f
58	3a	:	%3a
59	3b	;	%3b
61	3d	=	%3d
63	3f	?	%3f
64	40	@	%40

Unsafe characters encoding

Following is the table to be used to encode unsafe characters.

Decimal	Hex Value	Char	URL Encode
32	20	space	%20
34	22	"	%22
60	3c	<	%3c
62	3e	>	%3e
35	23	#	%23
37	25	%	%25
123	7b	{	%7b
125	7d	}	%7d
124	7c	|	%7c
92	5c	\	%5c
94	5e	^	%5e
126	7e	~	%7e
91	5b	[	%5b
93	5d	]	%5d
96	60	`	%60

HTML5 - Fonts Reference

Fonts are specific to platform. If you are using different OS then you will have different look and feel of any web page. Here we are giving a list of fonts which are available to various operating systems.
HTML <FONT> tag is deprecated in version 4.0 onwards and now all fonts are set by using CSS. Here is the simple syntax of setting font of a body of web page.

body { font-family: "new century schoolbook"; } or <body style="font-family:new century schoolbook;" >

To Become more comfortable - Do Online Practice

Fonts for Microsoft OS and Browsers:

Font	Font	Font
Andale Mono	Arial	Arial Bold
Arial Italic	Arial Bold Italic	Arial Black
Comic Sans MS	Comic Sans MS Bold	Courier New
Courier New Bold	Courier New Italic	Courier New Bold Italic
Georgia	Georgia Bold	Georgia Italic
Georgia Bold Italic	Impact	Lucida Console
Lucida Sans Unicode	Marlett	Minion Web
Symbol	Times New Roman	Times New Roman Bold
Times New Roman Italic	Times New Roman Bold Italic	Tahoma
Trebuchet MS	Trebuchet MS Bold	Trebuchet MS Italic
Trebuchet MS Bold Italic	Verdana	Verdana Bold
Verdana Italic	Verdana Bold Italic	Webdings

You can have more information on Microsoft Fonts at http://www.microsoft.com/typography/fonts.
You can check example fonts here: Microsoft Fonts Examples

Fonts for Macintosh Systems:

Following is the list of fonts supported by Macintosh System 7 and higher versions

Font	Font	Font
American Typewriter	Andale Mono	Apple Chancery
Arial	Arial Black	Brush Script
Baskerville	Big Caslon	Comic Sans MS
Copperplate	Courier New	Gill Sans
Futura	Herculanum	Impact
Lucida Grande	Marker Felt	Optima
Trebuchet MS	Verdana	Webdings
Palatino	Symbol	Times
Osaka	Papyrus	Times New Roman
Textile	Zapf Dingbats	Zapfino
Techno	Hoefler Text	Skia
Hoefler Text Ornaments	Capitals	Charcoal
Gadget	Sand

You can check example fonts here: Mac Fonts Examples

Fonts for Unix Systems:

Following is the list of fonts supported by most Unix System variants

Font	Font	Font
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Times
Utopia

You can check example fonts here: Unix Fonts Examples

HTML5 - Color Names

The following table shows 16 color names that were introduced in HTML 3.2 to support 16 colors that 8-bit graphics cards offered:

Color Name	Hex Value	Color	Show
aqua	#00ffff		Demo
black	#000000		Demo
blue	#0000ff		Demo
fuchsia	#ff00ff		Demo
green	#008000		Demo
gray	#808080		Demo
lime	#00ff00		Demo
maroon	#800000		Demo
navy	#000080		Demo
olive	#808000		Demo
purple	#800080		Demo
red	#ff0000		Demo
silver	#c0c0c0		Demo
teal	#008080		Demo
white	#ffffff		Demo
yellow	#ffff00		Demo

There are other colors which are not part of HTML or XHTML but they are supported by most of the versions of IE or Netscape.

Color Name	Hex Value	Color	Show
aliceblue	#f0f8ff		Demo
antiquewhite	#faebd7		Demo
aquamarine	#7fffd4		Demo
azure	#f0ffff		Demo
beige	#f5f5dc		Demo
bisque	#ffe4c4		Demo
blanchedalmond	#ffebcd		Demo
blueviolet	#8a2be2		Demo
brown	#a52a2a		Demo
burlywood	#deb887		Demo
cadetblue	#5f9ea0		Demo
chartreuse	#7fff00		Demo
chocolate	#d2691e		Demo
coral	#ff7f50		Demo
cornflowerblue	#6495ed		Demo
cornsilk	#fff8dc		Demo
crimson	#dc143c		Demo
cyan	#00ffff		Demo
darkblue	#00008b		Demo
darkcyan	#008b8b		Demo
darkgoldenrod	#b8860b		Demo
darkgray	#a9a9a9		Demo
darkgreen	#006400		Demo
darkkhaki	#bdb76b		Demo
darkmagenta	#8b008b		Demo
darkolivegreen	#556b2f		Demo
darkorange	#ff8c00		Demo
darkorchid	#9932cc		Demo
darkred	#8b0000		Demo
darksalmon	#e9967a		Demo
darkseagreen	#8fbc8f		Demo
darkslateblue	#483d8b		Demo
darkslategray	#2f4f4f		Demo
darkturquoise	#00ced1		Demo
darkviolet	#9400d3		Demo
deeppink	#ff1493		Demo
deepskyblue	#00bfff		Demo
dimgray	#696969		Demo
dodgerblue	#1e90ff		Demo
firebrick	#b22222		Demo
floralwhite	#fffaf0		Demo
forestgreen	#228b22		Demo
gainsboro	#dcdcdc		Demo
ghostwhite	#f8f8ff		Demo
gold	#ffd700		Demo
goldenrod	#daa520		Demo
gray	#808080		Demo
greenyellow	#adff2f		Demo
honeydew	#f0fff0		Demo
hotpink	#ff69b4		Demo
indianred	#cd5c5c		Demo
indigo	#4b0082		Demo
ivory	#fffff0		Demo
khaki	#f0e68c		Demo
lavender	#e6e6fa		Demo
lavenderblush	#fff0f5		Demo
lawngreen	#7cfc00		Demo
lemonchiffon	#fffacd		Demo
lightblue	#add8e6		Demo
lightcoral	#f08080		Demo
lightcyan	#e0ffff		Demo
lightgoldenrodyellow	#fafad2		Demo
lightgreen	#90ee90		Demo
lightgrey	#d3d3d3		Demo
lightpink	#ffb6c1		Demo
lightsalmon	#ffa07a		Demo
lightseagreen	#20b2aa		Demo
lightskyblue	#87cefa		Demo
lightslategray	#778899		Demo
lightsteelblue	#b0c4de		Demo
lightyellow	#ffffe0		Demo
limegreen	#32cd32		Demo
linen	#faf0e6		Demo
magenta	#ff00ff		Demo
mediumblue	#0000cd		Demo
mediumorchid	#ba55d3		Demo
mediumpurple	#9370db		Demo
midnightblue	#191970		Demo
mistyrose	#ffe4e1		Demo
moccasin	#ffe4b5		Demo
oldlace	#fdf5e6		Demo
orange	#ffa500		Demo
orchid	#da70d6		Demo
peachpuff	#ffdab9		Demo
peru	#cd853f		Demo
pink	#ffc0cb		Demo
plum	#dda0dd		Demo
purple	#800080		Demo
rosybrown	#bc8f8f		Demo
royalblue	#4169e1		Demo
salmon	#fa8072		Demo
sandybrown	#f4a460		Demo
seagreen	#2e8b57		Demo
sienna	#a0522d		Demo
skyblue	#87ceeb		Demo
slateblue	#6a5acd		Demo
steelblue	#4682b4		Demo
tan	#d2b48c		Demo
thistle	#d8bfd8		Demo
tomato	#ff6347		Demo
violet	#ee82ee		Demo
wheat	#f5deb3		Demo
whitesmoke	#f5f5f5		Demo
yellow	#ffff00		Demo
yellowgreen	#9acd32		Demo

HTML5 New Tags (Elements)

The following tags (elements) have been introduced in HTML5:

Tags (Elements)	Description
<article>	Represents an independent piece of content of a document, such as a blog entry or newspaper article
<aside >	Represents a piece of content that is only slightly related to the rest of the page.
<audio>	Defines an audio file.
<canvas>	This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<command>	Represents a command the user can invoke.
<datalist>	Together with the a new list attribute for input can be used to make comboboxes
<details>	Represents additional information or controls which the user can obtain on demand
<embed>	Defines external interactive content or plugin.
<figure>	Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<footer>	Represents a footer for a section and can contain information about the author, copyright information, et cetera.
<header>	Represents a group of introductory or navigational aids.
<hgroup>	Represents the header of a section.
<keygen>	Represents control for key pair generation.
<mark>	Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<meter>	Represents a measurement, such as disk usage.
<nav>	Represents a section of the document intended for navigation.
<output>	Represents some type of output, such as from a calculation done through scripting.
<progress>	Represents a completion of a task, such as downloading or when performing a series of expensive operations.
<ruby>	Together with <rt> and <rp> allow for marking up ruby annotations.
<section>	Represents a generic document or application section
<time>	Represents a date and/or time.
<video>	Defines a video file.
<wbr>	Represents a line break opportunity.

New types for <input> tag:

The input element's type attribute now has the following new values:

Type	Description
color	Color selector, which could be represented by a wheel or swatch picker
date	Selector for calendar date
datetime-local	Date and time display, with no setting or indication for time zones
datetime	Full date and time display, including a time zone.
email	Input type should be an email.
month	Selector for a month within a given year
number	A field containing a numeric value only
range	Numeric selector within a range of values, typically visualized as a slider
search	Term to supply to a search engine. For example, the search bar atop a browser.
tel	Input type should be telephone number.
time	Time indicator and selector, with no time zone information
url	Input type should be URL type.
week	Selector for a week within a given year

HTML5 Deprecated Tags and Attributes

Deprecated Tags:

The following elements are not available in HTML5 anymore and their function is better handled by CSS:

Tags (Elements)	Description
<acronym>	Defines an acronym
<applet>	Defines an applet
<basefont>	Defines an base font for the page.
<big>	Defines big text
<center>	Defines centered text
<dir>	Defines a directory list
<font>	Defines text font, size, and color
<frame>	Defines a frame
<frameset>	Defines a set of frames
<isindex>	Defines a single-line input field
<noframes>	Defines a noframe section
<s>	Defines strikethrough text
<strike>	Defines strikethrough text
<tt>	Defines teletype text
<u>	Defines underlined text

Deprecated Attributes:

HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS. Some attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed compeletely.
Following is the table having removed attributed and their corresponding impacted tags (elements) ie. elements from which those attributes have been removed permanently:

Removed Attributes	From the Elements
rev	link, a
charset	link and a
shape	a
coords	a
longdesc	img and iframe.
target	link
nohref	area
profile	head
version	html
name	img
scheme	meta
archive	object
classid	object
codebase	object
codetype	object
declare	object
standby	object
valuetype	param
type	param
axis	td and t
abbr	td and t
scope	td
align	caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
alink	body
link	body
vlink	body
text	body
background	body
bgcolor	table, tr, td, th and body.
border	table and object.
cellpadding	table
cellspacing	table
char	col, colgroup, tbody, td, tfoot, th, thead and tr.
charoff	col, colgroup, tbody, td, tfoot, th, thead and tr.
clear	br
compact	dl, menu, ol and ul.
frame	table
compact	dl, menu, ol and ul.
frame	table
frameborder	iframe
hspace	img and object.
vspace	img and object.
marginheight	iframe
marginwidth	iframe
noshade	hr
nowrap	td and th
rules	table
scrolling	iframe
size	hr
type	li, ol and ul.
valign	col, colgroup, tbody, td, tfoot, th, thead and tr
width	hr, table, td, th, col, colgroup and pre.

HTML5 Tags Reference

A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated in HTML5.

Tag	Description
<!--...-->	Specifies a comment
<!DOCTYPE>	Specifies the document type
<a>	Specifies an anchor
<abbr>	Specifies an abbreviation
<acronym>	Deprecated:Specifies an acronym
<address>	Specifies an address element
<applet>	Deprecated: Specifies an applet
<area>	Specifies an area inside an image map
<article>	New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article
<aside>	New Tag:Specifies a piece of content that is only slightly related to the rest of the page.
<audio>	New Tag:Specifies an audio file.
<base>	Specifies a base URL for all the links in a page
<basefont>	Deprecated: Specifies a base font
<bdo>	Specifies the direction of text display
<bgsound>	Specifies the background music
<blink>	Specifies a text which blinks
<blockquote>	Specifies a long quotation
<body>	Specifies the body element
<br>	Inserts a single line break
<button>	Specifies a push button
<canvas>	New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<caption>	Specifies a table caption
<center>	Deprecated: Specifies centered text
<col>	Specifies attributes for table columns
<colgroup>	Specifies groups of table columns
<command>	New Tag:Specifies a command the user can invoke.
<comment>	Puts a comment in the document
<datalist>	New Tag:Together with the a new list attribute for input can be used to make comboboxes
<dd>	Specifies a definition description
<del>	Specifies deleted text
<details>	New Tag:Specifies additional information or controls which the user can obtain on demand.
<dir>	Deprecated: Specifies a directory list
<div>	Specifies a section in a document
<dl>	Specifies a definition list
<dt>	Specifies a definition term
<embed>	New Tag:Defines external interactive content or plugin.
<fieldset>	Specifies a fieldset
<figure>	New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<b>	Specifies bold text
<big>	Deprecated:Specifies big text
<i>	Specifies italic text
<small>	Specifies small text
<tt>	Deprecated:Specifies teletype text
<font>	Deprecated: Specifies text font, size, and color
<footer>	New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.
<form>	Specifies a form
<frame>	Deprecated:Specifies a sub window (a frame)
<frameset>	Deprecated:Specifies a set of frames
<head>	Specifies information about the document
<header>	New Tag:Specifies a group of introductory or navigational aids.
<hgroup>	New Tag:Specifies the header of a section.
<h1> to <h6>	Specifies header 1 to header 6
<hr>	Specifies a horizontal rule
<html>	Specifies an html document
<isindex>	Deprecated: Specifies a single-line input field
<iframe>	Specifies an inline sub window (frame)
<ilayer>	Specifies an inline layer
<img>	Specifies an image
<input>	Specifies an input field
<ins>	Specifies inserted text
<keygen>	New Tag:Specifies control for key pair generation.
<keygen>	Generate key information in a form
<label>	Specifies a label for a form control
<layer>	Specifies a layer
<legend>	Specifies a title in a fieldset
<li>	Specifies a list item
<link>	Specifies a resource reference
<map>	Specifies an image map
<mark>	New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<marquee>	Create a scrolling-text marquee
<menu>	Deprecated: Specifies a menu list
<meta>	Specifies meta information
<meter>	New Tag:Specifies a measurement, such as disk usage.
<multicol>	Specifies a multicolumn text flow
<nav>	New Tag:Specifies a section of the document intended for navigation.
<nobr>	No breaks allowed in the enclosed text
<noembed>	Specifies content to be presented by browsers that do not support the <embed>tag
<noframes>	Deprecated:Specifies a noframe section
<noscript>	Specifies a noscript section
<object>	Specifies an embedded object
<ol>	Specifies an ordered list
<optgroup>	Specifies an option group
<option>	Specifies an option in a drop-down list
<output>	New Tag:Specifies some type of output, such as from a calculation done through scripting.
<p>	Specifies a paragraph
<param>	Specifies a parameter for an object
<cite>	Specifies a citation
<code>	Specifies computer code text
<dfn>	Specifies a definition term
<em>	Specifies emphasized text
<kbd>	Specifies keyboard text
<samp>	Specifies sample computer code
<strong>	Specifies strong text
<var>	Specifies a variable
<plaintext>	Deprecated: Render the raminder of the document as preformatted plain text
<pre>	Specifies preformatted text
<progress>	New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.
<q>	Specifies a short quotation
<ruby>	New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.
<script>	Specifies a script
<section>	New Tag:Represents a generic document or application section.
<select>	Specifies a selectable list
<spacer>	Specifies a white space
<span>	Specifies a section in a document
<s>	Deprecated: Specifies strikethrough text
<strike>	Deprecated: Specifies strikethrough text
<style>	Specifies a style definition
<sub>	Specifies subscripted text
<sup>	Specifies superscripted text
<table>	Specifies a table
<tbody>	Specifies a table body
<td>	Specifies a table cell
<textarea>	Specifies a text area
<tfoot>	Specifies a table footer
<th>	Specifies a table header
<thead>	Specifies a table header
<time>	New Tag:Specifies a date and/or time.
<title>	Specifies the document title
<tr>	Specifies a table row
<u>	Deprecated: Specifies underlined text
<ul>	Specifies an unordered list
<video>	New Tag:Specifies a video file.
<wbr>	New Tag:Specifies a line break opportunity.
<wbr>	Indicate a potential word break point within a <nobr> section
<xmp>	Deprecated: Specifies preformatted text

HTML5 Web Workers

JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM.
Javascript will hang your browser in situation where CPU utilization is high. Let us take a simple example where Javascript goes through a big loop:

<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> function bigLoop(){ for (var i = 0; i <= 10000000000; i += 1){ var j = i; } alert("Completed " + j + "iterations" ); } function sayHello(){ alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="bigLoop();" value="Big Loop" /> <input type="button" onclick="sayHello();" value="Say Hello" /> </body> </html>

Try above example online to see the result - Try online using any browser. When you click Big Loop button it displays following result in Firefox:

What is Web Workers?

The situation explained above can be handled using Web Workers who will do all the computationally expensive tasks without interrupting the user interface and typically run on separate threads.
Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.
Web Workers are background scripts and they are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image.
When a script is executing inside a Web Worker it cannot access the web page's window object (window.document), which means that Web Workers don't have direct access to the web page and the DOM API. Although Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsive.

How Web Workers Work?

Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it from the main page. Following is the simple syntax:

var worker = new Worker('bigLoop.js');

If the specified javascript file exists, the browser will spawn a new worker thread, which is downloaded asynchronously. If the path to your worker returns an 404, the worker will fail silently.
If your application has multiple supporting javascript files, you can import them importScripts() method which takes file name(s) as argument separated by comma as follows:

importScripts("helper.js", "anotherHelper.js");

Once the Web Worker is spawned, communication between web worker and its parent page is done using the postMessage() method. Depending on your browser/version, postMessage() can accept either a string or JSON object as its single argument.
Message passed by Web Worker is accessed using onmessage event in the main page. Now let us write our bigLoop example using Web Worker. Below is the main page (hello.htm) which will spawn a web worker to execute the loop and to return the final value of variable j:

<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> var worker = new Worker('bigLoop.js'); worker.onmessage = function (event) { alert("Completed " + event.data + "iterations" ); }; function sayHello(){ alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="sayHello();" value="Say Hello"/> </body> </html>

Following is the content of bigLoop.js file. This makes use of postMessage() API to pass the communication back to main page:

for (var i = 0; i <= 1000000000; i += 1){ var j = i; } postMessage(j);

Now let us keep hello.htm and bigLoop.js file in the same directory and try to access hello.htm using latest version of either Safari or Firefox.
Try above example online to see the result - Try online using latest version of either Safari or Firefox.

Stopping Web Workers:

Web Workers don't stop by themselves but the page that started them can stop them by calling terminate() method.

worker.terminate();

A terminated Web Worker will no longer respond to messages or perform any additional computations. You cannot restart a worker; instead, you can create a new worker using the same URL.

Handling Errors:

The following shows an example of an error handling function in a Web Worker JavaScript file that logs errors to the console. With error handling code, above example would become as following:

<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> var worker = new Worker('bigLoop.js'); worker.onmessage = function (event) { alert("Completed " + event.data + "iterations" ); }; worker.onerror = function (event) { console.log(event.message, event); }; function sayHello(){ alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="sayHello();" value="Say Hello"/> </body> </html>

Checking for Browser Support:

Following is the syntax to detect a Web Worker feature support available in a browser:

<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
  <script src="/js/modernizr-1.5.min.js"></script>
  <script>
   if (Modernizr.webworkers) {
      alert("Congratulation!! you have web workers support." );
   }else{
      alert("Sorry!! you do not have web workers support." );
   }
  </script>
</head>
<body>
   <p>Checking for Browser Support for web workers</p>
</body>
</html>