Why HTML5:
HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications. But unlike desktop applications, apps built on the web platform can reach a much broader audience using a wider array of devices. HTML5 accelerates the pace of your innovation and enables you to seamlessly roll out your latest work to all your users simultaneously.
HTML5 Doctype:
The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode.
The doctype declaration is and is case-insensitive in the HTML syntax.
HTML5 New Elements:
New Elements
The following elements have been introduced for better structure:
section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page.
hgroup represents the header of a section.
header represents a group of introductory or navigational aids.
footer represents a footer for a section and can contain information about the author, copyright information, etc.
nav represents a section of the document intended for navigation.
figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
Example
figcaption can be used as caption (it is optional).
Then there are several other new elements:
video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
track provides text tracks for the video element.
embed is used for plugin content.
mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
meter represents a measurement, such as disk usage.
time represents a date and/or time.
WHATWG HTML has data which allows content to be annotated with a machine-readable value.
ruby, rt, and rp allow for marking up ruby annotations.
bdi represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
wbr represents a line break opportunity.
canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
command represents a command the user can invoke.
details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
datalist together with the a new list attribute for input can be used to make comboboxes:
keygen represents control for key pair generation.
output represents some type of output, such as from a calculation done through scripting.
The input element’s type attribute now has the following new values:
tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
HTML5 Video Element
Example Code:
<!DOCTYPE html>
<html>
<body>
<video width=”320″ height=”240″ controls=”controls”>
<source src=”testmovie.mp4″ type=”video/mp4″ />
<source src=”testmovie.ogg” type=”video/ogg” /> Your browser does not support the video tag.
</video>
</body>
</html>