HTML& CSS Sitting in a Tree
KissinOMG
Who?
ShaneBecker
@veganstraightedge
buzz.com
yp.com/lite
iamshane.com
HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
<!DOCTYPE html>
<html lang="en">
<html dir="ltr">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8" />
<script type=”text/javascrtipt” charset=”utf-8”>
<script>
<style type=”text/css”>
<style>
REDEFINEDELEMENTS
<b>
<strong>
<i>
<em>
<br>
<hr>
<s>
<small>
<embed>
NEW ELEMENTS
<article>
<aside>
<audio>
<audio src=""/>
<audio attrs>
controls
preload="none"
preload="metadata"
preload="auto"
loop
autoplay
<audio> <source src=".mp3"/> <source src=".ogg"/> <source src=".wav"/></audio>
<canvas>
<details>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<summary>
<time>
<time pubdate>
datetime="2009-11-13T20:00"
datetime="2009-11-13T20:00+09:00"
<video>
<video src=""/>
<video attrs>
autoplay
poster=".png"
<video> <source src="h.264"/> <source src=".ogv"/></video>
HTML5FORMS
placeholder
autofocus
required
<input type=*>
type="email"
type="url"
type="tel"
type="search"
type="date"
type="datetime"
type="number"
type="range"
type="color"
<meter>
<progress>
MISC
data-* attrs
data-lat="123.456"
data-lon="3.14159"
data-foo="bar"
data-ypid="6159963"
ARIA
Accessible Rich Internet Applications
role="banner"
<header>
role="navigation"
<nav>
role="main"
<section>
role="article"
<article>
role="complementary"
<aside>
role="contentinfo"
<footer>
role="search"
<input type="search" />
HTML5FRIENDS
geolocation
local storage
offline apps
web workers
web sockets
history api
file api
undo history
drag and drop
deviceorientation
CSS3
border-radius
linear-gradient
radial-gradient
media queries
@media
@media="only screen and (max-device-width: 480px)"
@media="only screen and (max-device-width: 480px)" { h1 { background: url(small-logo.png) }}
@media="only screen and (max-device-width: 480px)
and (orientation:portrait)"
@media="only screen and (max-device-width: 480px)
and (orientation:landscape)"
box-shadow
text-shadow
multiple backgrounds
border-image
@font-face
:before
:after
:first-child
:last-child
:nth-child( )
:nth-child(even)
:nth-child(odd)
:nth-child(10n-1)
:target
img[alt=foo]
RGBa
transforms
transistions
More…
htmldog.com
diveintohtml5.org
html5doctor.com
books.alistapart.com
View Source
iamshane.com/products