HTML 5

Introduction
HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming
language, but rather a markup language.
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been
previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and
Google Gears.
Tools
TextPad or TextWrangler or NotePad

Dreamweaver okay but it does cost.
Compatible browser
Firefox: works for all examples, including masked video and geolocation
Chrome and Safari work for most examples
IE9 being tested now
Syntax
The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and
XHTML1 documents published on the Web, but is not compatible with the more esoteric
SGML features of HTML 4
HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag
names, quoting our attributes,an attribute had to have a value and to close all empty elements.
But HTML5 is coming with lots of flexibility and would support the followings:
Uppercase tag names.
Quotes are optional for attributes.
Attribute values are optional.
Closing empty elements are optional.
1.The DOCTYPE:
DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based
and therefore required a reference to a DTD.
syntax to specify DOCTYPE as follows: <!DOCTYPE html>
2.Character Encoding:
HTML 5 authors can use simple syntax to specify Character Encoding as follows:
<meta charset="UTF-8">
All the above syntax is case-insensitive.
3.The <script> tag:

It's common practice to add a type attribute with a value of "text/javascript" to script elements as
follows:
<script type="text/javascript" src="scriptfile.js"></script>
HTML 5 removes extra information required and you can use simply following syntax:
<script src="scriptfile.js"></script>
4. The <link> tag:

So far you were writing <link> as follows:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML 5 removes extra information required and you can use simply following syntax:
<link rel="stylesheet" href="stylefile.css">
HTML5 vs HTML4
HTML5 specification is much Larger

HTML5 = HTML4 + XHTML1.0 + DOMlavel2
Doc type has been simplified

Charecter Encoding
HTML5 New elements

Article,
header,
summary,
aside,
hgroup,
time,
audio,
keygen,
vidio
canvas,
mark,
command,
meter,
datalist,
nav,
details,
output,
embed,
progress,
figcaption,
rp, ruby,
figure,
section,
footer,
source,
Forms in html5
Web Forms 2.0 specification is integrated into HTML5

Data Picker , color picker, adn numeric stepper controls added
Input field types now include email,search and url
Put and delete form methods now supported
Integrated APIs
Audio
Video
Offline apps
Editable
Drag & Drop
History
PROTOCOLS
Associated APIs
Geolocation
Massaging
HTML5 New Tag

Structural Tags
Section
Article
Aside
Header
Hgroup
Footer
Nav
Content tags
Figure
Video
Audio
Embed
Canvas
New applicaton Focused tags

Meter
Progress
Time
Details
<section></section>
The section element represents a generic section of a document application.

A section in this context is a thematic grouping content typically with a heading..
Output:-
Code:<section style="border:1px solid; width:300px;" >

<h4>What We Do</h4>
<p>We protect sharks...</p>
</section>
<section>
<h4>News Items</h4>
<p>Man eats shark...</p>
</section>
<article></article>
This article element represents a selfcontained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable, e.g. In syndication.
This could be a forum post a magazine or newspaper article, a blog entry, a user submitted comment,
an interactive widget or gadget, entry, a user submitted comment, an interactive widget or gadget, or
any other independent item of content
Code:<article>
<h4>Articale</h4>
<p>This article element represents a selfcontained composition in .....
</p>
<p>This could be a forum post a magazine or
newspaper article, a blog entry, a user
submitted comment, an interactive widget ...
</p>
</article>
Output:-
<aside></aside>
The aside element represents a section of a page that consists of content that is tangentially related to
the content around the aside element, and which could be considered separate from that content.
Such sections are often represented as sidebars in printed typography
Code:<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in
Disney World, Florida.</p>
</aside>
Output:-
<header></header>
The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the sections heading (an h1-h6 element or an hgroup
element),but this is not required.
The header element can also be used to wrap a sections table of contents, a search form, or any
relevant logos.
Code:<header>
<h1>header</h1>
<p>The header element can also be used to wrap
a section's table of contents, a search form, or any
relevant logos.
</p>
</header>
Output:-
<hgroup></hgroup>
The hgroup element represents the heading of a section.

The element is used to group a set of h1-h6 elements when the heading has multiple levels, such as
subheading, alternative titles, or taglines.
Code:-
<hgroup>
<h1>TOPS</h1>
<h2>TOPS</h2>
</hgroup>
Output:-
<footer></footer>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root
element.
A footer typically contains information about its section such a s who wrote it. Links to related
documents. Copyright data and the like.
Code:-
Output:-
<footer>
Copyright 2013 TOPS Technologies
</footer>
<nav></nav>
The nav element represents a section of a page that links to other pages or to parts within the page a
section with navigation links.
Not all links of a document must be in a <nav> element. The <nav> element is intended only for
major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to
omit the initial rendering of this content.
Code:<nav>
<a href="/css/" target="_blank">CSS</a> |
<a href="/html/" target="_blank">HTML</a>
|
<a href="/javascript/"
target="_blank">JavaScript</a> |
<a href="/sql/tutorial/"
target="_blank">SQL</a>
</nav>
Output:-
<figure></figure>
The figure element represents some flow content, optionally with a caption that is self contained and
is typically referenced as a single unit from the main flow of the document.
The element can thus be used to ammotate illustrations, diagrams, photos, code listing, etc., that are
referred to from the main content photos, code listing, etc., that are referred to from the main
content of the document, but that could, without affecting the flow of the document, be moved away
from that primary content e.g. to the side of the page, to dedicated pages, or to an appendix
Code:<figure>
<figcaption>TOPS Technologies</figcaption>
<img src=logo.jpg" alt=TOPS Technologes"
width="304" height="228">
</figure>
Output:-
<video></video>
Is a media element whose media data is ostensibly video data, possibly with associated audio data.
Code:<video width="320" height="240" controls>

<source src=Tops.mp4" type="video/mp4">
<source src=tops.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Output:-
<audio></audio>
The audio element is a media element whose media data is ostensibly audio data.
Code:<audio controls>
<source src="tops.ogg" type="audio/ogg">
<source src="tops.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Output:-
<embed></embed>
The embed element represents an integration point for an external (typically non HTML) application
or interactive content
Code:<embed src="helloworld.swf">
Output:-
<canvas></canvas>
Providing scripts with a resolution dependent bitmap canvas, which can be used for rendering graphs,
game graphics, or other visual images on the fly.
Code:<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
Output:-
Rectangle
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75); (fillRect(x,y,width,height))
Code:<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Output:-
Circle
arc(95,50,40,0,2 (arc(x,y,r,start,stop))
Code:<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
Output:-
Code:<<script type="application/x-javascript">
function displayCanvas()
{
var canvas =
document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 150, 75);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 30, 125, 75);
} }
</script>
</head>
<body onload="displayCanvas();">
<canvas id="myCanvas" width="300"
height="200">Your browser does not support the
canvas tag. At the time of writing, Firefox, Opera,
and Chrome support this tag.</p>
<p>Here's an <a
href="/pix/html_5/tags/html_canvas_tag.gif">ima
ge of what it's supposed to look
like</a>.</canvas>
</body>
</html>
Output:-
<meter></meter>
The meter element represents a scalar measurement within a known range or a fractional value for
example disk usage the relevance of a query result, or the fraction of a voting population to have
selected a particular candidate.
This is also known as a gauge.
Code:<meter value="2" min="0" max="10">2 out of
10</meter><br><br><br>
<meter value="0.6">60%</meter>
Output:-
<progress></progress>
The progress element represents the completion progress of a task.

The progress is either indeterminate indicating that progress is being made but that it is not clear
how much more work remains to be done before the task is complete(eg. Because the task is waiting
for a remote host to respond), or the progress is a number in the range zero to a maximum giving the
fraction of work that has so far been completed.
Code:Downloading now. Progress...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Output:-
<time></time>
The time element represents either a time on a 24 hour clock or a precise date in the proleptic
gregorian calendar, optionally with a time and a time zone offset.
this element is intended as a way to encode modern dates and times in a machine readable way so
that, for example, user agents can offer to add birthday reminders or scheduled events to the user's
calendar
Code:<p>On Saturdays, we open at
<time>09:00</time>.</p>
<p>The concert is <time datetime="2009-0218">next Wednesday</time>.</p>
<p>We finally hit the road at <time
datetime="2009-02-17T05:00-07:00">5am last
Tuesday</time>.</p>
Output:-
<details></details>
The details element represents a disclisure widget form which the user can obtain additional
information or controls.
Code:<details open="open">
<p>If your browser supports this element, it
should allow you to expand and collapse these
details.</p></details>
Output:-
<command></command>
The command element represents a command that the user can invoke.
Code:<script>
function save()
{
alert("Some javaScript....");
}
</script>
</head>
<body>
<menu>
<command type="command" label="Save"
onclick="save()">Save</command>
</menu>
<p><b>Note:</b> The command element is
currently only supported in IE9.</p>
</body>
</html>
Output:-
<menu></menu>
The menu element represents a list of commands.

Code:<menu type="toolbar">
<li>
<menu label="File">
<button type="button"
onclick="file_new()">New...</button>
onclick="file_open()">Open...</button>
onclick="file_save()">Save</button>
</menu>
</li>
<li> <menu label="Edit">
onclick="edit_cut()">Cut</button>
onclick="edit_copy()">Copy</button>
onclick="edit_paste()">Paste</button>
</menu>
</li>
</menu>
Output:-
Input Type: color
The date type allows the user to select a date.
Output:Code:-
<input type="color" name="color">
Input Type: date
The color type is used for input fields that should contain a color.
Output:Code:-
<input type=date" name=Date">
Input Type: Date time:
The datetime type allows the user to select a date and time
(with time zone).
Output:Code:-
<input type=datetime-local"
name=datetime">
Input Type: email:
The email type is used for input fields that should contain an e-mail address
Output:Code:-
<form action="demo_form.asp">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
Input Type: Month:
The month type allows the user to select a month and year.
Output:Code:-
<input type="month" name="bdaymonth">
Input Type: Number:
The number type is used for input fields that should contain a numeric value. You can also set
restrictions on what numbers are accepted:
Max, Min, Set, Value
Output:Code:-
Quantity (between 1 and 5): <input
type="number" name="quantity" min="1"
max="5">
</form>
Input Type: Range:
The range type is used for input fields that should contain a value from a range of numbers. You can
also set restrictions on what numbers are accepted.
Output:Code:-
<form action="demo_form.asp"
method="get">
Points: <input type="range" name="points"
min="1" max="10">
</form>
Input Type: Search:
The search type is used for search fields
Output:Code:-
<form action=index.html">
Search : <input type="search"
name=s"><br>
</form>
Input Type: Time:
The time type allows the user to select a time
Output:Code:<form action="demo_form.asp">
Select a time: <input type="time"
name="usr_time">
</form>
Input Type: url:
The url type is used for input fields that should contain a URL address. The value of the url field is
automatically validated when the form is submitted
Add your homepage: <input type="url"
name="homepage"><br>
</form>
Input Type: week:
The week type allows the user to select a week and year.
Select a week: <input type="week"
name="year_week">
</form>
Input Type: Autocomplete:
Specifies whether an <input> element should have autocomplete enabled
Output:Code:<form action="demo_form.asp"
autocomplete="on">
First name:<input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
</form>
Input Type: Accept:
Accept:- Specifies the types of files that the server accepts (only for type="file")
<input type="file" name="pic"
accept="image/*">
</form>
Input Type: Autofocus:
Specifies that an <input> element should automatically get focus when the page loads
First name: <input type="text"
name="fname" ><br>
name="lname" autofocus><br>
</form>
Input Type: form:
Specifies one or more forms the <input> element belongs to
Code:-
<form action="demo_form.asp" id="form1">

name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the
form element, but still part of the form.</p>
Last name: <input type="text" name="lname"
form="form1">
Output:-
Input Type: Formaction:
Specifies the URL of the file that will process the input control when the form is submitted (for
type="submit" and type="image")
Code:-
name="fname"><br>
name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit"
formaction="demo_admin.asp"
value="Submit as admin">
</form>
Output:-
Input Type: Height:
Specifies the height of an <input> element (only for type="image")
Code:-
name="fname"><br>
name="lname"><br>
<input type="image" src="img_submit.gif"
alt="Submit" width="48" height="48">
</form>
Output:-
Input Type: list:
Refers to a <datalist> element that contains pre-defined options for an <input> element
Code:-
<form action="demo_form.asp"
method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Output:-
Input Type: Multiple:
Specifies that a user can enter more than one value in an <input> element
Code:-
Select images: <input type="file"
name="img" multiple>
</form>
Output:-
Input Type: Pattern :
Specifies a regular expression that an <input> element's value is checked against
Code:-
Country code: <input type="text"
name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">
</form>
Output:-
Input Type: Placeholder:
Specifies a short hint that describes the expected value of an <input> element
Code:-
<input type="text" name="fname"
placeholder="First name"><br>
<input type="text" name="lname"
placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Output:-
Input Type: Required:
Specifies that an input field must be filled out before submitting the form
Code:-
Username: <input type="text"
name="usrname" required>
</form>
Output:-
Input Type: keygen:
The <keygen> tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
Code:-
<form
oninput="x.value=parseInt(a.value)+parseInt(
b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
Output:-

HTML 5

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

HTML 5

Uploaded by

Copyright:

Available Formats

Introduction

TextPad or TextWrangler or NotePad

syntax to specify DOCTYPE as follows: <!DOCTYPE html>

3.The <script> tag:

4. The <link> tag:

HTML5 specification is much Larger

Doc type has been simplified

HTML5 New elements

Web Forms 2.0 specification is integrated into HTML5

HTML5 New Tag

New applicaton Focused tags

The section element represents a generic section of a document application.

Code:<section style="border:1px solid; width:300px;" >

The header element represents a group of introductory or navigational aids.

The hgroup element represents the heading of a section.

Code:<video width="320" height="240" controls>

Code:<canvas id="myCanvas" width="200" height="100"

Code:<canvas id="myCanvas" width="200" height="100"

The progress element represents the completion progress of a task.

The menu element represents a list of commands.

Input Type: color

The date type allows the user to select a date.

<input type="color" name="color">

Input Type: date

<input type=date" name=Date">

Input Type: Date time:

Input Type: email:

Input Type: Month:

<input type="month" name="bdaymonth">

Input Type: Number:

Input Type: Range:

Input Type: Search:

The search type is used for search fields

Input Type: Time:

The time type allows the user to select a time

Input Type: url:

Input Type: week:

Input Type: Autocomplete:

Specifies whether an <input> element should have autocomplete enabled

Input Type: Accept:

Input Type: Autofocus:

Input Type: form:

Specifies one or more forms the <input> element belongs to

<form action="demo_form.asp" id="form1">

Input Type: Formaction:

Input Type: Height:

Specifies the height of an <input> element (only for type="image")

Input Type: list:

Input Type: Multiple:

Input Type: Pattern :

Specifies a regular expression that an <input> element's value is checked against

Input Type: Placeholder:

Input Type: Required:

Input Type: keygen:

You might also like