Html5 Cheat Sheet printable pdf download

HTML5 Document Template

Blog

<!DOCTYPE HTML>

HTML5 is the cornerstone of the W3C's open web

<html>

platform; a framework designed to support

<head>

innovation and foster the full potential the web has

<title>HTML5

Document</title>

to offer. Heralding this revolutionary collection of

HTML5 Reference

<link

rel="stylesheet"

href="file.css">

tools and standards, the HTML5 identity system

provides the visual vocabulary to clearly classify

</head>

and communicate our collective efforts.

<body>

</body>

</html>

Text-level semantics

Metadata and scripting

Document sections

Tag

Description

Attributes

Tag

Description

Attributes

Tag

Description

<head>

First element of the HTML document. Collection

none

<body>

Main content of the document.

Global attributes

<span>

Container with no semantic meaning.

Global attributes

of metadata for the Document.

<aside>

Content related to surrounding elements that

Global attributes

<a>

Hyperlink (a hypertext anchor).

href

hreflang

media

<title>

Document title or name.

none

doesn't belong inline, such as a advertising or

rel

target

type

quotes.

<meta>

Document metadata that can't be expressed

charset

content

<rt>

Annotation of preceding text.

Global attributes

with other elements.

Contact information for it’s nearest article or

Global attributes

http-equiv

name

body element.

<rp>

Contains semantically meaningless markup for

Global attributes

<base>

Specifies URL which non-absolute URLs are

href

target

browsers that don't understand ruby

Contains of elements grouped by theme, for

cite

relative to.

annotations.

example a chapter or tab box.

<link>

Other resources related to the document.

href

rel

media

<dfn>

Navigation or introductory elements for the

Global attributes

Defining instance of a term.

Global attributes

hreflang

type

sizes

current section.

<abbr>

Abbreviation or acronym.

Global attributes

<style>

media

type

scoped

Embed style information in the documents.

<nav>

A section of a page that links to other pages.

Global attributes

<q>

Phrasing content quoted from another source.

cite

Contains elements that are part of the

none

Section of the page content, such as a blog or

Global attributes

document only if scripting is disabled.

forum post.

<cite>

Title of a referenced piece of work.

Global attributes

Inline or linked client side scripts.

Footer of the current section.

Global attributes

<em>

Text that should be emphasized.

Global attributes

async

type

defer

src

charset

vveadings for the current section.

Global attributes

<time>

Time defined in a machine readable format.

datetime

pubdate

The highest ranked heading represents the

<var>

group in the document outline.

Mathematical or programming variable.

Global attributes

<h1>

<h6>

Heading for the current section.

Global attributes

<samp>

Sample output of a program.

Global attributes

<i>

Text in a alternate voice or mood, such as a

Global attributes

Grouping Content

technical term.

Tag

Description

Attributes

<b>

Stylistically separated text of equal importance,

Global attributes

such as a product name.

<hr>

Paragraph-level thematic break.

Global attributes

Forms

<sub>

Subscript text.

Global attributes

<br>

Line break.

Global attributes

Tag

Description

Attributes

<p>

<sup>

Superscript text.

Global attributes

Paragraph content.

Global attributes

Set of form controls grouped by theme.

disabled

form

name

Caption or legend for the figure element.

Global attributes

<small>

An aside, such as fine print.

Global attributes

<meter>

Control for entering a numeric value in a known

high

low

max

min

Contains elements related to single concept,

Global attributes

range.

optimum

value

Text that is important.

Global attributes

such as an illustration or code example.

<mark>

Text highlighted for referencing elsewhere.

Global attributes

Define a name for a fieldset.

Global attributes

<div>

Container with no semantic meaning.

Global attributes

<ruby>

Contains text with annotations, such as

Global attributes

<label>

Caption for a form control.

for

form

<ol>

start

reversed

Ordered list.

pronunciation hints. Commonly used in East

Asian text.

<input>

alt

Generic form input.

