Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 semantics

on

  • 3,131 views

Resources

Resources
http://html5doctor.com
http://html5demos.com

HTML5 resets
http://html5doctor.com/html-5-reset-stylesheet/
http://sencss.kilianvalkhof.com

Statistics

Views

Total Views
3,131
Views on SlideShare
3,128
Embed Views
3

Actions

Likes
3
Downloads
20
Comments
2

3 Embeds 3

http://htmledit.squarefree.com 1
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to
    Your message goes here
    Processing…
  • Resources
    http://html5doctor.com
    http://html5demos.com

    HTML5 resets
    http://html5doctor.com/html-5-reset-stylesheet/
    http://sencss.kilianvalkhof.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 semantics HTML5 semantics Presentation Transcript

    • Welcome back!
    • Justin Halsall CTO, betribes
    • Justin Halsall CTO, betribes
    • Passions
    • Tables nested fail
    • web standards
    • web stuff?!
    • web stuff?!
    • wtf?
    • wtf? thats cool!
    • web standards
    • web standards
    • web standards
    • cool! Rails
    • Rails is AWESOME! Rails
    • XHTML 2.0 don’t hold your breath
    • this buwdy aint backwards gonna fly... compatible its to fat... he he and required all documents to be served as XML
    • WHATWG Web Hypertext Application Technology Working Group
    • HTML5 W3C + WHATWG
    • Doctype you know that long thing you always have to look up
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
    • <!DOCTYPE html>
    • Charset meta, bla bla bla utf-8!
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • <meta charset="utf-8" />
    • <link type="text/css" rel="stylesheet" href="screen.css"> <script type="text/javascript" src="konamicode.js"></script>
    • <link rel="stylesheet" href="screen.css"> <script src="konamicode.js"> </script>
    • Block level <a> Wait, that didn’t used to be valid...
    • <a href="http://thedailymo.com"> <h2>The Daily Mo</h2> <p>An awesome Movember viral app.</p> </a>
    • Cleanup time...
    • frame, frameset, noframes
    • MO RE NO frame, frameset, noframes
    • acronym was dropped for abbr
    • acronym was dropped for abbr
    • font, big, center & strike
    • MO RE NO big, center font, & strike
    • Semantics what do I care?
    • Accessibility Not just for the blind anymore
    • SEO Google is your biggest blind user
    • Repurposing Your web app is your api
    • Usability Surprisingly enough
    • related
    • related
    • related
    • related unrelated
    • happy New elements!
    • Structure elements “heeeeead, body, section, footer...”
    • <header> great for intros, navigation etc.
    • <section> it’s all in the name
    • <nav> “lets go!” “where to?” “check the nav elements”
    • <article> useful for... articles?!
    • <article> useful for... articles?!
    • explain aside
    • <footer> metadata related to parent
    • <footer> metadata related to parent
    • <hgroup> grouping headings together
    • <hgroup> <h1>...</h1> <h2>...</h2> </hgroup>
    • HTML Outline
    • HTML4 <div> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </div> <div> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <div> <h2>Diet</h2> </div> <h1>Mongolian gerbils</h1> </div>
    • HTML4 <h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1>
    • HTML4 1. Forest elephants 1.1. Habitat 1.2. Diet 2. Mongolian gerbils <h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1>
    • HTML5 <section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </section> <section> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
    • HTML5 <section> <h1>Forest elephants</h1> </section> <section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
    • HTML5 1. Forest elephants 2. Habitat 2.1. Diet 3. Mongolian gerbils <section> <h1>Forest elephants</h1> </section> <section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
    • h1 h2 sub headings not interesting in outline
    • h1 h2 sub headings not interesting in outline
    • HTML5 1. Soocial 1.1. Hassle free contact syncing 1.1.1. Pricing <section> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> <section> <h1>Pricing</h1> </section> ... </section>
    • HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
    • HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
    • HTML5 1. Soocial 1.1. Pricing <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
    • <figure> & images, graphs etc. <figcaption>
    • <figure> & images, graphs etc. <figcaption>
    • <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
    • <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
    • data- Attributes
    • <a class="movie" href="http://movienotify.com/ kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1" >Kick-Ass (2010)</a>
    • <a class="movie" href="http://movienotify.com/ kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1" >Kick-Ass (2010)</a>
    • <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
    • <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
    • HTML5 shiv: http://remysharp.com/2009/01/07/ html5-enabling-script/ <script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); ... </script>
    • modernizr.com <body class="no-multiplebgs ...">
    • Questions? •Twitter: @juice10 •pet project: tvnotify.com •Screenshots: •We (Betribes.com) are •movienotify.com looking for cool new colleagues. •thedailymo.com Maybe you? •blog: juice10.com •E-mail: justin@betribes.com
    • [passion fruit] http://www.flickr.com/photos/stefanvds/3260955737/ [tables] http://www.flickr.com/photos/cav666/3562455727/ [ipad stand] http://www.flickr.com/photos/4nton/4577185176/in/photostream/ [web] http://www.flickr.com/photos/foxypar4/2124673642/ [shark] http://www.flickr.com/photos/oskay/265899766/in/photostream/ [sedgeway] http://www.flickr.com/photos/oskay/265899988/sizes/o/in/photostream/ [smily hand] http://www.flickr.com/photos/dotbenjamin/2765083201/ [rails] http://www.flickr.com/photos/library_of_congress/2178402745/ [html5 fist] http://www.flickr.com/photos/justinsomnia/513636061/ [skelleton] http://www.flickr.com/photos/powerhouse_museum/2980051095/ [chicken] http://www.flickr.com/photos/uw_digital_images/4476181225/ [cleaner] http://www.flickr.com/photos/library_of_congress/ [fireworks] http://www.flickr.com/photos/bestrated1/341866875/ [google founders] http://www.wired.com/science/discoveries/news/2007/09/ dayintech_0907