‹!DOCTYPE html› - It’s HTML, it doesn’t matter which version it is.
Browsers don’t care about the doctype (except for triggering quirks or standards mode). The only reason they were originally created is for validators.
You can even leave the HTML 5 doctype out and be okay.
HTML 5 is technically any HTML document.
Character Encoding
Sending the character encoding from the server is the preferred way.
‹meta charset="utf-8"›
Serialisation
HTML5 - must be served using the text/html MIME type.
XHTML5 - must be served using an XML MIME type, such as application/xhtml+xml or application/xml.
Syntax
You don’t have to close stand-alone elements (like ‹img›) and some elements don’t need closing tags (like ‹li›)
Also, you can use uppercase element and attribute names.
Quotes don’t need to be used around attribute values.
If you write strict code, keep doing it.
Error Handling
The HTML 5 spec will specify what to do when handed bad markup.
This doesn’t really effect HTML authors, but it’s hugely beneficial for browser makers.
APIs
document.write
window.history
innerHTML
conteteditable
Drag and Drop
Offline storage
Audio
Opening and closing audio tags
src attribute
controls attribute - Can’t style, but you don’t need to show them. You can make your own and use JavaScript API to make them work.
preload attribute
Fallback content between the opening and closing tags. This content is only provided for browsers that don’t support the audio tag.
Video
Opening and closing video tags
All the same attributes as the audio tag
width and height attributes - Can be done through CSS too
source tag - Source is not an attribute for video
Fallback content (works the same way as audio fallbacks).
Canvas
Basically a dynamic image
Forms
Search
Tel
Email
URL
Datetime, date, month, week, time
Range (slider)
Semantics
Removed
Presentational elements like font, big, center, etc. have been removed.
Presentational attributes like border, bgcolor, etc. have been removed.
frame, frameset, and noframes are gone.
acronym is gone.
axis and summary(?) attributes are gone.
Changed
The a element can now be wrapped around anything.
The b element has been changed to stylistically offset text from the normal prose without conveying extra important.
The i works pretty much the same as the b. Both convey no semantic meaning.
Now hr is a paragraph-level thematic break.
The small element is for small print (for some reason big was removed though).
New Elements
mark - An inline element marked or highlighted for reference purposes due to it’s relevance in another context (Google highlighted words).
time - A way to encode times in a machine-readable way.
article
aside
details
figure
footer
header
hgroup
nav
section
Structure
Sectioning Content
Content that defines the scope of headings and footers.
section, article, aside, nav
Explicit sections help to define the outline of a document.
Sectioning Roots
blockquote, body, figure, td
These elements can have their own outlines, but the sections and headings inside these elements to not contribute to the outlines of their ancestors.
Lunch
Bell Harbor Conference Center
Om nom nom nom.
Fish And Chips!
I wanted fish and chips last night, but couldn’t find any.
Met a cool guy from New York and talked about the conference.
This chocolate chip cookie is delicious.
Explore CSS3
Dan Cederholm
3 Chunks
Chunk #1
What works today?
Transitions, Transforms & Animation
Borders & Backgrounds
Color & Transparency
Chunk #2
Selectors
Typography
Layout
Chunk #3
How are you and I using CSS3?
Dribbble
Other sites
Progressive Enrichment
Style + CSS3
Advanced CSS2 + CSS3
TV metaphor - It’s like watching a show on a black & white vs. a color TV.
Visual rewards vs. “broken”
AKA: Really cool stuff that doesn’t work in IE
What Works Today?
Vender-specific Properties
-webkit-border-radius, -moz-border-radius, border-radius - Put the non-prefixed version last.