HTML5 Reference PDF

HTML5 Document Template
2.0
<!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 <meta charset="utf-8">
<title>HTML5 Document</title>
to offer. Heralding this revolutionary collection of <link rel="stylesheet" href="file.css">
tools and standards, the HTML5 identity system <script src="file.js"></script>
provides the visual vocabulary to clearly classify </head>
and communicate our collective efforts. <body>

</body>
</html>
Metadata and scripting Document sections Text-level semantics

Tag Description Attributes Tag Description Attributes Tag Description Attributes
<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>
with other elements. <address> Contact information for it’s nearest article or Global attributes Annotation of preceding text. 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
<section> Contains of elements grouped by theme, for cite browsers that don't understand ruby
relative to.
example a chapter or tab box. annotations.
<link> Other resources related to the document. href | rel | media |
<header> Navigation or introductory elements for the Global attributes <dfn> Defining instance of a term. Global attributes
hreflang | type | sizes
current section.
<abbr> Abbreviation or acronym. Global attributes
<style> Embed style information in the documents. media | type | scoped <nav> A section of a page that links to other pages. Global attributes
<q> Phrasing content quoted from another source. cite
<noscript> Contains elements that are part of the none <article> 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
<script> Inline or linked client side scripts. <footer> Footer of the current section. Global attributes <em> Text that should be emphasized. Global attributes
async | type | defer |
src | charset <hgroup> headings for the current section. Global attributes <time> Time defined in a machine readable format. datetime | pubdate
The highest ranked heading represents the
group in the document outline. <var> Mathematical or programming variable. Global attributes
<h1> to <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
<hr> Paragraph-level thematic break. Global attributes such as a product name.
Forms
<br> Line break. Global attributes <sub> Subscript text. Global attributes
Tag Description Attributes
<p> Paragraph content. Global attributes <sup> Superscript text. Global attributes
<fieldset> Set of form controls grouped by theme. disabled | form | name
<figcaption> 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 |
<figure> Contains elements related to single concept, Global attributes range. optimum | value <strong> Text that is important. Global attributes
such as an illustration or code example.
<mark> Text highlighted for referencing elsewhere. Global attributes
<legend> Define a name for a fieldset. Global attributes
<div> Container with no semantic meaning. Global attributes
<label> <ruby> Contains text with annotations, such as Global attributes
Caption for a form control. for | form
<ol> Ordered list. start | reversed pronunciation hints. Commonly used in East
<input> Generic form input. accept | alt | Asian text.
<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.
<blockquote> Quote from another source. cite | formnovalidate |
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 |
<dt> Term, or name, part of a term-description Global attributes pattern | placeholder | <s> Text that is outdated or no longer accurate. Global attributes
group in a description list. readonly | required |
size | src | step | type <wbr> Opportunity for a line break. Global attributes
<dd> Description, definition, or value, part of a term- Global attributes | value | width
description group in a description list <code> Fragment of computer code. Global attributes
<textarea> Multiline free-form text input. autofocus | cols |
disabled | dirname |
form | name | readonly
| required | rows |
maxlength | placeholder
Tabular data | wrap Embedding content
Tag Description Attributes <form> Tag Description Attributes
Used to create an HTML form for user input. action | autocomplete |
<col> Columns in a table. span name | novalidate | <img> An image. alt | src | height |
accept-charset | enctype ismap | usemap | width
<colgroup> Defines a group of columns in a table. span | method | target
<area> Hyperlink with some text and a corresponding alt | cords | href |
<caption> Title of a table. Global attributes <select> Control for selecting from multiple options. autofocus | size | area on an image map, or a dead area on an hreflang | media | rel
<table> Table of multi-dimensional data. summary disabled | form | image map. | shape | target | type
multiple | name
<tr> A row of cells in a table. Global attributes <map> Image map for adding hyperlinks to parts of an name
<optgroup> Group of option. disabled | label image.
<td> Table cell. colspan | rowspan |
headers <option> Single option within a select control. disabled | label | <embed> Integration point for an external (typically height | src | type |
selected | value non-HTML) application or interactive content. width
<th> Table heading. colspan | rowspan |
scope | headers <output> Contains the results of a calculation. form | for | name <object> External resource such as an image, iframe or data | height | type |
plugin. usemap | width | form
<tbody> Contains rows that hold the table's data. Global attributes <button> A button. autofocus | disabled |
form | formaction | <param> Parameters for the parent object. name | value
<thead> Contains rows with table headings. Global attributes
formenctype | formmethod
<source> Alternative sources for parent video or audio media | src | type
<tfoot> Contains rows with summary of data. Global attributes | formnovalidate |
elements.
formtarget | name | type
| value <iframe> Nested browser frame. src | name | sandbox |
seamlesss | width |
<datalist> Define sets of options. Global attributes height | srcdoc
<keygen> Generates private-public key pairs. autofocus | challenge | <canvas> Bitmap which is editable by client side scripts. height | width
Global Attributes disabled | form | keytype
The attributes listed below are supported by all HTML 5 tags, with a few exceptions. | name <track> Specifies external timing track for media element. -
Attribute Description Values <audio> Sound or audio stream. autobuffer | preload |

<progress> Control for displaying progress of a task. max | value
loop | controls | src
accesskey Specifies a keyboard shortcut to access an element character
<video> Used for playing videos or movies. audio | autoplay |
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
contextmenu Specifies the context menu for an element menu_id

Interactive elements
<device> Allows scripts to access devices such as a -
Tag Description Attributes 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 | <command> 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
dropped in the element link
HTML5’s differences with HTML 4.01 and XHTML 1.x
<summary> Caption of a details element. Global attributes
hidden Specifies that the element is not relevant. Hidden hidden The following is a quick list of differences and some specific examples.
elements are not displayed <details> Contains additional information, such as the open
contents of an accordian view.
id Specifies a unique id for an element id - New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML
- Ability to use inline SVG and MathML in text/html
lang Specifies a language code for the content in an language_code
element. - New elements: article, aside, audio, bdi, canvas, command, datalist,
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).
tabindex Specifies the tab order of an element number Existing document object model (DOM) interfaces are extended and de facto features documented. - New attributes: charset (on meta), async (on script)
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.1) | www.xhtml-lab.com

HTML5 Reference PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Reference PDF

Uploaded by

Copyright:

Available Formats

HTML5 Document Template

and communicate our collective efforts. <body>

Metadata and scripting Document sections Text-level semantics

<i> Text in a alternate voice or mood, such as a Global attributes

Attribute Description Values <audio> Sound or audio stream. autobuffer | preload |

contextmenu Specifies the context menu for an element menu_id

HTML5 Reference Poster (Version 1.1) | www.xhtml-lab.com

You might also like