This presentation is for Web designing students. Presentation Topic is HTML - 5 Introduction. This includes History of HTML, What is HTML 5, Goals of HTML 5, Difference between HTML 4 and HTML 5, Semantic Elements, HTML 5 New Inputs, Other new features, Key features of HTML 5 depicted by 2 pictures, HTML 5 web storage - Local storage and session storage, tags that are not supported in HTML 5.

1. THE IIS UNIVERSIT
WDT – 334
SEMINAR PRESENTATION
SUBMITTED TO –
Mrs. Harshita
Bhargava
SUBMITTED BY –
Aayushi Chhabra
ICG/2013/14899
WDT – Advance

2. HTML5 is much more tolerant and can handle markup from all
the prior versions.
After HTML 4.01 was released, focus shifted to XHTML and its
stricter standards.
XHTML 2.0 had even stricter standards than 1.0, rejecting web
pages that did not comply. It fell out of favor gradually and was
abandoned completely in 2009.
2012
1991
2002
-
2009
2000
1995
1997
1999
HTML first published
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5 Though HTML5 was published officially in 2012, it has been in
development since 2004.

3.  HTML5 is a markup language used for structuring
and presenting content on the World Wide Web.
 It is the newest and current version of HTML.
 It incorporates all features from earlier versions of HTML, including the stricter
XHTML.
 HTML5 is also a potential candidate for cross-platform mobile applications, with
features having been designed with low-powered devices such as smartphones and
tablets taken into consideration.
 It is still a work in progress. No browsers have full HTML5 support. It will be many
years – perhaps not until 2018 or later - before being fully defined and supported.

4.  Support all existing web pages. With HTML5, there is no requirement to go
back and revise older websites.
 Reduce the need for external plugins and scripts to show website content.
 Improve the semantic definition (i.e. meaning and purpose) of page
elements.
 Make the rendering of web content universal and independent of the device
being used.
 Handle web documents errors in a better and more consistent fashion.

5. HTML 4 HTML 5
1. HTML 4 uses common
structures like headers and
footers
1. HTML 5 uses new
structures such as drag,
drop and much more
2. HTML 4 can not embed
video or audio directly and
makes use of flash player
for it.
2. HTML 5 can contain
embedded video and video
without using flash player.

6. HTML 4 HTML 5
3. HTML 4 cannot handle
inaccurate syntax
3. HTML 5 is capable of
handling inaccurate
syntax
4. HTML 4 has traditional
API’s which does not
include canvas and
content editable API’s
4. HTML 5 introduced
many new API’s which
facilitate flexibility of
web pages.
5. In HTML 4, local storage
is not possible and tags
that can handle only one
dimension are present
5. In HTML 5, new tags and
new features like local
storage are enhanced

7.  Semantic elements are elements with a meaning described to both the
developer and the browser.
 Example of non-semantic element – <div>, <span> - tells nothing about its
content
 Example of semantic element - <form>, <table> and <img> - Clearly
defines its content
 HTML 5 offers new semantic elements to clearly define different parts of a
web page:

8. • <header> - specifies a header for a document or section.
• <nav> - defines a set of navigation links.
• <section> - defines a section in a document.
• <article> -
specifies independent, self-contained content. Ex. : Blog post,
newspaper etc.
• <aside> -
defines some content aside from the content it is placed in (like
a sidebar).
• <footer> -
specifies a footer for a document or section. It contains the
author of the document, copyright information,, contact
information, etc.
• <figure>
<figcaption>
- images and captions can be grouped together.
• <details> - Defines additional details that the user can view or hide.
• <summary> - Defines a visible heading for a <details> element.
• <main> - Specifies the main content of a document.

9.  Color Your favorite color: <input color=“red” name=“fav” />
 Date Birthday: <input type=“date” name=”bday” />
 Datetime Birthday (date & time): <input type=“Datetime” name=“dt” />
 Email E-mail: <input type=“email” name=“useremail” />
 Month Birthday: <input type=“month” name=“bdaymonth” />
 Number Quantity: <input type=“number” name=“quantity” />
 Range Rank: <input type=“range” name=“points” min=“0” max=“10” />
 Tel Telephone: <input type=“tel” name=“usertel” />
 Time Select a Time: <input type=“time” name=“usertime” />
 URL Homepage: <input type=“url” name=“homepage” />

10.  Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version of CSS)
 More advanced features for web developers, such as data storage
and offline applications.

12.  HTML 5 offers two new objects for storing data on the client:
o localStorage – stores data with no time limit
o SessionStorage – stores data for one session
 HTML 5 uses JavaScript to store and access the data.

13.  The local storage object stores the data with no time limit.
 Included in MySQL binary distributions (except on windows), invoke
configure with the – with – csv – storage – engine option to enable it.
<script type=“text/JavaScript”>
localStorage.lastname=“Smith”;
document.write(localStorage.lastname);
</script>

14.  The session storage object stores the data for one session.
 The data is deleted when the user closes the browser window.
<script type=“text/JavaScript”>
sessionStorage.lastname=“Smith”;
document.write(sessionStorage.lastname);
</script>

16. <acronym> <applet>
<basefont> <big>
<center> <dir>
<font> <frame>
<frameset> <noframes>
<strike> <tt>

17. THANK
YOU