<ul>

Unordered list.

Global attributes

auto-complete

autofocus

<ins>

Text that has been inserted during document

cite

datetime

<li>

List item.

value

checked

disabled

editing.

form

formaction

<pre>

A block of preformatted text.

Global attributes

<del>

Text that has been removed during document

cite

datetime

formenctype

formmethod

editing.

formnovalidate

Quote from another source.

cite

formtarget

height

<kbd>

Example input (usually keyboard) for a program.

Global attributes

<dl>

An association list consisting of zero or more

Global attributes

list

max

maxlength

name-value groups (a description list).

<bdo>

Defines directional formatting for content.

dir

min

multiple

name

pattern

placeholder

<dt>

Term, or name, part of a term-description

Global attributes

<s>

Text that is outdated or no longer accurate.

Global attributes

readonly

required

group in a description list.

<wbr>

Opportunity for a line break.

Global attributes

size

src

step

type

<dd>

Description, definition, or value, part of a term-

Global attributes

value

width

<code>

Fragment of computer code.

Global attributes

description group in a description list

Multiline free-form text input.

autofocus

cols

disabled

dirname

form

name

readonly

required

rows

maxlength

placeholder

Embedding content

Tabular data

wrap

Attributes

Tag

Description

Tag

Description

<form>

Used to create an HTML form for user input.

action

autocomplete

name

novalidate

<img>

alt

src

height

<col>

Columns in a table.

span

An image.

accept-charset

enctype

ismap

usemap

width

span

Defines a group of columns in a table.

method

target

alt

cords

href

<area>

Hyperlink with some text and a corresponding

Title of a table.

Global attributes

Control for selecting from multiple options.

autofocus

size

area on an image map, or a dead area on an

hreflang

media

rel

disabled

form

image map.

<table>

summary

shape

target

type

Table of multi-dimensional data.

multiple

name

<tr>

A row of cells in a table.

Global attributes

<map>

Image map for adding hyperlinks to parts of an

name

Group of option.

disabled

label

image.

<td>

Table cell.

colspan

rowspan

Single option within a select control.

disabled

label

headers

<embed>

Integration point for an external (typically

height

src

type

selected

value

non-HTML) application or interactive content.

width

<th>

Table heading.

colspan

rowspan

External resource such as an image, iframe or

data

height

type

Contains the results of a calculation.

form

for

name

scope

headers

plugin.

usemap

width

form

<tbody>

Contains rows that hold the table's data.

Global attributes

autofocus

disabled

A button.

form

formaction

<param>

name

value

Parameters for the parent object.

<thead>

Contains rows with table headings.

Global attributes

formenctype

formmethod

Alternative sources for parent video or audio

media

src

type

formnovalidate

<tfoot>

Contains rows with summary of data.

Global attributes

elements.

formtarget

name

type

Nested browser frame.

src

name

sandbox

value

seamlesss

width

Define sets of options.

Global attributes

height

srcdoc

Generates private-public key pairs.

autofocus

challenge

Bitmap which is editable by client side scripts.

height

width

Global Attributes

disabled

form

keytype

<track>

Specifies external timing track for media element.

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

name

<audio>

Sound or audio stream.

autobuffer

preload

Attribute

Description

Values

Control for displaying progress of a task.

max

value

loop

controls

src

accesskey

Specifies a keyboard shortcut to access an element

character

<video>

audio

autoplay

Used for playing videos or movies.

class

Specifies a classname for an element (used to specify

classname

controls

height

loop

a class in a style sheet)

poster

preload

src

contenteditable

Specifies if the user is allowed to edit the content or not

true | false

width

Interactive elements

contextmenu

menu_id

Specifies the context menu for an element

Allows scripts to access devices such as a

Attributes

Tag

Description

webcam.

dir

Specifies the text direction for the content in an

ltr | rtl

element

<menu>

Set of commands.

label

type

draggable

Specifies whether or not a user is allowed to drag an

