Resources

HTML X11 Color Names

The list of web “X11 colors” from the CSS3 specification, along with their hexadecimal and decimal equivalents, is shown below, compare the alphabetical lists in the W3C standards. Note that this includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and cyan (common sRGB name), magenta (common sRGB name) and fuchsia (HTML4/CSS 1.0 standard name), gray (HTML4/CSS 1.0 standard name) and grey. table.colornames{float:left;table-layout:fixed;width:300px;background:transparent;} table.colornames th{text-align:left;font-size:11px;padding:2px;background:transparent;} table.colornames td{color:inherit;font-size:11px;padding:2px} table.colornames tt{font-size:11px;} table.

HTML 5 Template

Template with html5.js shiv * <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Super Site!</title> <meta name="description" content="My Super Site!"> <meta name="author" content="My Name"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> * Inspired by HTML5 Boilerplate Emmet If the Emmet plugin is installed in your code editor, you can use the ! alias or html:5 abbreviation then tab to stub out the template.

HTML 5 - Elements

anchor The anchor element is nothing new. It is a tag that can be either the origin or the target (destination) of a hyperlink. However, in HTML 5 the name attribute has been removed, use an id attribute instead. W3C <a id="content">Content</a> article The article element is a new element to define an independent item of content. W3C MDN <article>Article content ...</article> aside The aside element is a new element to define an independent item of content that is to to one side; out of the way.

XML and HTML Characters

table { font: .8em Monaco; display: block; } tr { background: #EEE; display: inline-block; text-align: center; width: 10em; height: 10em; margin: .5em; padding: 1px; position: relative; } td { display: block; } .character { font: 4em "Georgia", "Apple Symbols", serif; line-height: 1.1; } .hex, .dec { visibility: hidden; } .desc { display: none; position :absolute; text-align: center; background: silver; color: black; } tr:hover .character { font-size: 2em; padding: 0.25em; 0 } tr:hover .