HTML 5

HTML 5HTML 5

Giuseppe AttardiGiuseppe Attardi

Università di PisaUniversità di Pisa

Slides from Lachlan Hunt

HTML5 in 1 SlideHTML5 in 1 SlideGet started: Get started: http://www.alistapart.com/articles/previewofhtml5http://diveintohtml5.org

DOCTYPE: <!doctype html>DOCTYPE: <!doctype html>

NEW TAGSNEW TAGS<header> <footer> <nav> <article> <section> <aside><header> <footer> <nav> <article> <section> <aside>(But IE 6,7--even IE 8!—doesn't support styling these tags.)(But IE 6,7--even IE 8!—doesn't support styling these tags.)

AUDIO/VIDEOAUDIO/VIDEO<audio> <video><audio> <video>(But then the codecs need to work, sometimes ogg, sometimes mp3…)(But then the codecs need to work, sometimes ogg, sometimes mp3…)

FEATURESFEATURESlocalStoragelocalStorageNew input types (great for mobile, see New input types (great for mobile, see http://diveintohtml5.org/forms.html ) )

Modernizr Modernizr http://www.modernizr.com

New Structure and New Structure and SemanticsSemantics

<header><header>

<nav><nav>

<aside><aside>

<article><article>

<footer><footer>

<time><time>

<figure><figure>

<legend><legend> <meter><meter>

<section><section><h1><h1>

<h1><h1>

<h1><h1>

Element ImplementationsElement Implementations

No native support, but can be styled with CSS No native support, but can be styled with CSS inin Opera Firefox 3.0 Safari IE 6 and 7 using simple createElement() hack

New MultimediaNew Multimedia

VideoVideo

Native video support Native video support in browsersin browsers

DOM APIs for DOM APIs for providing custom providing custom interfacesinterfaces

No more dependence No more dependence upon Flashupon Flash

Video ImplementationsVideo Implementations

Opera (Ogg Theora)Opera (Ogg Theora) Safari (All QuickTime Safari (All QuickTime

formats)formats) Firefox (Ogg Theora)Firefox (Ogg Theora)

CanvasCanvas

Dynamically draw Dynamically draw graphics and textgraphics and text

Graphics-oriented Graphics-oriented DOM APIsDOM APIs

Canvas ImplementationsCanvas Implementations

OperaOpera FirefoxFirefox SafariSafari IE 6+ using IE 6+ using

ExplorerCanvas scriptExplorerCanvas script

Documents

HTML 5