true | false |

checked

disabled

Command the user can perform, such as

element

auto

publishing an article.

hidden

icon

label

dropzone

Specifies what happens when dragged items/data is

copy | move |

radiogroup

type

HTML5’s differences with HTML 4.01 and XHTML 1.x

dropped in the element

link

Caption of a details element.

Global attributes

The following is a quick list of differences and some specific examples.

hidden

Specifies that the element is not relevant. Hidden

hidden

open

elements are not displayed

Contains additional information, such as the

contents of an accordian view.

- New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML

Specifies a unique id for an element

- Ability to use inline SVG and MathML in text/html

lang

Specifies a language code for the content in an

language_code

- New elements: article, aside, audio, bdi, canvas, command, datalist,

element.

details, embed, figcaption, figure, footer, header, hgroup, keygen, mark,

spellcheck

Specifies if the element must have its spelling and

true | false

meter, nav, output, progress, rp, rt, ruby, section, source, summary,

grammar checked

New APIs

time, video, wbr

style

Specifies an inline style for an element

style_definition

- New types of form controls: dates and times, email, url, search, color

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs).

- New attributes: charset (on meta), async (on script)

tabindex

Specifies the tab order of an element

number

Existing document object model (DOM) interfaces are extended and de facto features documented.

There are also new APIs, such as:

- Global attributes (that can be applied for every element): id, tabindex, hidden, data-*

title

Specifies extra information about an element

text

(custom data attributes)

- The canvas element for immediate mode 2D drawing.

- Timed media playback

- Deprecated elements will be dropped altogether: acronym, applet, basefont, big,

- Offline storage database (offline web applications).

- Document editing

center, dir, font, frame, frameset, isindex, noframes, strike, tt, u

- Cross-document messaging

- Drag-and-drop

- Browser history management

- Microdata

- MIME type and protocol handler registration

- Orange border surrounding some of the rows denotes the tags which are new in HTML5.

- Attributes which are new in HTML5 are underlined in orange.

- Global attributes mentioned in many places can be found in a table titled “Global attributes”.

- In addition to the attributes that you see for each tag, you can also use global attributes for these tags.

Class: Multimedia

Class: Offline & Storage

Class: Performance & Integration

Class: Semantics

Class: CSS3

Class: 3D, Graphics & Effects

Class: Connectivity

Class: Device Access

Audio and video are first class citizens in

Web Apps can start faster and work

Make your Web Apps and dynamic web

Giving meaning to structure, semantics

CSS3 delivers a wide range of

Between SVG, Canvas, WebGL, and

More efficient connectivity means more

Beginning with the Geolocation API,

the HTML5 web, living in harmony with

even if there is no internet connection,

content faster with a variety of

are front and center with HTML5. A

stylization and effects, enhancing the

CSS3 3D features, you're sure to amaze

real-time chats, faster games, and better

Web Applications can present rich,

your apps and sites. Lights, camera,

thanks to the HTML5 App Cache, as

techniques and technologies such as

richer set of tags, along with RDFa,

web app without sacrificing your

your users with stunning visuals natively

communication. Web Sockets and

device-aware features and experiences.

action!

well as the Local Storage, Indexed DB,

Web Workers and XMLHttpRequest 2.

microdata, and microformats, are

semantic structure or performance.

rendered in the browser.

Server-Sent Events are pushing (pun

Incredible device access innovations are

and the File API specifications.

No user should ever wait on your watch.

enabling a more useful, data driven web

Additionally Web Open Font Format

intended) data between client and

being developed and implemented, from

for both programs and your users.

(WOFF) provides typographic flexibility

server more efficiently than ever before.

audio/video input access to

and control far beyond anything the web

microphones and cameras, to local data

has offered before.

such as contacts & events, and even tilt

orientation.

HTML5 Reference Poster (Version 1.0) |

Html5 Cheat Sheet

Related Articles

Related forms

Related Categories