html5-quick reference guide -...
TRANSCRIPT
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
Tag Description Attributes
<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
Tag Description Attributes
<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
Defines a section in a document
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
Tag Description Attributes
<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
Tag Description Attributes
<span>
<a>
<rt>
<rp>
Defines a section in a document
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: