HTML5

Prepared & Presented By :- Harsha.D.Vavge

BCA(6th) SEM
 Contents
 Introduction
 History
Why use HTML5
Features and APIs
Features
Differences from HTML 4.01 and XHTML 1.x
Logo
HTML All Versions
HTML5 Tags
Browser Supports
HTML5 Example
Conclusion
References
 Introduction
HTML5 is a markup language used for structuring and presenting content on
the World Wide Web. It is the fifth and current major version of
the HTML standard.

It was published in October 2014 by the World Wide Web Consortium (W3C) to
improve the language with support for the latest multimedia, while keeping it both
easily readable by humans and consistently understood by computers and devices
such as web browsers, parsers, etc. HTML5 is intended to subsume not
only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

Many new syntactic features are included. To natively include and

handle multimedia and graphical content, the
new <video>, <audio> and <canvas> elements were added, and support for
scalable vector graphics (SVG) content and MathML for mathematical formulas.
 Many new syntactic features are included. To natively include and
handle multimedia and graphical content, the
new <video>, <audio> and <canvas> elements were added, and support for
scalable vector graphics (SVG) content and MathML for mathematical formulas.

To enrich the semantic content of documents, new page

structure elements such
as <main>, <section>, <article>, <header>, <footer>, <asi
de>, <nav> and <figure>, are added. New attributes are
introduced, some elements and attributes have been
removed, and others such as <a>, <cite> and <menu> have
been changed, redefined or standardized.
 History
The Web Application Technology Working Group (WHATWG) began work on the
new standard in 2004. At that time, HTML 4.01 had not been updated since
2000,and the World Wide Web Consortium (W3C) was focusing future
developments on XHTML 2.0. In 2009, the W3C allowed the XHTML 2.0
Working Group's charter to expire and decided not to renew it.W3C and
WHATWG are currently working together on the development of HTML5.

The Mozilla Foundation and Opera Software presented a position paper at a World
Wide Web Consortium (W3C) workshop in June 2004,focusing on developing
technologies that are backward compatible with existing browsers, including an
initial draft specification of Web Forms 2.0
 Why use HTML5
It is enriched with advance features which makes it easy and
interactive for designer/developer and users.
It allows you to play a video and audio file.
It allows you to draw on a canvas.
It facilitate you to design better forms and build web applications that
work offline.
It provides you advance features for that you would normally have to
write JavaScript to do.
The most important reason to use HTML 5 is, we believe it is not
going anywhere. It will be here to serve for a long time according to
W3C recommendation.
 Features and APIs
The W3C proposed a greater reliance on modularity as a key part of the
plan to make faster progress, meaning identifying specific features, either
proposed or already existing in the spec, and advancing them as separate
specifications. Some technologies that were originally defined in HTML5
itself are now defined in separate specifications:
HTML Working Group – HTML Canvas 2D Context;
Web Apps Working Group – Web Messaging, Web workers, Web
storage, WebSocket, Server-sent events, Web Components(this was not part
of HTML5 though); Note that the Web Applications Working Group was
closed in October 2015 and its deliverables transferred to the Web Platform
Working Group (WPWG).
IETF HyBi Working Group – WebSocket Protocol;
WebRTC Working Group – WebRTC;
Web Media Text Tracks Community Group – WebVTT
 Features
• Markup
HTML5 introduces elements and attributes that reflect typical
usage on modern websites. Some of them are semantic
replacements for common uses of generic block (<div>) and
inline (<span>) elements, for example <nav> (website navigation
block), <footer> (usually referring to bottom of web page or to
last lines of HTML code), or <audio> and <video> instead
of <object>.Some deprecated elements from HTML 4.01 have
been dropped, including purely presentational elements such
as <font> and <center>, whose effects have long been superseded
by the more capable Cascading Style Sheets. There is also a
renewed emphasis on the importance of DOM scripting(e.g.,
JavaScript) in Web behavior.
The HTML5 syntax is no longer based on SGML despite the similarity of its
markup. It has, however, been designed to be backward compatible with common
parsing of older versions of HTML. It comes with a new introductory line that
looks like an SGML document type declaration, <!DOCTYPE html>, which
triggers the standards-compliant rendering mode. Since 5 January 2009, HTML5
also includes Web Forms 2.0, a previously separate WHATWG specification.
• New APIs
HTML5 specifies scripting application programming interfaces (APIs) that can be
used with JavaScript. Existing Document Object Model (DOM) interfaces are
extended and de facto features documented.
• There are also new APIs, such as:
 Canvas;

 Timed Media Playback;

 Offline;

 Editable content;

 Drag and drop;

 History;

 MIME type and protocol handler registration;

 Micro data;

 Web Messaging;

 Web Storage – a key-value pair storage framework that provides behavior similar to cookies but with larger
storage capacity and improved API.
• Error handling
 HTML5 is designed so that old browsers can safely ignore new HTML5
constructs. In contrast to HTML 4.01, the HTML5 specification gives detailed
rules for lexing and parsing, with the intent that compliant browsers will
produce the same results when parsing incorrect syntax.Although HTML5 now
defines a consistent behavior for "tag soup" documents, those documents are not
regarded as conforming to the HTML5 standard.

• Popularity
 According to a report released on 30 September 2011, 34 of the world's top 100
Web sites were using HTML5 – the adoption led by search engines and social
networks. Another report released in August 2013 has shown that 153 of
the Fortune 500 U.S. companies implemented HTML5 on their corporate
websites.
 Differences from 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, data, datalist, details, emb
ed, fig
caption, figure, footer, header, keygen, mark, meter, nav, output, progress, rp, rt, ruby,
section, source, summary, time, track, video, wbr
New types of form controls: dates and times, email, url, search, number, range, tel, color

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

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

Deprecated elements will be dropped

