html5-quick reference guide -...

QUICK REFERENCE GUIDE

New SelectorsNew PropertiesAnimations2D/3D TransformationsRounded CornersShadow EffectsDownloadable Fonts

@ purgeru.deviantart.com

WHAT IS HTML5?HTML5 is being developed as the next major revision of HTML.This code can now be used for new functions that can benefit developers and Internet users. HTML5 introduces a number of new elements and attributes. Here are the most imortantof them: canvas, video, geolocation, offline web applications

HTML5 DIFFERENCES WITH HTML 4.01 AND XHTML 1.X- New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML.

- Ability to use inline SVG and MathML in text/html.- New elements: article, aside, audio, bdi, canvas, command, datalist, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, rp, rt, ruby, section, source, summary, time, video, wbr.

- New tipes of form control: dates and times, email, url, search, color.- New attributes: charset (on meta), async (on script).- Global attributes: id, tabindex, hidden, data.- Deprecated elements wil be dropped altogether: acronym, basefont, big, tt,center, dir, font, frame, frameset, isindex, noframes, strike, u.

HTML5 Document Template

<!DOCYPE html><html> <head> <meta charset="UTF-8"> <title>HTML5</title> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head> <body> </body></html>

A character in UTF8 can be from 1 to 4 by tes long. UTF-8 can represent any character in the Unicode standard. UTF-8 is backwards compatible with ASCII. UTF-8 is the preferred encoding for e-mai l and web pages.

Metadata & scripting

Tag Description Attributes

<head>

<title>

<meta>

<base>

<link>

<style>

<noscript>

<script>

Defines information about the document none

none

none

Defines a ti t le for the document

Defines metadata about an HTML document

Specif ies the base URL /target for al l relative URLs in a document

Defines the relationship between a document and an external resource (most used to l ink to style sheets)

Def ines style information for a document

Defines an alternate content for users that do not suppor t cl ient-side scr ipts

Defines a cl ient-side scr ipt

charset, content, http-equiv, name

href, target

media, type, scoped

async, type, defer, src, charset

href, rel, media, hreflang, type, sizes

Grouping content


<hr>

<br>

<figcaption>

<figure>

<div>

<ol>

<ul>

<li>

Defines a thematic change in the content

Def ines a single l ine break

Defines a caption for a <figure> element

Specif ies self-contained content

Defines a section in a document

Defines an ordered l ist

Def ines an unordered l ist

Def ines a l ist i tem, tag is used in ordered l ists, unordered l ists and in menu l ists

<pre> Defines preformatted text

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

<dl> Defines a def init ion l ist

<dt> Defines a term (an item) in a def init ion l ist

<dd> Defines a description of an item in a def init ion l ist

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

start, reversed

Global attributes

Global attributes

cite

Global attributes

Global attributes

Document sections


<body>

<aside>

<address>

<section>

<header>

<nav>

<article>

<footer>

Defines the document 's body

Defines content aside from the page content

Defines contact information for the author/owner of a document /ar tic le


Specif ies an introduction, or a group of navigation elements for a document

Def ines navigation l inks, i t is intended only for major block of navigation l inks.

Def ines an ar tic le

<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels

<h1> to <h6>

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

cite

Defines HTML headings

Defines a footer for a document or section A footer typically contains the author of the document, copyright information, l inks to terms of use, contact information, etc.

Forms


<fieldset>

<meter>

<legend>

<label>

<input>

<textarea>

<form>

<select>

Groups related elements in a form

Defines a scalar measurement within a known range

Defines a caption for a <f ieldset>, <f igure>, or <detai ls> element

Defines a label for an input element

Defines an input control

Def ines navigation l inks, i t is intended only for major block of navigation l inks

Defines an HTML form for user input

Defines a drop-down l ist

<optgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels

<button> Defines a cl ickable but ton

<datalist> Specif ies a l ist of pre-def ined options for input controls

<keygen> Defines a key-pair generator f ield (for forms)

<progress>

disabled, form, name

high, low, max, min,optimum, value

Global atributes

Global atributes

for, form

accept, alt, auto-completeautofocus, checked,disabled, form, formaction,formenctype, formmethod,formnovalidate, formtarget,height, list, max,maxlegth, min, multiple,name, pattern, placeholder,readonly, required, size,src, step, type, value,width

autofocus, cols, disabled,dirname, form, name, readonly, requierd, rows,maxlength, placeholder,wrap

action, autocomplete, name,novalidate,accept-charset,enctype, method, target

autofocus, size, disabled,form, multiple, name

disabled, label

<option> Defines an option in a drop-down l ist disabled, label, selected,value

<output> Defines the result of a calculation form, for, name

autofocus, disabled, form,formaction, formenctype,formmethod, formnovalidate,formtarget, name, type,value

autofocus, challenge,disabled, form, kaytype,name

