HTML5 tags
New tags added in HTML 5
Layout tags
<article> Defines an article
<aside> Defines contents aside from the page content
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<nav> Defines navigation links
<section> Defines a section
<wbr> Defines a possible line-break
Web Apps tags
<canvas> Defines graphics
<command> Defines a command button
<datagrid> References dynamic data in a tree or a tabular data form
<datalist> Defines a dropdown list
<details> Defines details of an element
Media tags
<audio> Defines sound content
<source> Defines media resources
<video> Defines a video
Ruby tags
<rp> Defines browser substitute for unsupported ruby elements
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations
Other tags
<dialog> Defines a conversion or people talking
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<summary> Defines the header of a “detail” element
<time> Defines a date/time
Existing tags in HTML 4 & 5
<!–..–> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<address> Defines an address element
<area> Defines an area inside an image map
<b> Defines bold text
<base> Defines a base URL for all the links in a page
<bdo> Defines the direction of text display
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<button> Defines a push button
<caption> Defines a table caption
<cite> Defines a citaion
<code> Defines computer code text
<col> Defines attributes table columns
<colgroup> Defines groups of table columns
<dd> Defines a definition description
<del> Defines Defines deleted text
<dfn> Defines a definition term
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text
<fieldset> Defines a fieldset
<form> Defines a form
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<ins> Defines inserted text
<kbd> Defines keyboard text
<label> Defines a label for a form control
<legend> Defines a title in a fieldset
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map
<menu> Defines a menu list
<meta> Defines meta information
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Defines text that is no longer correct
<samp> Defines sample computer code
<script> Defines a script
<select> Defines a selectable list
<small> Defines small text
<span> Defines a section in a document
<strong> Defines strong text
<style> Defines a style definition
<sub> Defines subscripted text
<table> Defines a table
<tbody> Defines a table body
<td> Defines a table cell
<th> Defines a table header
<thead> Defines a table header
<title> Defines the document title
<tr> Defines a table row
<ul> Defines a unordered list
<var> Defines a variable
Old tags
<acronym> Defined acronyms in HTML 4.01
<applet> Defined an embedded applet
<basefont> Defined default font properties for all text in a document
<big> Used to make text bigger
<center> set to center align text and content
<dir> Defined a directory list
<font> Specified font face, font size, and font color of text
<frame> Defined on particular window without a frameset
<frameset> Defined a frameset, which organized multiple windows
<noframes> Displayed text for browser that do not handle frames
<strike> Defined strikthrough text
<tt> Defined teletype text
<u> Defined underliend text
<xmp> Defined preformatted text
Global attributes
New attributes
contenteditable Specifies if the user is allowed to edit the content or not
value: true | false
contetxtmenu Specifies the context menu for an element
value: menu id
draggable Specifies whether a user is allowed to drag an element
value: true | false | auto
dropzone Specifies what happens when dragged data is dropped
value: copy | move | link
hidden Specifies that the element is not relevant
value: hidden
spellcheck Specifies if the element must have its spelling checked
value: true | false
Existing attributes
accesskey Specifies a keyboard shortcut to access an element
value: character
class Specifies a classname for an element (for stylesheets)
value: class name
dir Specifies the text direction for the cotent in an element
value: ltr | rtl
id Specifies a unique id for an element
value: id
lang Specifies a language code for the content in an element
value: language code
style Specifies the tab order of an element
value: number
title Specifies extra information about an element
value: text
Event attributes
New attributes on Window
onafterprint Run after the document is printed
onbeforeprint Run before the document is printed
onbeforeonload Run before the document loads
onerror Rn when an error occur
onhaschange Run when the document has change
onmessage Run when the message is triggered
onoffline Run when the document goes offline
ononline Run when the document comes online
onpagehide Run when the window is hidden
onpageshow Run when the window becomes visible
onpopstate Run when the window’s history change
onredo Run when the document performs a redo
onresize Run when the window resized
onstorage Run when a document loads
onundo Run when a document perform an undo
onunload Run when the user leaves the document
Existing attributes on Window
onblur Run when the window loses focus
onfocus Run when the window get focus
onload Run when the document loads
New attributes on Form
oncontextmenu Run when a context menu is triggered
onformchange Run when a form changes
onforminput Run when a form gets user input
oninput Run when an element gets user input
oninvalid Run when an element is invalid
Existing attributes in Form
onblur Run when an element loses focus
onchange Run when an element changes
onfocus Run when an element gets focus
onselect Run when an element is selected
onsubmit Run when a form is submitted
Unsupported attributes in Form
onreset Run when a form is reset (Not supported in HTML 5)
Existing attributes for keyboard
onkeydown Run when a key is pressed
onkeypress Run when a keys pressed and reloaded
onkeyup Run when a key is released
New attributes for mouse
ondrag Run when an element is dragged
ondragend Run at the end of a drag operation
ondragenter Run when an element is dragged on a drop target
ondragleave Run when an element leaves a valid drop target
ondragover Run when an element is dragged over a drop target
ondragstart Run at the star of drag operation
ondrop Run when dragged element is being dropped
onmousewheel Run when the mouse wheel is being rotated
onscroll Run when an element’s scrollbar is being scrolled
Existing attributes for mouse
onclick Run on a mouse click
ondbclick Run on a mouse double-click
onmousedown Run when a mouse button is pressed
onmousemove Run when the mouse pointer moves
onmouseout Run when the mouse pointer moves out of an element
onmouseover Run when the mouse pointer moves over an element
onmouseup Run when mouse button is released
New attributes for media
oncanplay Run when media can start play
oncanplaythrough Run when media can be played to the end
ondurationchange Run when the length of the media is changed
onemtied Run when a media resource element becomes empty
onended Run when media has reach end
onerror Run when an error occurs loading an element
onloadeddata Run when media data is loaded
onloadedmetadata Run when the duration of a media element is loaded
onloadstart Run when the browser starts to load the media data
onpause Run when media data is paused
onplaying Run when media data has start playing
onprogress Run when the browser is fetching the media data
onratechange Run when the media data’s playing rate has changed
onreadystatechange Run when the ready-state changes
onseeked Run when a element’s seeking attribute is not true
onseeking Run when an element’s seeking attribute is true
onstalled Run when there is an error in fetching media data
onsuspend Run when browser has stopped fetching media data
ontimeupdate Run when media changes its playing position
onvolumechange Run when media changes the volume, also when mute
onwaiting Run when media has stopped playing
Existing attributes for media
onabort Run on an abort event
HTML5 DOCTYPE
HTML5 documents have a much simpler doctype definition. This doctype kicks all current browser engines into standards mode (vs. quirks mode) and is the recommended W3C doctype for modern HTML.
<!DOCTYPE html>
Rounded Corners
Rounded corners work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a workaround for older IE versions (not implemented here).
CSS:
width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 15px 15px 15px 15px;
Rounded Corners Redux: Circles
Google recently featured a logo composed of small colorful bubbles that spent all their time avoiding the mouse cursor – the actual
bubbles were divs without any kind of graphics involved.
So how do you make a round div? If your div has round corners and the corner radius is half the size of your div so that the round corners actually meet,
the effect is that the div now appears round. The example above uses three separate styles for the three different sizes of the circles and inline styles for positioning and color. The CSS below is for
the small circles in the example above, with a div size of 40 pixels and rounded corners of 20 pixels.
CSS:
width: 40px;
height: 40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color:#ffbbbb;
Box Shadows
Object shadows work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for older versions of Internet Explorer.
CSS:
width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
-moz-box-shadow: 3px 3px 3px #aaaaaa;
-webkit-box-shadow: 3px 3px 3px #aaaaaa;
box-shadow: 3px 3px 3px #aaaaaa;
padding: 15px 15px 15px 15px;
Gradients
Linear Gradient
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Gradients are now finally becoming a mainstream feature with the WebKit team’s announcement (Jan 2011) of expanded support of the Mozilla flavor of the proposed W3C spec. Be aware that this spec seems
to be currently in need of editors at the WHATWG and while it is now supported identically by Mozilla and WebKit, there is no official specification.
Opera has also announced that they are working on the the gradient spec (developer tweet from October 2010), but we may have to wait for version 12 for the gradient support to surface.
The examples here work in the latest version of Firefox and in the WebKit Nightly Builds (January 2011) – it can be assumed that the next update of Safari will follow along.
Here is a simple linear gradient, browsers default to a top-to-bottom direction:
CSS:
width: 300px;
border: 1px solid #999999;
padding: 15px 15px 15px 15px;
background-image: -webkit-linear-gradient(#aaddaa, #ffffff);
background-image: -moz-linear-gradient(#aaddaa, #ffffff);
background-image: -o-linear-gradient(#aaddaa, #ffffff);
background-image: linear-gradient(#aaddaa, #ffffff);
Here are some more complex examples – the WebKit blog has a good overview of the new syntax:
Angled Linear Gradient
CSS:
background-image: -webkit-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -moz-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -o-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: linear-gradient(135deg, #aaddaa, #ffffff);
Angled Linear Gradient with Color Stops
CSS:
background-image: -webkit-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -moz-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -o-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
Radial Gradient with Color Stops and Positions
CSS:
background-image: -webkit-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -moz-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -o-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
Text Shadows
Shadows work with Firefox, Safari, Chrome and Opera. There are workarounds for Internet Explorer.
CSS:
text-shadow: #666666 2px 2px 4px;
Usage:
text-shadow: [color] [y-offset] [x-offset] [blur-radius];
The color value can be either the first or last parameter for a shadow definition and multiple shadow definitions can
be added with a comma separator. Here is an example with two shadows applied:
It’s HTML5 in 3D! I hope you still have some of those red-green 3D glasses around…
CSS:
font-size: 22px;
padding: 15px 15px 15px 15px;
text-shadow: #ee3333 -8px 0px 2px, #33ee33 8px 0px 2px;
Border Images
Border images work currently with Firefox, Safari, Chrome and Opera. Here are some further examples.
Image:
CSS:
width: 300px;
padding: 15px 15px 15px 15px;
color: #ffffff;
border-width: 10px;
-moz-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
-webkit-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
Usage:
border-image: [image-source] [image-slice-from-top] [image-slice-from-right] [image-slice-from-bottom] [image-slice-from-left] [image-repeat-horizontal] [image-repeat-vertical];
This is a very complex CSS3 feature with a number of variations for all of the properties – I very much recommend reading the W3C spec. Here is also a very good tutorial exploring border images by Louis-Rémi Babé.
Here is another example for the practical use of border image in combination with the :after pseudo element.
Transform Rotate
CSS transforms work with Firefox, Safari, Chrome and Opera. This is one of the few new CSS properties where Opera also needs a vendor prefix, and its support is definitely still experimental with markedly limited text quality. For IE, it is possible to add similar effects via matrix filters.
Here is the full W3C spec for “CSS 2D Transforms Module Level 3” (yeah, I love that title, too!).
CSS:
margin: 50px 0 50px 0;
width: 200px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
Column Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae velit tortor, ac dictum eros. Phasellus ut ante ante, a lacinia est. Suspendisse quis velit vitae ligula aliquet porta eget in diam.
Proin nunc velit, fringilla eget pretium ut, ultricies at enim. Cras molestie sem ac dui ornare in accumsan nisi dapibus. Aliquam ac molestie neque. Nam auctor leo nec augue sollicitudin eget mattis enim auctor. Curabitur suscipit elementum turpis, quis facilisis lectus ullamcorper placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mi mauris, ornare at tincidunt eu, pretium mollis turpis. Curabitur interdum facilisis dapibus. Curabitur tortor augue, varius vel tempus in, fermentum nec est.
Etiam in nulla sit amet justo luctus faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Fusce condimentum eros ultrices turpis dictum ultricies. Donec velit dui, ultrices eu mattis in, pretium blandit nibh. Sed id elit in justo condimentum fermentum. Nam iaculis massa sed nulla tincidunt consectetur. Cras rutrum blandit felis, vel pulvinar massa tristique nec. Mauris vitae justo ut nisl adipiscing molestie eu vitae ligula. Curabitur accumsan vehicula tellus eu dignissim. Proin eleifend vehicula vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus suscipit condimentum mollis. Mauris urna nisi, viverra quis accumsan at, faucibus ac dolor. Sed pharetra, leo eget imperdiet aliquam, tellus elit ullamcorper quam, vel cursus libero urna at sapien. Quisque vitae mi eu arcu congue lobortis at at lorem. Quisque varius bibendum felis, id consequat lorem blandit at. Nullam feugiat lorem eget urna egestas in vehicula mi elementum.
Column Layout is supported in Safari and Firefox. This degrades gracefully on other browsers by reverting to a standard one column layout.
CSS:
width: 600px;
padding: 15px 15px 15px 15px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-moz-column-count: 2;
-moz-column-gap: 30px;
column-count: 2;
column-gap: 30px;
SVG
Universal support for inline SVG in HTML 5 with SVGweb on all modern browsers and IE.
Safari, Chrome, Firefox and Opera render the SVG code natively, IE uses the SVGweb Flash renderer.
Inline SVG code (script tag enclosure is necessary for the SVGweb library which has to be included in the page):
<script type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 300 150"
style="width:300px;height:150px;background-color: #cccccc; display: block; border: 1px #999999 solid;">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</defs>
<g transform="translate(10,0)">
<rect x="180" y="80" width="100" height="30" fill="#666666" filter="url(#Gaussian_Blur)"></rect>
<circle id="myCircle"
cx="230" cy="115" r="25"
fill="#666666" filter="url(#Gaussian_Blur)"></circle>
<rect x="30" y="15" width="200" height="60" rx="15" ry="15" stroke-width="2px" fill="#000088"></rect>
<circle id="myCircle"
cx="130" cy="85" r="50"
fill="#0088ff"
stroke="#880000"
stroke-width="3"></circle>
<text x="98" y="90">Hello World</text>
</g>
</svg>
</script>
Canvas
Canvas has not been implemented in Internet Explorer up to version 8, however there is excanvas, a JavaScript library that implements most of the canvas functionality in IE. Canvas does work flawlessly in the latest versions of Firefox, Safari, Chrome and Opera.
Here is the inline canvas tag and JavaScript for the example above:
<canvas id="demoCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var canvas, graphics;
function draw_init() {
canvas = document.getElementById('demoCanvas');
if (canvas.getContext) {
graphics = canvas.getContext('2d');
}
draw();
}
function draw() {
var theme = ["#10222B","#95AB63","#BDD684","#E2F0D6","#F6FFE0"];
var x = Math.random() * 300;
var y = Math.random() * 150;
var size = (Math.random() * 100) + 20;
var num_circles = (Math.random() * 10) + 2;
for (var i = size; i > 0; i-= (size/num_circles)) {
graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
graphics.beginPath();
graphics.arc(x, y, i * .5, 0, Math.PI*2, true);
graphics.closePath();
graphics.fill();
}
t = setTimeout('draw()',1000);
}
draw_init();
</script>
Canvas Text
The new fillText and strokeText canvas functions work with all fonts installed on the machine (unfortunately there is still no font download):
<canvas id="textCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var textcanvas, textgraphics;
function textdraw_init() {
textcanvas = document.getElementById('textCanvas');
if (textcanvas.getContext){
textgraphics = textcanvas.getContext('2d');
}
textdraw();
}
function textdraw() {
var texttheme = ["#004488","#0066aa","#0088cc","#00aaee","#00ccff"];
var textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
var x = Math.random() * 600;
var y = Math.random() * 150;
var size = (Math.random() * 50) + 10;
textgraphics.font = size+"px '"+textfont[ (Math.random() * 5 >> 0)]+"'";
if (Math.random() > .5) {
textgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.fillText("Sample String", x, y);
} else {
textgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.strokeText("Sample String", x, y);
}
t = setTimeout('textdraw()',950);
}
textdraw_init();
</script>
Canvas Text Rotate (via transform)
Here is an example of rotating text in a canvas with the canvas.transform method:
<canvas id="fxtextCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var fxtextcanvas, fxtextgraphics;
function fxtextdraw_init() {
fxtextcanvas = document.getElementById('fxtextCanvas');
if (fxtextcanvas.getContext){
fxtextgraphics = fxtextcanvas.getContext('2d');
}
fxtextdraw();
}
function fxtextdraw() {
fxtextgraphics.font = "16px 'Arial'";
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
fxtextgraphics.translate(300, 70);
var c = 0;
for (var i=0; i < 12; i++) {
c = Math.floor(255 / 12 * i);
fxtextgraphics.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
fxtextgraphics.fillText("Sample String", 5, 30);
fxtextgraphics.transform(cos, sin, -sin, cos, 0, 0);
}
}
fxtextdraw_init();
</script>
Canvas Image Load & Manipulation
We first load a jpg image as an object in fximage_init() and once the load event fires we draw the image unaltered to the canvas in the fximage_draw() function.
The fximage_grayscale() function is then called to loop through all the pixels of the canvas, converting each pixel to grayscale and then rewriting the image data to the canvas.
<canvas id="fximageCanvas" width="400" height="300"></canvas>
<a href="javascript:fximage_grayscale();">Convert to Grayscale</a> - <a href="javascript:fximage_draw();">Reset</a>
<script type="text/javascript">
var fximage = new Image();
var fximage_canvas, fximage_graphics;
function fximage_init() {
fximage_canvas = document.getElementById('fximageCanvas');
if (fximage_canvas.getContext){
fximage_graphics = fximage_canvas.getContext('2d');
}
fximage.onload = fximage_draw;
fximage.src = "http://www.themewerk.com/wp-content/uploads/2015/09/goldengate.jpg";
}
function fximage_draw() {
fximage_graphics.drawImage(fximage, 0, 0, 400, 300);
}
function fximage_grayscale() {
input = fximage_graphics.getImageData(0, 0, fximage_canvas.width, fximage_canvas.height);
output = fximage_graphics.createImageData(fximage_canvas.width, fximage_canvas.height);
w = input.width;
h = input.height;
inputData = input.data;
outputData = output.data;
for (var y=1; y<h-1; y++) {
for (var x=1; x<w-1; x++) {
i = (y*w + x) * 4;
grayscale = inputData[i] * .3 + inputData[i+1] * .59 + inputData[i+2] * .11;
outputData[i] = grayscale; // red
outputData[i+1] = grayscale; // green
outputData[i+2] = grayscale; // blue
outputData[i+3] = 255; // alpha
}
}
fximage_graphics.putImageData(output, 0, 0);
}
fximage_init();
</script>
Audio
Here is the full W3C spec for the Audio Element and here is a good overview of the audio tag and how to control media tags (audio and video) via JavaScript on Mozilla’s developer site.
Stories In Flight also hosts separate pages on HTML5 Audio and JavaScript Control and the HTML5 Audio Data API.
“Truth 2” by Jon Gilham used with permission by the artist.
HTML:
<audio controls="true" preload="metadata">
<source src="audio/Truth_2_Jon_Gilham.mp3" type="audio/mpeg" /><!-- Safari/IE9 -->
<source src="audio/Truth_2_Jon_Gilham.ogg" type="audio/ogg" /><!-- Firefox/Opera/Chrome -->
</audio>
Video
Here is the full W3C spec for the Video Element and here is a good overview of the video tag and how to control media tags (audio and video) via JavaScript on Mozilla’s developer site.
The proposed W3C video tag also includes a <track> element that allows the inclusion of subtitles, however none of the browsers has currently a working implementation of this functionality. If you want to include subtitles, Stories In Flight also hosts the VideoSub library which allows the use of standards-compliant track elements in your videos right now.
HTML:
<video controls="true" preload="metadata" width="320" height="176">
<source src="video/jellies.mp4" type="video/mp4" /><!-- WebKit -->
<source src="video/jellies.ogg" type="video/ogg" /><!-- Firefox / Opera -->
</video>
HTML CHEAT SHEET
| SYNTAX |
|---|
| Basic |
| HTML: <tag></tagclose> or <tag>
XHTML: <tag></tagclose> or <tag |
| With an Attribute |
| HTML: <tag attribute=”?”> XHTML: <tag attribute=”?” / > |
| BASIC | |
|---|---|
| <body> | the visible portion of the page |
| <head> | portion not displayed on the page |
| <html> | creates a html page |
| <title> | shows the page name in the title bar |
| LINKS | |
|---|---|
| <img src=”URL”>* | displays an image |
| <a href=”#?”>* | link to anchor in current document |
| <a href=”URL”>* | link to another document |
| <a href=”URL#?”>* | link to anchor in another document |
| <a href=”mailto:EMAIL”>* | email link |
| STRUCTURE | |
|---|---|
| <br>* | line break |
| <code> | source code listing |
| <div> | Formats structure or block of text |
| <em> | italic text |
| <h1>…<h6> | page headings from largest to smallest |
| <hr> | horizontal rule |
| <p> | paragraph |
| <pre> | preformatted text |
| <span> | Inline formatting |
| <strong> | bold text |
| <sub> | subscript text |
| <sup> | superscript text |
| FRAMES | |
|---|---|
| <frame> | defines a single frame |
| <frameset> | frame document |
| <iframe> | inline frame |
| HEAD | |
|---|---|
| <link rel=”stylesheet” href=”?” type=”text/css”> * | external CSS link |
| <script language=”Javascript” type=”text/javascript”> | embedded javascript |
| <meta http-equiv=”content-type” content=”?”; charset=”?”>* |
meta information |
| TABLES | |
|---|---|
| <caption> | table caption |
| <table> | defines a table |
| <tbody> | body section of the table |
| <td> | table cell |
| <td colspan=”?”> | number of columns cell spans |
| <td rowspan=”?”> | number of rows cell should spans |
| <tfoot> | footer section of the table |
| <th> | table header cells |
| <th colspan=”?”> | number of columns table header cell spans |
| <thead> | the header section of the table |
| <tr> | table row |
| LISTS | |
|---|---|
| <dd> | definition |
| <dl> | definition list |
| <dt> | definition term |
| <li> | item in a list |
| <ol> | ordered list |
| <ul> | unordered list |
| FORMS | |
|---|---|
| <form> | defines a form |
| <fieldset> | group of related form items |
| <input type=”?”>* | form element (see input types at right) |
| <option> | menu item in a select box |
| <select> | drop-down list |
| <textarea> | multi-row text area |
| SPECIAL CHARACTERS | |
|---|---|
| | non-breaking space |
| " | quotation mark |
| & | ampersand |
| < | less than sign |
| > | greater than sign |
tag
CSS CHEAT SHEET
| SYNTAX |
|---|
| Syntax |
| selector {property: value;} |
| External Style Sheet |
| <link rel=”stylesheet” type=”text/css” href=”style.css” /> |
| Internal Style |
| <style type=”text/css”> selector {property: value;} </style> |
| Inline Style |
| <tag style=”property: value”> |
| GENERAL | |
|---|---|
| Class | String preceded by a period |
| ID | String preceded by a hash mark |
| div | Formats structure or block of text |
| span | Inline formatting |
| color | Foreground color |
| cursor | Appearance of the cursor |
| display |
block; inline; list-item; none
|
| overflow | How content overflowing its box is handled
visible, hidden, scroll, auto
|
| visibility |
visible, hidden
|
| FONT | |
|---|---|
| font-style |
Italic, normal
|
| font-variant |
normal, small-caps
|
| font-weight |
bold, normal, lighter, bolder, integer (100-900)
|
| font-size | Size of the font |
| font-family | Specific font(s) to be used |
| TEXT | |
|---|---|
| letter-spacing | Space between letters |
| line-height | Vertical distance between baselines |
| text-align | Horizontal alignment |
| text-decoration |
blink, line-through, none, overline, underline
|
| text-indent | First line indentation |
| text-transform |
capitalize, lowercase, uppercase
|
| vertical-align | Vertical alignment |
| word-spacing | Spacing between words |
| BOX MODEL | |
|---|---|
 |
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; |
| BORDER | |
|---|---|
| border-width | Width of the border |
| border-style |
dashed; dotted; double; groove; inset; outset;
ridge; solid; none |
| border-color | Color of the border |
| POSITION | |
|---|---|
| clear | Any floating elements around the element?
both, left, right, none
|
| float | Floats to a specified side
left, right, none
|
| left | The left position of an element
auto, length values (pt, in, cm, px)
|
| top | The top position of an element
auto, length values (pt, in, cm, px)
|
| position |
static, relative, absolute
|
| z-index | Element above or below overlapping elements?
auto, integer (higher numbers on top)
|
| BACKGROUND | |
|---|---|
| background-color | Background color |
| background-image | Background image |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y
|
| background-attachment | Background image scroll with the element?
scroll, fixed
|
| background-position |
(x y), top, center, bottom, left, right
|
| LIST | |
|---|---|
| list-style-type | Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none |
| list-style-position | Position of the bullet or number in a list
inside; outside
|
| list-style-image | Image to be used as the bullet in a list |
are in the order they should appear when using shorthand notation.
Named Colors and Hex Values in HTML
The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch.
| Name | Hexcode | |
|---|---|---|
| Aqua | #00FFFF | |
| Black | #000000 | |
| Blue | #0000FF | |
| Fuchsia | #FF00FF | |
| Gray | #808080 | |
| Green | #008000 | |
| Lime | #00FF00 | |
| Maroon | #800000 | |
| Navy | #000080 | |
| Olive | #808000 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| Silver | #C0C0C0 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Yellow | #FFFF00 |
Elements
Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element.
| Element | Description |
|---|---|
| A | Use to create hyperlinks |
| Abbr | Use for abbreviations |
| address | Contact information |
| Area | Hyperlink in an image-map |
| article* | Provides section formatting for short expository items like articles, blogs, etc. |
| aside* | Slightly related piece of content for host page |
| audio * | Used to add audio for playback associated with web page |
| b | Bold text |
| base | Base URL |
| bdi* | Isolate text that might be formatted in a different direction from text around it |
| bdo | Use to specify the direction of text |
| blockquote | Block quotation |
| body | Document body |
| br | Line break |
| button | Creates a button. |
| canvas* | Use to define a page region in which drawing can occur |
| caption | Table title |
| cite | Cited title of a work |
| code | Code fragment |
| col | Column in a table |
| colgroup | Group of table columns |
| command* | Use to define user GUI elements |
| datalist* | Use to create a list of input elements for pull-down menus |
| dd | Description |
| del | Deleted text |
| details* | Provides additional information or controls to users on demand |
| dfn | Defining instance |
| div | Generic container |
| dl | Description list |
| dt | Term or name |
| em | Emphasis |
| embed * | Links to external application or interactive content |
| fieldset | Related form controls |
| figcaption* | Provide a caption for a figure element |
| figure* | Standalone flow content element; may be static or dynamic |
| footer* | Concluding information for a document section |
| form | Defines a user-submittable form |
| h1 – h6 | Headings |
| head | Container for metadata about the document, scripts, and styles |
| header* | Header for the document |
| hgroup* | Heading group |
| hr | Horizontal rule / thematic break |
| html | Root element |
| i | Italic text |
| iframe | Nested browsing content |
| img | Image |
| input | Input control |
| ins | Inserted text |
| kbd | User input |
| keygen* | User-accessible control to generate key pairs for security or encryption |
| label | Caption for a form control |
| legend | Explanatory caption |
| li | List item |
| link | Metadata for linking external documents |
| map | Define an image-map |
| mark* | Mark or highlight a run of text in one document, for reference in another document |
| menu | List of commands |
| meta | Metadata |
| meter* | Define a visual indicator for some type of measurement |
| nav* | Use to define a navigation bar or area in a web page |
| noscript | Define content to display in case the script can’t be run |
| object | External content |
| ol | Ordered list |
| optgroup | Define a group of options |
| output* | Some kind of output from script calculation or API call |
| p | Paragraph |
| param | Use to provide parameters to plugins |
| pre | Preformatted text |
| progress* | A visual meter for task completion (progress bar) |
| q | Quoted text |
| rp* | Use for putting parentheses around ruby annotations |
| rt* | Use to mark the text of a ruby annotation |
| ruby* | Use to annotate ideographic languages like Chinese or Japanese |
| s | Mark text as removed, with strike through formatting. |
| samp | Sample output |
| script | Embedded script |
| section* | Generic document or application section |
| select | Option selection form control |
| small | Small text |
| source* | Use to specify multiple sources for audio and video |
| span | A generic text wrapper |
| strong | Important text. Is usually formatted as bold |
| style | Presentation information, typically CSS |
| sub | Subscript text |
| summary* | Summary, legend, or caption for input details information |
| sup | Superscript text |
| table | Table |
| tbody | Group of table rows |
| td | Table cell |
| textarea | Text input area |
| tfoot | Table footer row group |
| th | Table header cell |
| thead | Table heading row group |
| time* | Value for representing date and/or time |
| title | Document title |
| tr | Table row |
| track* | Specify a supplementary media track |
| u | Underline |
| ul | Unordered list |
| var | Use to specify a mathematical or programming variable, or a placeholder |
| video * | Use to playback video content in web page |
| wbr * | Use to denote possible line break point for text flow |
* New in HTML5
CSS Property Reference
The following table shows CSS properties that are supported by most browsers today, along with their allowed values.
| Name | Values |
|---|---|
| animation | <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> |
| animation-delay | <time> |
| animation-direction | normal | alternate | reverse | alternate reverse |
| animation-duration | <time> |
| animation-fill-mode | none | forwards | backwards | both |
| animation-iteration-count | infinite | <number> |
| animation-name | none | <identifier> |
| animation-play-state | running | paused |
| animation-timing-function | <timingfunction> |
| backface-visibility | visible | hidden |
| background-attachment | scroll | fixed | inherit |
| background-clip | border-box | padding-box | content-box | inherit |
| background-color | <color> | inherit |
| background-image | <uri> | none | inherit |
| background-origin | border-box | padding-box | content-box | inherit |
| background-position | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit |
| background-size | <length> | <percentage> | auto | cover | contain |
| background | [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit |
| border-collapse | collapse | separate | inherit |
| border-color | [ <color> ]{1,4} | inherit |
| border-image | none | <image> |
| border-image-outset | [‘sides’ || ‘horizontal’ || ‘vertical’ || ‘top’ || ‘bottom’ || ‘right’ || ‘left’] | inherit |
| border-image-repeat | [‘type’ || ‘horizontal’ || ‘vertical’ || ‘stretch’ || ‘repeat’ || ’round’] | inherit |
| border-image-source | none | <image> |
| border-image-slice | [<number> | <percentage>]{1,4} && fill? |
| border-image-width | [ <length> | <percentage> | <number> | auto ]{1,4} |
| border-radius | [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? |
| border-spacing | <length> <length>? | inherit |
| border-style | <border-style>{1,4} | inherit |
| border-top border-right border-bottom border-left | [ <border-width> || <border-style> ||border-top-color ] | inherit |
| border-top-color border-right-color border-bottom-color border-left-color | <color> | inherit |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius | [ <length> | <percentage> ]{1,2} |
| border-top-style border-right-style border-bottom-style border-left-style | <border-style> | inherit |
| border-top-width border-right-width border-bottom-width border-left-width | <border-width> | inherit |
| border-width | <border-width>{1,4} | inherit |
| border | [ <border-width> || <border-style> ||border-top-color ] | inherit |
| bottom | <length> | <percentage> | auto | inherit |
| box-shadow | none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]# |
| break-after | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
| break-before | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
| caption-side | top | bottom | inherit |
| clear | none | left | right | both | inherit |
| clip | <shape> | auto | inherit |
| color | <color> | inherit |
| columns | <‘column-width’> || <‘column-count’> |
| column-count | <number> | auto |
| column-fill | auto | balance |
| column-gap | <length> | normal |
| column-rule | <‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’> |
| column-rule-color | <color> |
| column-rule-style | [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit |
| column-rule-width | <length> | [thin | medium | thick] |
| column-span | none | all | inherit |
| column-width | <length> | auto |
| content | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| counter-increment | [ <identifier> <integer>? ]+ | none | inherit |
| counter-reset | [ <identifier> <integer>? ]+ | none | inherit |
| cursor | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| direction | ltr | rtl | inherit |
| display | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| empty-cells | show | hide | inherit |
| float | left | right | none | inherit |
| font-family | [ [ <family-name> | <generic-family> ] [,<family-name>| <generic-family> ]* ] | inherit |
| font-size | <absolute-size> | <relative-size> | <length> |<percentage> | inherit |
| font-style | normal | italic | oblique | inherit |
| font-variant | normal | small-caps | inherit |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| font | [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| height | <length> | <percentage> | auto | inherit |
| @keyframes | [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* |
| left | <length> | <percentage> | auto | inherit |
| letter-spacing | normal | <length> | inherit |
| line-height | normal | <number> | <length> | <percentage>| inherit |
| list-style-image | <uri> | none | inherit |
| list-style-position | inside | outside | inherit |
| list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
| list-style | [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit |
| margin-right margin-left | <margin-width> | inherit |
| margin-top margin-bottom | <margin-width> | inherit |
| margin | <margin-width>{1,4} | inherit |
| max-height | <length> | <percentage> | none | inherit |
| max-width | <length> | <percentage> | none | inherit |
| min-height | <length> | <percentage> | inherit |
| min-width | <length> | <percentage> | inherit |
| opacity | <number> | inherit |
| orphans | <integer> | inherit |
| outline-color | <color> | invert | inherit |
| outline-style | <border-style> | inherit |
| outline-width | <border-width> | inherit |
| outline | [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit |
| overflow | visible | hidden | scroll | auto | inherit |
| overflow-wrap | normal | break-word | inherit |
| overflow-x | visible | hidden | scroll | auto | inherit |
| overflow-y | visible | hidden | scroll | auto | inherit |
| padding-top padding-right padding-bottom padding-left | <padding-width> | inherit |
| padding | <padding-width>{1,4} | inherit |
| page-break-after | auto | always | avoid | left | right | inherit |
| page-break-before | auto | always | avoid | left | right | inherit |
| page-break-inside | avoid | auto | inherit |
| perspective | none | <length> |
| perspective-origin | [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] |
| position | static | relative | absolute | fixed | inherit |
| quotes | [<string> <string>]+ | none | inherit |
| right | <length> | <percentage> | auto | inherit |
| table-layout | auto | fixed | inherit |
| text-align | left | right | center | justify | inherit |
| text-decoration | none | [ underline || overline || line-through || blink ] | inherit |
| text-indent | <length> | <percentage> | inherit |
| text-transform | capitalize | uppercase | lowercase | none |inherit |
| top | <length> | <percentage> | auto | inherit |
| transform | none | <transform-function>+ |
| transform-origin | [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? |
| transform-style | flat | preserve-3d |
| transition | [ none | <single-transition-property> ] || <time> || <timing-function> || <time> |
| transition-delay | <time> |
| transition-duration | <time> |
| transition-timing-function | <timing-function> |
| transition-property | none | <single-transition-property># [ ‘,’ <single-transition-property># ]* |
| unicode-bidi | normal | embed | bidi-override | inherit |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |<length> | inherit |
| visibility | visible | hidden | collapse | inherit |
| white-space | normal | pre | nowrap | pre-wrap | pre-line |inherit |
| widows | <integer> | inherit |
| width | <length> | <percentage> | auto | inherit |
| word-spacing | normal | <length> | inherit |
| z-index | auto | <integer> | inherit |
