1. Prof. Erwin M. Globio

2. <overview>
• There’s a lot of information on the web
• Most of that information is text/html
• Most (>95%) of that HTML is syntactically
invalid

3. <introduction>
• New version of HTML
• Initial work by the WHATWG (web Hypertext
Application Technology Working Group (2004)
• People involved are Apple, Mozilla, Opera, Google
are the major contributors
• Work-in-progress recently adopted by the W3C
(2007)

4. <conclusion>
• HTML is important and isn’t going away any time soon
• We should evolve HTML rather than ditch it
• But the vast legacy creates problems
• HTML 4 – 1997
– Underspecified
– Inconsistent
– Does not match reality
– Missing features needed to compete with propriety technologies
(Flash, Silverlight, etc.)
• XHTML 2
– Requires XML
– Not backward compatible (cannot be implemented in current
browsers)

5. hypertext
markup
language
AGENDA
What is HTML5? Does it include CSS3
Why has HTML5 been developed?
Which is better for designers—HTML5 or
FLASH?
What now lies ahead for FLASH and HTML5?
Why HTML5?
What does HTML5 mean to Web designers?

6. WHY HAS HTML5 BEEN
DEVELOPED
• To address issues inherent to HTML/XHTML
allowing web to move forward.
• Attempts to provide the tools to support the
new levels of interaction users demand
• To address the different places on the web

7. The story… 2009-07-02
Today the Director announces that when
the XHTML 2 Working Group charter expires as
scheduled at the end of 2009, the charter will not
be renewed. By doing so, and by increasing
resources in the HTML Working Group, W3C
hopes to accelerate the progress of HTML 5 and
clarify W3C's position regarding the future of
HTML. A FAQ answers questions about the future
of deliverables of the XHTML 2 Working Group,
and the status of various discussions related to
HTML.
W3C

8. HTML5 and CSS 3
What is new
anyway?

9. What are the features…HTML5
• Revised and improved semantics including section Tags
• audio, video tags and API to direct HTML embedding
• canvas element for scriptable graphics rendering on the fly
• Native drag and drop API
• Local storage support to make applications even more
• desktop-like
• Cross-document messaging
• Geo Location API: especially important for mobile applications

10. http://html5gallery.com/

11. http://wave.google.com/

12. What are the features…CSS3
• Extended set of selectors such as :first-of-type
or :last-of-type
• Enhanced support for background and border
• Flexible Box Layout
• Multi-Columns and Templates native support
• 2D and 3D Transformations
• Transitions and Animations
• Media Queries

13. The obvious question…
What the hell do we need
HTML5 ?

14. “HTML 5 will enable better cross-browser
compatibility and better support for ‘Web
2.0-style’ Web applications in addition to
documents.”
Brendan Eich
CTO, Mozilla

15. HTML5 will have an
application cache that is capable
of storing all resources in your
Web app so that the browser can
load them and use them even
when you’re offline

16. HTML5 enables
mobile and desktop Web
site designers to deliver
the advantages of client-
side and server-side
development to their
users simultaneously.

17. API development and
workability in the browsers will take
a leap forward.

18. Problems…
• Not backwards-compatible?
• extensible? - questionable
• <P> = <p> ...and... <div class=”foo”> = <DIV
class=foo> meaning not that strict
• removal of certain tags—like <acronym>
• removal of access keys? This could set back
the usability/accessibility of markup (or, there
could be good reasons for doing this)

19. What does HTML5 mean to Web
designers?
• new tags for semantic layout
• improved micro-formatting
• new tags for incorporating rich media
• new tags for APIs, applications

20. What about browser support?
• Opera 9.x (supposedly) offers best support
• Safari 3.x - sketchy (best support in my
experience)
• Firefox 3.x - sketchy
• Chrome? - sketchy
• IE8 - veeerrrry sketchy
• IE7 - nope
• IE6? (LOL!)

21. New Tags <nav>
<nest>
<article> <output>
<aside> <progress>
<audio> <datatemplate> <source>
<canvas> <embed> <time>
<command> <event-source> <video>
<datagrid> <figure>
<datalist> <footer>
<header>
<mark>
<meter>

22. The doctype
<!DOCTYPE HTML>
HTML5

23. The doctype
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xht
ml1/DTD/xhtml1-
strict.dtd">
Html/xHTML

24. The structure…
<!DOCTYPE charset="UTF-8">
<head> HTML>
<html lang="en">
<meta
<title>HTML5</title>
</head>
<body>
</body>
</html>
HTML5

25. The layout
div=”header”
div=”nav”
div=”section”
div=”article” div=”sidebar”
div=”footer”
Html/xHTML

26. The layout
<header>
<nav>
<section>
<article> <aside>
<footer>
HTML5

27. What does it all mean?
• It’s a work in progress
• It’s going to be awhile before we’re using
HTML5
• It may turn up in mobile browsers first
• HTML5 will lead to browser-based apps that
are more powerful and more responsive

28. WHICH IS BETTER FOR DESIGNER –
HTML5 OR FLASH?
• Interactivity
• Client-side data rich application
• Games

29. WHAT NOW LIES AHEAD FOR
HTML5 AND FLASH?
This is all for you to
contemplate…

30. Useful Websites
• http://erwinglobio.wix.com/ittraining
• http://ittrainingsolutions.webs.com/
• http://erwinglobio.sulit.com.ph/

31. <Thank you!>
Prof. Erwin M. Globio, MSIT
IT Training Specialist
Mobile Number: 09393741359
09323956678
Email Address: erwin_globio@yahoo.com
Skype Id: erwinglobio