Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
125 views

HTML5 Slides

HTML5 introduces several new features and elements that are not present in HTML4, such as <video>, <audio>, and <canvas> elements for embedding multimedia and graphics. It also simplifies some syntax, such as replacing DTDs with a simple <!DOCTYPE html> declaration. HTML5 was designed with a focus on web applications as well as documents. It aims to ensure compatibility while defining how browsers should handle errors in invalid documents to maintain interoperability.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
125 views

HTML5 Slides

HTML5 introduces several new features and elements that are not present in HTML4, such as <video>, <audio>, and <canvas> elements for embedding multimedia and graphics. It also simplifies some syntax, such as replacing DTDs with a simple <!DOCTYPE html> declaration. HTML5 was designed with a focus on web applications as well as documents. It aims to ensure compatibility while defining how browsers should handle errors in invalid documents to maintain interoperability.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Introduction to HTML5

Where to start learning


about HTML5?

HTML5 differences
from HTML4

http://w3.org/TR/html5-diff/

HTML5 HTML4

http://standards.mitsue.co.jp/
resources/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 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/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 form


controls such as date picker, etc.)

Elements and attributes


that have been
removed 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 principles


http://w3.org/TR/html-design-principles/

HTML
http://standards.mitsue.co.jp/
resources/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 Asked
Questions (FAQ) about
the future of XHTML
http://www.w3.org/2009/06/xhtmlfaq.html

XHTML
FAQ

http://standards.mitsue.co.jp/
resources/w3c/2009/06/
xhtml-faq.html

Very important point:


HTML5 focuses on
Web 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 how


browsers can handle real
errors interoperably and
gracefully.

Why is it important to
handle errors?

More than 93% of


Alexa Top 500 sites
contain are not
conformant XHTML

We need to specify error


handling behavior to ensure
interoperability even in the face
of documents that do not comply
to the letter of the specifications.

Authors will write invalid


content regardless of what we
spec. So the spec states what
authors must not do, and then
tells implementors what they
must do when an author
does it anyway.

HTML5 Validator

http://validator.nu

Thats it.

Thank you.

You might also like