Introduction To HTML5

Transcription

Introduction to HTML5

Where to start learningabout HTML5?

HTML 5 differencesfrom HTML 4http://w3.org/TR/html5-diff/

HTML 5 ― HTML esources/w3c/TR/html5-diff/

HTML5 differences Syntax simplifications MathML and SVG integration New elements/attributes added Removed old elements/attributes Added new APIs for scripting

Syntax simplifications

!DOCTYPE html PUBLIC"-//W3C//DTD XHTML TD/xhtml1-transitional.dtd"

!DOCTYPE html

meta http-equiv "Content-Type"content "text/html;charset Shift JIS"

meta charset "Shift JIS"

New elements video & audio (no plugins) canvas (scriptable image) ruby (ふりがな) article , section , header more.

New attributes draggable (drag-and-drop) contenteditable (editable pages) spellcheck (catch spelling errors) new form attributes (for client-side validation, plus new formcontrols such as date picker, etc.)

Elements and attributesthat have beenremoved or obsoleted frame , frameset a name more.

New APIs for scripting API for video & audio 2D drawing API for canvas getElementsByClassName() innerHTML more.

Design principles

HTML design principleshttp://w3.org/TR/html-design-principles/

HTML s/w3c/TR/2007/WDhtml-design-principles-20071126/

HTML design principles Support existing content Ensure interoperability Precisely define UA behavior Handle errors (non-draconian) Evolution not revolution

Very important point:HTML5 includes XHTML

Frequently AskedQuestions (FAQ) aboutthe future of XHTMLhttp://www.w3.org/2009/06/xhtmlfaq.html

XHTML の今後に関する 9/06/xhtml-faq.html

Very important point:HTML5 focuses onWeb applications(not just Web documents)

About error handling.

Which of these are errors? Well-formed XML: input disabled "disabled"/ Empty attribute: input disabled Without quotes: input value yes Single quotes: input type 'checkbox'/ Double quotes: input name "be evil"/

This is a real error i b misnested tags /i /b

HTML5 defines howbrowsers can handle realerrors interoperably andgracefully.

Why is it important tohandle errors?

More than 93% ofAlexa Top 500 sitescontain are notconformant XHTML

We need to specify errorhandling behavior to ensureinteroperability “even in the faceof documents that do not complyto the letter of the specifications”.

Authors will write invalidcontent regardless of what wespec. So the spec states “whatauthors must not do, and thentells implementors what theymust do when an authordoes it anyway”.

HTML5 Validatorhttp://validator.nu

That’s it.

Thank you.

Jul 24, 2009 · HTML5 differences Syntax simplifications MathML and SVG integration New elements/attributes added Remo