altogether: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, nofr
ames, strike, tt

W3C Working Group provides "HTML5 differences from HTML 4",which provides a
complete outline of additions, removals and changes between HTML5 and HTML 4.
 Logo
 the W3C introduced a logo to represent the use of or interest in
HTML5. Unlike other badges previously issued by the W3C, it
does not imply validity or conformance to a certain standard. As
of 1 April 2011, this logo is official.

When initially presenting it to the public, the W3C announced

the HTML5 logo as a "general-purpose visual identity for a
broad set of open web technologies, including HTML5, CSS,
SVG, WOFF, and others".
Some web standard advocates, including The Web Standards Project,
criticized that definition of "HTML5" as an umbrella term, pointing
out the blurring of terminology and the potential for
miscommunication. Three days later, the W3C responded to
community feedback and changed the logo's definition, dropping the
enumeration of related technologies . The W3C then said the logo
"represents HTML5, the cornerstone for modern Web applications".
 HTML All Versions
• The Hypertext Mark-up Language (HTML) is an evolving language, with
different versions supporting different features and each new version is
given a version number. The first version of HTML did not have a version
number and it was just called Hypertext Mark-up Language (HTML).
During the period between 1990 - 1999 , we can see a lot of activity
happened around HTML , with version 2.0 to version 5 .
• Major Versions Here :-
HTML2.0
HTML 2.0 is released in 1995 and it was the standard for website design until
January 1997 and defined many core HTML features for the first time. HTML 2.0
starts supports core HTML elements and features such as tables and forms with
limited set of form elements such as text boxes, and option buttons .

HTML 3.2
HTML 3.2 finalized by the W3C in early 1997. This version included support for
creating tables and expanded options for form elements. It also allowed web pages
to include complex mathematical equations. This version of HTML supports many
presentation-focused elements such as font, as well as early support for some
scripting features.
HTML 4.01
HTML 4.01 is the current official standard. This version is very stable, having
been released in December 1999. This version added support for style sheets and
scripting ability for multimedia elements.

HTML 5
The HTML5 specification that we see today has been published as a working draft
and it is not yet final. HTML5 is still a work in progress, and all major browsers
support many of the new HTML5 elements and APIs. Its core aim have been to
improve the language with support for the latest multimedia while keeping it
easily readable by humans and consistently understood by computers and devices.
 HTML5 Tags
Tags Specification
<article> Specifies an article
<aside> Specifies content aside from the page content
<audio> Specifies sound content
<bdi> For bi-directional text formatting
<canvas> Specifies a table caption
<data> Allows for machine-readable data to be
provided
<datalist> Specifies an "autocomplete" dropdown lis
 Tags Specification
<details> Specifies details of an element
<dialog> Specifies that part of an application is
interactive.
<embed> Specifies external application or interactive
content
<figcaption> Specifies caption for the figure element.
<figure> Specifies a group of media content, and their
caption
<footer> Specifies a footer for a section or page
<header> Specifies a group of introductory or
navigational aids, including hgroup elements
 Tags Specification
<hgroup> Specifies a header for a section or page.
<keygen> Generates a key pair
<main> Specifies the main content area of an HTML document.
<mark> Specifies marked text
<Menu> Specifies a menu list
<MenuItem> Specifies a command that a user can invoke from a
popup menu.
<meter> Specifies measurement within a predefined range
<nav> Specifies navigation links
<Output> Specifies some types of output
 Tags Specification
<progress> Specifies progress of a task of any kind
<rb> Marks the base text component of a ruby annotation.
<rp> Used for the benefit of browsers that don't support ruby
annotations
<rt> Specifies the ruby text component of a ruby annotation.
<rtc> Marks a ruby text container for ruby text components in a
ruby annotation.
<ruby> Specifies a ruby annotation (used in East Asian
typography)
<source> Specifies media resources
<summary> Specifies a summary / caption for the <details> element
<template> Declares HTML fragments that can be cloned and
inserted in the document by script.
 Tags Specification
<time> Specifies a date/time
<track> Specifies a text track for media such as video and
audio
<video> Specifies a video
<wbr> Specifies a line break opportunity for very long words
and strings of text with no spaces.

And Many Other Type Of Tags Are Available into HTML5 Which Gives
Us Different Facilities
 Browser Supports
All browser support HTML5 to some extent, but no browsers support it
completely. HTML, for those not familiar, is a collection of tags and attributes that
are used to markup a document to be processed by a browser. The tags range from
paragraph tags to form tags and image tags. HTML5 includes a large amount of
new tags and attributes and each browser and browser version supports a different
set of tags and attributes
There Are Major Browser Who Supports HTML5:-
HTML5 Example
 Conclusion
Despite inconsistent browser implementations of its features, HTML5 is an
exciting technology for creating new and powerful browser-based applications. As
I previously mentioned, these applications can even run on Smartphone. If you're
not convinced about developing HTML5-based Smartphone apps, check out Alex
Kissinger's “How to Make an HTML5 iPhone App” article.
As an additional incentive for developing your own HTML5 applications, Mozilla
recently announced (at the time of writing) that it's opening an app store for selling
or giving away web applications. Check out The Register's “Mozilla Preempts
Google With 'Open' Web App Store Prototype” article to learn more about
Mozilla's announcement.
Now that you've gained some insight into HTML5 and have learned about
designing HTML5 applications, and given the fact that there's a possibility to
monetize your creations, there's no reason to delay jumping into HTML5
application development.
 References
http://www.informit.com/articles/article.aspx?p=1659409&seq
Num=4
https://en.wikipedia.org/wiki/HTML5
https://www.slideshare.net/niharikagupta54966/html5ppt-
25757426
https://www.w3schools.com/html/html_intro.asp
https://www.html-5-tutorial.com/all-html-tags.htm