This document provides an introduction to HTML5 and its new features. It discusses HTML5 as the successor to HTML 4.01 and XHTML 1.1, bringing new tags, features, and APIs. These include new structural elements, forms and validation, native audio and video, Canvas API, web storage, offline applications, geolocation, and drag and drop. It also outlines some of the new and updated HTML5 elements and semantic elements such as article, aside, footer, nav, progress, and meter. Examples are given of how to implement these new features in HTML5.

1. GETTING STARTED WITH HTML5
Presented By,
Jijo Abraham

2. What Is HTML5?
• Successor of HTML 4.01 and XHTML 1.1
• It comes with new tags, features and APIs
• Below is a non exhaustive list of features that tend to be labelled as "HTML5" in
the medias:
• New structural elements (<header>, <footer>, <nav> and more)
• Forms 2.0 and client-side validation
• Native browser support for audio and video (<video>, <audio>)
• Canvas API and SVG
• Web storage
• Offline applications
• Geolocation
• Drag & Drop
• Web Workers
• New communications API (Server Sent Events, Web Sockets, …)

3. New and Updated HTML5 Elements
• HTML5 introduces 28 new elements:
• <section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <fig
ure>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progress>
, <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details
>,<summary>, <datalist>, <keygen> and <output>
• An HTML page first starts with the DOCTYPE declaration
• HTML5 also update some of the previous existing elements to better
reflect how they are used on the Web or to make them more useful such as:
• The <a> element can now also contain flow content instead of just phrasing
content
• The <hr> element is now representing a paragraph-level thematic break
• The <cite> element only represent the title of a work
• The <strong> element is now representing importance rather than strong
emphasis

4. New Semantic Elements
• <nav>: Represents a major navigation block. It groups links to other pages or to
parts of the current page.
<nav> does not have to be used in every place you can find links.
For instance, footers often contains links to terms of service, copyright page and
such, the <footer> element would be sufficient in that case
• <aside>: The "aside" element is a section that somehow related to main content,
but it can be separate from that content

5. New Semantic Elements
• <article>: The web today contains a ocean of news articles and blog entries. That
gives W3C a good reason to define an element for article instead of <div
class="article">.
• We should use article for content that we think it can be distributable.
Just like news or blog entry can we can share in RSS feed
• "article" element can be nested in another "article" element.
• An article element doesn't just mean article content. You can
have header andfooter element in an article. In fact, it is very common to
have header as each article should have a title.

6. New Semantic Elements
<footer>: Similarly to "header" element, "footer" element is often referred to the
footer of a web page. Well, most of the time, footer can be used as what we thought.
Please don't think you can only have one footer per web document, you can have a
footer in every section, or every article.

7. New Semantic Elements
<Progress>: The new "progress" element appears to be very similar to the
"meter" element. It is created to indicate progress of a specific task.
The progress can be either determinate OR interderminate. Which means,
you can use "progress" element to indicate a progress that you do not even know
how much more work is to be done yet.

8. New Semantic Elements
<meter>: "Meter" is a new element in HTML5 which represenet value of a known
range as a gauge. The keyword here is "known range". That means, you are only
allowed to use it when you are clearly aware of its minimum value and maximum
value.
<mark>: The mark <mark> element represents a run of text in one document
marked or highlighted for reference purposes, due to its relevance in another
context.
Basically, it is used to bring the reader's attention to a part of the text that
might not have been
<figure>: The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its
position is independent of the main flow, and if removed it should not affect the flow
of the document

9. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="UTF-8">
<style> </style> // for header and article and img
<script> </script>
</head>
<body>
content: header, article for each site
</body>
</html>

10. New Features
• Canvas element for drawing
• Video/audio elements for media playback
• Better support for local offline storage
• New content specific elements, like article,
footer, header, nav, section
• New form controls, like calendar, date, time,
email, url, search

11. Older versions Vs. HTML5
Old version:
• It requires plug-ins like Flash to operate various music
and video files.
• It has been considered an interactive form that allows
images and objects to be embedded.
• HTML is a W3C recommendation that stands for World
Wide Web Consortium.
• It lacks canvas feature for drawing.
• In HTML, cookies are used for storing login and web
browsing history. For large amount of data storage
cookies has not been considered suitable option.

12. Older versions Vs. HTML5
HTML5:
• It can play audio-video files and supports various
formats.
• HTML5 includes interactive documents that functions
for embedding graphics.
• HTML 5 is not a W3C recommendation yet
• It has initiated Canvas feature that uses JavaScript to
draw graphics on a web page and is useful to control
pixels.
• Two new storage methods have also been introduced in
HTML5 that include local storage and session storage.
The data is not passed on by every server request, but
used only when asked for. So, this makes it possible to
store large amounts of data without affecting the
website's performance.

13. Applications (HTML5 features )
• Favorite sites
• Dice game: drawing arcs & rectangles
• Bouncing ball: drawing, including gradient, form
validation, timed events
• Cannonball & Slingshot: drawing lines & images, mouse
events, rotation & translation, programmer-defined
objects
• Memory polygons & pictures: drawing, mouse events
(clicking on card), timing

14. Applications (HTML5 features )
• Quiz: dynamically created HTML markup, mouse events
on elements, video
• Mazes: mouse events, drawing, localStorage, radio
buttons
• Rock, Paper, Scissors: drawing, audio
• Hangman: drawing lines and arcs (ovals), dynamic HTML
markup
• Blackjack: key events, drawing images, footer