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
Rails
cool!
Rails
Rails is
AWESOME!
XHTML 2.0
don’t hold your breath
backwards
compatible
and required all documents to be
served as XML
this buwdy aint
gonna fly...
its to fat...
he he
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
frame, frameset,
noframes
NO MORE
acronym was
dropped for abbr
acronym was
dropped for abbr
font, big, center
& strike
font, big, center
& strike
NO MORE
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?!
<aside>sidenotes
<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 co...
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>
...
<...
HTML5
<section>
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest
elephants.
...this sectio...
HTML5
<section>
<h1>Forest elephants</h1>
</section>
<section>
<h2>Habitat</h2>
<section>
<h1>Diet</h1>
</section>
<h2>Mon...
HTML5
1. Forest elephants
2. Habitat
2.1. Diet
3. Mongolian gerbils
<section>
<h1>Forest elephants</h1>
</section>
<sectio...
sub headings not interesting in outline
h1
h2
sub headings not interesting in outline
h1
h2
HTML5
1. Soocial
1.1. Hassle free contact syncing
1.1.1. Pricing
<section>
<h1>Soocial</h1>
<h2>Hassle Free contact syncin...
HTML5
<section>
<hgroup>
<h1>Soocial</h1>
<h2>Hassle Free contact syncing</h2>
</hgroup>
<section>
<h1>Pricing</h1>
</sect...
HTML5
<section>
<hgroup>
<h1>Soocial</h1>
<h2>Hassle Free contact syncing</h2>
</hgroup>
<section>
<h1>Pricing</h1>
</sect...
HTML5
1. Soocial
1.1. Pricing
<section>
<hgroup>
<h1>Soocial</h1>
<h2>Hassle Free contact syncing</h2>
</hgroup>
<section>...
<figure> &
<figcaption>
images, graphs etc.
<figure> &
<figcaption>
images, graphs etc.
<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...
<a
class="movie"
href="http://movienotify.com/
kick-ass[2010]"
data-name="Kick-Ass"
data-year="2010"
data-imdb-rating="8.1...
<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.cr...
modernizr.com
<body
class="no-multiplebgs ...">
Questions?
•Twitter: @juice10
•Screenshots:
•movienotify.com
•thedailymo.com
•blog: juice10.com
•pet project:
tvnotify.com...
[passion fruit] http://www.flickr.com/photos/stefanvds/3260955737/
[tables] http://www.flickr.com/photos/cav666/3562455727/
...
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
Upcoming SlideShare
Loading in …5
×

HTML5 semantics

3,325 views
2,990 views

Published on

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

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

Published in: Technology, Design
2 Comments
3 Likes
Statistics
Notes
  • 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!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Resources
    http://html5doctor.com
    http://html5demos.com

    HTML5 resets
    http://html5doctor.com/html-5-reset-stylesheet/
    http://sencss.kilianvalkhof.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,325
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
24
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 semantics

  1. Welcome back!
  2. Justin Halsall CTO, betribes
  3. Justin Halsall CTO, betribes
  4. Passions
  5. Tables nested fail
  6. web standards
  7. web stuff?!
  8. web stuff?!
  9. wtf?
  10. wtf? thats cool!
  11. web standards
  12. web standards
  13. web standards
  14. Rails cool!
  15. Rails Rails is AWESOME!
  16. XHTML 2.0 don’t hold your breath
  17. backwards compatible and required all documents to be served as XML this buwdy aint gonna fly... its to fat... he he
  18. WHATWG Web Hypertext Application Technology Working Group
  19. HTML5 W3C + WHATWG
  20. Doctype you know that long thing you always have to look up
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
  22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
  23. <!DOCTYPE html>
  24. Charset meta, bla bla bla utf-8!
  25. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  26. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  27. <meta charset="utf-8" />
  28. <link type="text/css" rel="stylesheet" href="screen.css"> <script type="text/javascript" src="konamicode.js"></script>
  29. <link rel="stylesheet" href="screen.css"> <script src="konamicode.js"> </script>
  30. Block level <a> Wait, that didn’t used to be valid...
  31. <a href="http://thedailymo.com"> <h2>The Daily Mo</h2> <p>An awesome Movember viral app.</p> </a>
  32. Cleanup time...
  33. frame, frameset, noframes
  34. frame, frameset, noframes NO MORE
  35. acronym was dropped for abbr
  36. acronym was dropped for abbr
  37. font, big, center & strike
  38. font, big, center & strike NO MORE
  39. Semantics what do I care?
  40. Accessibility Not just for the blind anymore
  41. SEO Google is your biggest blind user
  42. Repurposing Your web app is your api
  43. Usability Surprisingly enough
  44. related
  45. related
  46. related
  47. related unrelated
  48. happy New elements!
  49. Structure elements“heeeeead, body, section, footer...”
  50. <header> great for intros, navigation etc.
  51. <section> it’s all in the name
  52. <nav>“lets go!” “where to?” “check the nav elements”
  53. <article> useful for... articles?!
  54. <article> useful for... articles?!
  55. <aside>sidenotes
  56. <footer> metadata related to parent
  57. <footer> metadata related to parent
  58. <hgroup> grouping headings together
  59. <hgroup> <h1>...</h1> <h2>...</h2> </hgroup>
  60. HTML Outline
  61. 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>
  62. HTML4 <h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1>
  63. 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>
  64. 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>
  65. HTML5 <section> <h1>Forest elephants</h1> </section> <section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
  66. 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>
  67. sub headings not interesting in outline h1 h2
  68. sub headings not interesting in outline h1 h2
  69. 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>
  70. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  71. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  72. HTML5 1. Soocial 1.1. Pricing <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  73. <figure> & <figcaption> images, graphs etc.
  74. <figure> & <figcaption> images, graphs etc.
  75. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
  76. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
  77. data- Attributes
  78. <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>
  79. <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>
  80. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
  81. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
  82. HTML5 shiv: http://remysharp.com/2009/01/07/ html5-enabling-script/ <script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); ... </script>
  83. modernizr.com <body class="no-multiplebgs ...">
  84. Questions? •Twitter: @juice10 •Screenshots: •movienotify.com •thedailymo.com •blog: juice10.com •pet project: tvnotify.com •We (Betribes.com) are looking for cool new colleagues. Maybe you? •E-mail: justin@betribes.com
  85. [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

×