HTML5
SEMANTIC ELEMENTS
@idangazit
HTML5Fest • 25th October 2011
Slide 2
Slide 2 text
http://ic.kr/p/7Efy5K
I COME FROM
HELLO!
Slide 3
Slide 3 text
djangoproject.com
skilsapp.com
Slide 4
Slide 4 text
WHY
SHOULD YOU CARE?
WHAT
DO THEY DO?
Slide 5
Slide 5 text
PRESENTATION CSS
CONTENT HTML
Slide 6
Slide 6 text
your audience
Slide 7
Slide 7 text
HI! I’M A DESIGNER.
Slide 8
Slide 8 text
HI! I’M A DEVELOPER.
Slide 9
Slide 9 text
HI! I’M GOOGLEBOT.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
PRESENTATION
CONTENT
Slide 12
Slide 12 text
PRESENTATION
CONTENT
SEMANTIC STRUCTURE
provides
MEANING
Slide 13
Slide 13 text
a good semantic structure makes it
EASY
for eveybody
TO CONSUME YOUR CONTENT
Slide 14
Slide 14 text
quirks mode
amost-standards mode
standards mode
Slide 15
Slide 15 text
Q: quirks mode A: amost-standards mode S: standards mode
http://hsivonen.iki.fi/doctype/
S S S S S IE8+
A IE6/7
Slide 16
Slide 16 text
http://html5doctor.com/html-5-xml-xhtml-5/
http://mathiasbynens.be/notes/xhtml5
DON’T BOTHER, IT WON’T WORK IN IE
“Content-Type: application/xhtml+xml”
XHTML5
• BEST HTML5 BLOG IN THE WORLD
• My Posts
- A post title!
- Another post title!
- A really old post.
http://gsnedders.html5.org/outiner/
http://dev.w3.org/html5/spec/Oveview.html#outine
Slide 30
Slide 30 text
and
go inside
SECTIONING CONTENT
Slide 31
Slide 31 text
YUMMY!
bit.ly/html5-seo-google
Slide 32
Slide 32 text
YUMMY!
Slide 33
Slide 33 text
http://en.wikipedia.org/wiki/HTML5_Shiv
JS FIX FOR IE6-8
HTML5 SHIV
Slide 34
Slide 34 text
Slide 35
Slide 35 text
http://dev.w3.org/html5/spec/Oveview.html
THE FINAL WORD
HTML5 SPEC
Slide 36
Slide 36 text
DEHACKIFYING UR
FORMS
IM IN UR
MARKUP
Slide 37
Slide 37 text
now we have css :hover pseudoclass
JS ROLLOVERS
Slide 38
Slide 38 text
GRACEFUL DEGRADATION
SIMPLIFYING COMMON USAGE
WEBFORMS 2.0
Slide 39
Slide 39 text
ATTRIBUTES
Slide 40
Slide 40 text
PLACEHOLDER TEXT
Slide 41
Slide 41 text
AUTOFOCUS
Slide 42
Slide 42 text
input[required] { background: #cfc; }
REQUIRED
Slide 43
Slide 43 text
:invalid { background: #cfc; }
PATTERN
pattern is a regex
Slide 44
Slide 44 text
No datalist suppot!
DATALIST
Slide 45
Slide 45 text
INPUT TYPES
Slide 46
Slide 46 text
CONTACT INFO
Slide 47
Slide 47 text
http://bit.ly/html5-iphone-forms
Slide 48
Slide 48 text
http://bit.ly/html5-iphone-forms
EMAIL URL TEL
Slide 49
Slide 49 text
SEARCH
Slide 50
Slide 50 text
SLIDERS
discrete
min="1" max="10"
continuous
Slide 51
Slide 51 text
SPINNERS
aso suppots min/max
Slide 52
Slide 52 text
DATE AND TIME
visit with a webkit browser, ike chrome:
http://bit.ly/html5-input-tests