max, valueRepresents the progress of a task

Tabular data

Tag Description

<col>

<colgroup>

<caption>

<table>

<tr>

<td>

<th>

Specif ies column proper ties for each column within a <colgroup> element

Specif ies a group of one or more columns in a table for formatting

Defines a table caption

Defines a table

Def ines a row in a table Def ines a cell in a table

Defines a header cell in a table

<tbody>

<thead>

Groups the body content in a table

Groups the header content in a table

<tfoot> Groups the footer content in a table

Attributes

Global attributes

Global attributes

Global attributes

colspan, rowspan, headres

colspan, rowspan, headres

span

span

summary

Global attributes

Global attributes

Embeddig content

Tag Description

<area>

<map>

<embed>

<object>

<param>

<source>

<iframe>

Defines an area inside an image-map

Defines a cl ient-side image-map

Defines a container for an external application or interactive content (a plug- in)

Def ines an embedded object

Def ines a parameter for an object Def ines multiple media resources for media elements (<video> and <audio>)

Defines an inl ine frame

<canvas> Used to draw graphics, on the f ly, via scr ipting (usually JavaScript)

alt, cords, href, media, rel, hreflang, type, shape, target

<img> Defines an image alt, src, height, ismap,usemap, width

name

height, src, type, width

data, height, type, form,usemap, width

name, value

media, src, type

src, name, sandbox, width,seamless, height, srcdoc

height, width

Attributes

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

<audio> Defines sound content

<video> Defines a video or movie

<device>

/

autobuffer, preload, loop,controls, src

audio, autoplay, controls,height, loop, poster, preload, src, width

/Allows scr ipts to access devices such as a webcam.

Text-level semantics


<span>

<a>

<rt>

<rp>


Defines a hyperl ink (a hyper text anchor)

Def ines an explanation/pronunciation of characters (for East Asian typography)

Defines what to show in browsers that do not suppor t ruby annotations

<dfn>

<abbr>

<q>

<cite>

Defines a def init ion term

Defines an abbreviation

Defines a shor t quotation

Defines the ti t le of a work

<em>

<time>

<var>

<samp>

Defines emphasized text

Def ines a date/ time

Defines a variable (mathematical or programming)

Defines sample output from a computer program

<i>

<b>

<sub>

Defines a par t of text in an alternate voice or mood

Defines bold text

Def ines subscripted text

<sup>

<small>

Defines superscr ipted text

Def ines smaller text

<strong> Defines impor tant text

/

datetime, pubdate

href, hreflang, media,rel, target, type

cite

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes<mark> Defines marked/highlighted text

Interactive elements

Tag Description

<menu>

<command>

<summary>

<details>

Defines a l ist /menu of commands

Defines a command but ton that a user can invoke

Defines a visible heading for a <detai ls> element

Defines additional detai ls that the user can view or hide

label, type

open

checked, disabled, hidden,icon, label, radiogroup,type

Global attributes

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs).Existing document object model (DOM) interfaces are extended and “de facto” features documented.There are also new APIs, such as:

- The canvas element for immediate mode 2D drawing.

- Offline storage database (offline web applocations).

- Cross-document messaging

- Browser history managment

- MIME type and protocol handler registration

- Timed media playbac

- Document editing

- Drag-and-drop

- Microdata

cite, datetime

cite, datetime

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

Global attributes

<ruby>

<ins>

Defines a ruby annotation (for East Asian typography)

Defines a text that has been inser ted into a document

<del>

<kbd>

Defines a text that has been deleted from a document

Defines keyboard input

<bdo>

<s>

Overr ides the current text direction

Defines text that is no longer correct

<wbr>

<code>

Defines a possible l ine-break

Defines a piece of computer code

Global Attributes

Attribute

The atributes listed below are supported by all HTML 5 tags, with a few exceptions.

Description

acceskey

class

contenteditable

contextmenu

Specif ies a shor tcut key to activate/ focus an element

Specif ies one or more classnames for an element (refers to a class in a style sheet)

Specif ies whether the content of an element is editable or not

Specif ies a context menu for an element. The context menu appears when a user r ight-cl icks on the element

dir

draggable

dropzone

hidden

Specif ies the text direction for the content in an element

Specif ies whether an element is draggable or not

Specif ies whether the dragged data is copied, moved, or l inked, when dropped

Specif ies that an element is not yet, or is no longer, relevant

id

lang

spellcheck

Specif ies a unique id for an element

Specif ies the language of the element 's content

Specif ies whether the element is to have its spell ing and grammar checked or not

style

tabindex

Specif ies an inl ine CSS style for an element

Specif ies the tabbing order of an element

title Specif ies extra information about an element

New attributes which are new in HTML5 are underlined orange.

Tags colored with orange background denotes new tags in HTML5.

Legend:

html5-quick reference guide -...

Documents