HTML5 Semantic Elements: A Deeper Dive

HTML5 SEMANTIC ELEMENTS @idangazit PyWeb-IL 32 • 31st October 2011

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

<h1>My Awesome Site</h1> <h1>About me</h1> <p>I like bananas</p> <h1>My Day
Job</h1> <p>I eat bananas</p> <h1>Contact</h1> <p>[email protected]</p> •My Awesome Site •About Me •My Day Job •Contact

<h1>My Awesome Site</h1> <section> <h1>About me</h1> <p>I like bananas</p> <section>
<h1>My Day Job</h1> <p>I eat bananas</p> </section> </section> <section> <h1>Contact</h1> <p>[email protected]</p> </section> •My Awesome Site •About Me •My Day Job •Contact

<aside> <section> <h2>Foo</h1> … </section> <section> <h2>Bar</h1> … </section> </aside>
•Untitled Aside •Foo •Bar

<h1>My Awesome Blog</h1> <aticle> <h1>I Love Cake!</h1> <h2>I love it
so so much.</h2> … </aticle> <aticle> <h1>The Cake is a Lie!</h1> <h2>Don’t believe them!</h2> … </aticle> •My Awesome Blog •I Love Cake •I love it so so much. •The Cake is a Lie! •Don’t believe them!

<h1>My Awesome Blog</h1> <aticle> <hgroup> <h1>I Love Cake!</h1> <h2>I love
it so so much.</h2> </hgroup> … </aticle> <aticle> <hgroup> <h1>The Cake is a Lie!</h1> <h2>Don’t believe them!</h2> </hgroup> <div class=aticle_body> … </aticle> •My Awesome Blog •I Love Cake •The Cake is a Lie!

SECTIONING ROOTS <BLOCKQUOTE> <FIGURE> <DETAILS> <FIELDSET> <TD>

<HEADER> and <FOOTER> go inside <ARTICLE> <SECTION> <NAV> <ASIDE> …but
don’t aﬀect the outine 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! Sides: http://bit.ly/pyweb32-html5-semantic

HTML5 Semantic Elements: A Deeper Dive

HTML5 Semantic Elements: A Deeper Dive

More Decks by Idan Gazit

Other Decks in Programming

Featured

Transcript