HTML5 Semantic Elements

HTML5 SEMANTIC ELEMENTS @idangazit HTML5Fest • 25th October 2011

http://ic.kr/p/7Efy5K I COME FROM HELLO!

djangoproject.com skilsapp.com

WHY SHOULD YOU CARE? WHAT DO THEY DO?

PRESENTATION CSS CONTENT HTML

your audience

HI! I’M A DESIGNER.

HI! I’M A DEVELOPER.

HI! I’M GOOGLEBOT.

PRESENTATION CONTENT

PRESENTATION CONTENT SEMANTIC STRUCTURE provides MEANING

a good semantic structure makes it EASY for eveybody TO
CONSUME YOUR CONTENT

<!DOCTYPE html> quirks mode amost-standards mode standards mode

Q: quirks mode A: amost-standards mode S: standards mode http://hsivonen.iki.ﬁ/doctype/
S S S S S IE8+ A IE6/7 <!DOCTYPE html>

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

<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="my.css"> <script>
BRIEF!

NEW SEMANTIC ELEMENTS STRUCTURE

<H1> <P> <A> heading paagaph link

<DIV> generic block-level

<div class="header"> <h1>BEST BLOG IN THE WORLD</h1> <div class="nav"> <ul>
... </ul> </div> </div> <div class="maincontent"> <h2>My Posts</h2> <div class="post"> <h3>A post</h3> ... </div> </div> <div class="footer"> <p>© Natan Alterman</p> </div>

div class= HEADER HEADING PAGEHEAD MAINHEADER etc…

<header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...
</ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>© Natan Alterman</p> </footer>

<header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...
</ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>© Natan Alterman</p> </footer>

• BEST HTML5 BLOG IN THE WORLD • My Posts
- A post title! - Another post title! - A really old post. http://gsnedders.html5.org/outiner/ http://dev.w3.org/html5/spec/Oveview.html#outine

<HEADER> and <FOOTER> go inside <ARTICLE> <SECTION> <NAV> <ASIDE> SECTIONING
CONTENT

YUMMY! bit.ly/html5-seo-google

YUMMY!

http://en.wikipedia.org/wiki/HTML5_Shiv JS FIX FOR IE6-8 HTML5 SHIV

http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

DEHACKIFYING UR FORMS IM IN UR MARKUP

now we have css :hover pseudoclass JS ROLLOVERS

GRACEFUL DEGRADATION SIMPLIFYING COMMON USAGE WEBFORMS 2.0

ATTRIBUTES

<input placeholder="name"> PLACEHOLDER TEXT

<input name="searchbox" autofocus> AUTOFOCUS

<input name="name" required> <input name="nickname"> <style> input[required] { background: #cfc;
} </style> REQUIRED

<input required pattern="[0-9]{5}" placeholder="5-digit code"> <style> :invalid { background: #cfc;
} </style> PATTERN pattern is a regex

<input list="suggestions"> <datalist id="suggestions"> No datalist suppot! <option value="foo"></option> <option
value="bar"></option> <option value="baz"></option> </datalist> DATALIST

INPUT TYPES

<input type="email" placeholder="email"> <input type="url" placeholder="http://…"> <input type="tel" placeholder="telephone"> CONTACT
INFO

http://bit.ly/html5-iphone-forms

http://bit.ly/html5-iphone-forms EMAIL URL TEL

<input type="search" placeholder="search"> SEARCH

<input type="slider" min="1" max="10"> SLIDERS discrete min="1" max="10" continuous

<input type="number"> SPINNERS aso suppots min/max

<input type="date"> <input type="time"> <input type="datetime"> <input type="datetime-local"> <input type="month">
<input type="week"> DATE AND TIME visit with a webkit browser, ike chrome: http://bit.ly/html5-input-tests

ONLY OPERA SUPPORTS IT COLOR PICKER

http://www.modernizr.com FEATURE DETECTION MODERNIZR

http://bit.ly/polyﬁls FALLBACKS FOR OLDER BROWSERS POLYFILLS

LEARN YOU SOME HTML5 RESOURCES

http://diveintohtml5.info/ FREE ONLINE DIVE INTO HTML5

http://html5doctor.com “WHEN SHOULD I...” HTML5 DOCTOR

http://www.abookapat.com/products/html5-for-web-designers IT’S SHORT AND SWEET HTML5 BOOK

http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

ALL BENEFITS • NO DRAWBACKS EASY FIXES FOR IE6-8 FUTURE-PROOF
YOUR SITE USE IT NOW!

@idangazit THANK YOU!

HTML5 Semantic Elements

HTML5 Semantic Elements

More Decks by Idan Gazit

Other Decks in Programming

Featured

Transcript