More on HTML5 Darren Wood @darren | http://dontcom.com
More On Html 5
May 09, 2015
A brief outline on some of the new elements available in HTML 5 and how to start using them now.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
More on HTML5Darren Wood
@darren | http://dontcom.com
What is HTML 5?
‐nextmajorrevisionofHTML‐from1997to2006workonHTMLwithintheW3CwasfocusedexclusivelyonXHTML‐in2004withtheWebHypertextApplicaJonTechnologyWorkingGroup(WHATWG)formedasabreak‐awayfromtheW3C‐developedthecruxofHTML‐maindudeisIANHICKSON‐firstdraUappeared22Jan2008W3C‐twovariantsofsamelanguage;classicHTML(HTML5)orXHTMLvariant(XHTML5).firstJmeHTMLandXHTMLhavebeendevelopedinparallel‐HTMLisagamechangerespinthewebappandRIAareas...
HTML5 Design Principles
Support existing content
Ensure interoperability
Handle errors
Evolution not revolution
- Support existing content- Ensure interoperability- Precisely define UA behavior- Handle errors- Evolution not revolution
The problem with the current setup...
current setup is XHTML/XML
"The attempt to get the world to switch to XML, including quotes
around attribute values and slashes in empty tags and namespaces all
at once didn't work"
- TBL
“Authors will write invalid content regardless of what we spec. So the spec states what authors must not
do, and then tells implementers what they must do when an author
does it anyway”
- Ian Hickson
More than 90% of Alexa Top 500 sites
are not valid
The solution...
Don't get hung up on the syntax
<AHREF=contact.htmlclass=”yes”>
<inputTYPE=”button”value=FOO>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
HTML
XHTML
- html 5 simple doctype- xhtml 5 strict xml rules, must be application/xml or application/xhtml+xml, no doctype required
<!DOCTYPEhtml><htmllang="en"><head><metacharset=utf‐8><title>HTML5Demo</title></head><body><header><h1>Logoetc</h1></header><nav><p>Menu</p></nav><section><h1>Section</h1><article><p>article1</p></article></section><aside><h2>Someextracontent</h2></aside><footer><p>Copyright©2009.</p></footer></body></html>
In the real world...
Semantic class names
HTML5 shiv
<style>figure{border:1pxinset#AAA;padding:4px;}</style><script>document.createElement("figure");</script>
tinyurl.com/html5-scaffold
Audio & Video
<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp"autobuffercontrolsposter="whale.png"><p>TrythispageinSafari4!Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">downloadthevideo</a>instead.</p></video>
Codec Shit-fight.
OGG Theora & H.264
the plan was to support OGG Theora & H.264
OGG Theora & H.264
the plan was to support OGG Theora & H.264
The deal with OGG
open source and free licensingBig Boys (Apple, Google) are generally scared of OS stuffno widespread hardware support (means mobile is out)lack of quality compared to H.264 ??
The deal with H.264
patent owned by MPEG (Motion Picture Experts Group)OS companies (Mozilla) reckon it's too priceypaying the licence doesn't guarantee complete immunity from patent infringement in the future...a whole bunch of other major licensing issues. LEGAL JARGAN
Just use Flash<cry>
Just use Flash<cry>
Link lovage...
http://www.w3.org/TR/html5http://whatwg.org/html5http://html5doctor.com/
http://molly.com/html5/html5-0709.htmlhttp://html5gallery.com/
http://tinyurl.com/html5-video-debate
http://assets.dontcom.com/html5.pdf
download
Lets talk!
questions yo
Related Documents
