- The most successful format in the world
- Used primarily for websites
- Used on every large website you use daily: Facebook, Google, Twitter, Vimeo etc
A markup language is a system for annotating a text in a way that is syntactically distinguishable from that text.
- Combination of improvements to HTML4, CSS and Javascript
- Spec declares how HTML interacts with the DOM and the Javascript API
- Additional elements
- Additional JS Selectors
- CSS3 properties
- One large thing
- HTML5 is a combination of many technologies and improvements
- A browser can’t support “HTML5” a browser can support aspects of “HTML5”
- A “Flash Killer”
- AJAX
Semantic Markup is Easier to Read and Understand
- Less need for other Languages
- Let Flash do what it’s good at
No closing of tags
Most up to date documentation
W3C actually put out a spec which is readable by humans
XHTML Strict DocType
- who can write out by hand?
No Quirks Mode
Puts all browsers into standards-based rendering
- What you’ve written in HTML4 will still work in HTML5
- All HTML4 tags are supported in HTML5
- HTML5 builds upon HTML4
- Example: HTML5 has all the input types of HTML4, but adds upon them, will show later
Features Already Supported In Major Browsers: FireFox, Opera, Safari, Internet Explorer 9
Some features aren’t available in all browsers:
- Video & Audio aren’t ready for primetime
Modernizr
- Open-Source MIT Licensed & Developed by two reliable developers
- Booleans telling you what’s supported
- Allows for CSS classes to be used based on what’s included
- XHTML is a mess and never was properly supported
- Content supplied as Text/HTML not “application/xhtml+xml” as XHTML requested
- XHTML tried to break websites when markup was incorrect
- Horrible experience for customers
- No graceful degradation
Get the user’s current location returned to you in a JS Method
Geolocation can take several seconds
Google Gears fallback
- ~5MB of Storage
- Cookies are 4kb
- Not sent to server on every page reload
- Accessible through JS calls
Cache files and resources offline
- Enables websites to work when a user isn’t connected to the internet
- Doesn’t work in IE
Add an AddType directive in .htaccess (on an apache box)
Add an manifest attribute on the <html> element
Very simple cache.manifest file declaring which files are necessary.
- Ability to add explicit (default)
- Fallback
- Online whitelist (allows online resources when network is available)
- Easier To Read
- Removes the necessity of appending IDs to everything
- Selectable by CSS
- Remy Sharp
- MIT Licensed and hosted on Google Code
- Works all the way back to IE6
HTML5 Defines over a Dozen New input types:
Fall back to regular inputs. No reason to not use them.
Notice keyboard changes based on input types
Selector - A way to grab, and iterate elements
Both CSS and JS
^= Any item who&#x2019;s ID begins with &#x201C;post-&#x201D;
a href where the url starts with FTP
*= Any item who&#x2019;s attribute matches wildcard
an + b
a represents a cycle size, n is a counter starting at 0, and b represents an offset value
&#x201C;even&#x201D; and &#x201C;odd&#x201D; exist
:first-child existed in CSS 2.1
A B Descendant Selector - &#x201C;my children and grandchildren are my descendants&#x201D;
A + B Adjacent Selector
- not in IE6
A > B Child Selector. &#x201C;My children will be selected, but not my grandchildren&#x201D;
- not in IE6, buggy in IE7
Browser level implementation. Faster
aka &#x201C;element name&#x201D;
- Enables JavaScript to be run in the background. Think Multi-Threaded Websites.
- Workers don't have access to the DOM. No document, getElementById, etc. (The notable exceptions are setTimeout, setInterval, and XMLHttpRequest.)
- Workers don't have direct access to the 'parent' page.
No workers, 4.272 seconds
16 workers, 1.781 seconds
- FF 3.5+, S 4.0+, Chrome Nightly
- The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images
- Not SVG. SVG is a visual representation of an object, canvas is not.
