Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Open Web Platform - HTML5 and Semantic Markup

Refresh Annapolis Valley Slide Deck

Open Web Platform

Open Web Platform
The W3C Open Web Platform

HTML5 and Semantic Markup

Early History of the Open Web

Old HTML Logo
HTML
HTML 2
CSS 1 + ECMAScript
HTML 4
CSS 2
XHTML 1

WHATWG

WHATWG
WHATWG Shakedown
  • Mozilla & Opera take W3C to task on lack of innovation in HTML (). W3C decides XML is the future.
  • WHATWG formed to advance new HTML standards
  • Set out to draft:
    1. Web Forms 2.0: An incremental improvement of HTML4.01's forms.
    2. Web Apps 1.0: Features for Application Development in HTML.
    3. Web Controls 1.0: A specification describing mechanisms for creating new interactive widgets.
  • W3C forms new HTML working group in around WHATWG's body of work
  • In , the W3C lets the XHTML 2.0 Working Group's charter expire

Enter HTML 5

HTML5
HTML 5.0 Draft
HTML 5.0 Candidate
HTML 5.1 Draft
HTML 5.0 Rec.
HTML 5.1 Rec.
HTML 5.2 Draft
WHATWG HTML
- ∞

Thoughts on Flash

Steve Jobs
"[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win" Steve Jobs -

Lay of the Land

HTML5 APIs and Related Technologies: taxonomy and specification status. Illustration by Sergey Mavrody. From Sergey's HTML5 & CSS3 Quick Reference book.

Moment of Silence

Silence

For the fallen elements of the HTML canon.

RIP

Dead Outline Marks Person Human Scene Body Crime

Euthanized because of their purely presentational use

RIP

Dead Skull Cartoon Crossbones Bones Free Poison

Destroyed because of their offensive abuse of usabilty and accessibility

RIP

Dead End Street Sign Sign Road Traffic

Kicked to the curb because they are redundant

Redefined to be Semantic

Let there be new elements

Semantic HTML

The Far Side
Structural & interactive

Blog: Neutral HTML

<div class="header">
<div class="content">
<div class="article">
<div class="article">
<div class="footer">

Blog: Semantic HTML

<header>
<div>
<article>
<article>
<footer>

Why?

Because

Bruce Lawson
Semantics communicate meaning, and once that is established, machines can do something meaningful with that data, without having to develop and use algorithms to guess.

Bruce Lawson, open web technology evangalist for Opera in HTML5 Semantics

More

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Blog: Blog Post</title>
  </head>
  <body>

    <header>
      <h1>My Blog</h1>
    </header>

    <nav>
      <ul>
        <li><a href="">nav</a><li>
        <li><a href="">nav 2</a><li>
        <li><a href="">nav 3</a><li>        
      </ul>
    </nav>

    <article>
      <header>
        <hgroup>
          <h1>Blog Post</h1>
          <h2>Cool to the last drop</h2>
        </hgroup>
        <p><time datetime="2020-02-26">Wed, Feb. 26th, 2020</time> by <a href="" rel="author">Mike</a>.</p>
      </header>
      
      <section>
        <h1>Summary</h1>
        <p />
      </section>

      <aside>
        <h1>Glossary</h1>
        <dl>
          <dt>Lorem</dt>
          <dd>ipsum dolor sit amet</dd>
        </dl>
      </aside>

      <section>
        <h1>Chapter 1</h1>
        <p />
        
        <figure>
          <img />
          <figcaption>A rabid unicorn</figcaption>
        </figure>
      </section>
      
      <footer>
      
        <p>Tags: <a href="">a</a>, <a href="">b</a></p>
      
        <section>
          <h1>Comments</h1>
          
          <article>
            <h1><time datetime="2020-02-27">Thu, Feb. 27th, 2020</time> by <a href="" rel="author">Betty</a>.</h1>
            <p>Comment</p>
          </article>
          
          <article>
            <h1><time datetime="2020-02-28">Fri, Feb. 28th, 2020</time> by <a href="" rel="author">Fran</a>.</h1>
            <p>Comment</p>
          </article>
        </section>
      </footer>
      
    </article>
    
    <aside>
      <h2>Blogroll</h2>
      <ul>
        <li><a href="">Other Blog</a></li>
        <li><a href="">Other Blog 2</a></li>
      </ul>
    </aside>
    
    <footer>
      <p>Copyleft</p>
    </footer>
    
  </body>
</html>
                

HTML5 Outline Algorithm

  1. My Blog
    1. Untitled Section
    2. Blog Post
      1. Summary
      2. Glossary
      3. Chapter 1
      4. Comments
        1. Thu, Feb. 27th, 2020 by Betty.
        2. Fri, Feb. 28th, 2020 by Fran.
    3. Blogroll

Backwards Compatiblity

shims

HTML5 Microdata

microscope

A mechanism to annotate HTML to define common objects like people, events, organizations, products, etc...

New Element Attributes

itemtype
What we are talking about (Eg: Person)
itemprop
Specific element of the overall item (Eg: Name)
itemscope
What we are talking about is related to everything from here on in.
itemid
Unique id for what we are talking about
itemref
Allows you to tie together elements of the thing we are talking about that are not in scope

Microdata Person Vocabulary

<div itemscope itemtype="http://schema.org/Person">
  <p>Name: <i itemprop="name">Michael Caplan</i></p>
  <p>Title: <i itemprop="jobTitle">Web Developer</i></p>
</div>
                

Microformats, RDFa, & Microdata

Standards

Rich Snippets

Microformat hCard

       
<div class="vcard">
  <p>Name: <span class="fn">Mike Caplan</span></p>
  <p>Title: <span class="title">Web Developer</span></p>
</div>
                

RDFa Person Vocabulary

       
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
  <p>Name: <span property="v:name">Mike Caplan</span></p>
  <p>Title: <span property="v:title">Web Developer</span></p>
</div>
                

Why Bother?

Search engines (Bing, Google, Yahoo! & Yandex) use these annotations to improve the display of search results.

Better search results, more traffic

Microdata Vocabularies from schema.org

Events

Google example of an event
<div itemscope itemtype="http://schema.org/Event">
  <a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">After their highly-publicized search for a new drummer,
   Spinal Tap kicks off their latest comeback tour with a San
   Francisco show.</span>

  When:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>—
  <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

  Where:
  <span itemprop="location" itemscope itemtype="http://schema.org/&#8203;Organization">
     &#8203;<span itemprop="name">Warfield Theatre</span>
     &#8203;<span itemprop="address" itemscope itemtype="http://schema.org/Address">
         <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">San Francisco</span>, 
         <span itemprop="region">CA</span>
     </span>
     <span itemprop="geo" itemscope itemtype="http://schema.org/&#8203;Geo">
        <meta itemprop="latitude" content="37.774929" />
        <meta itemprop="longitude" content="-122.419416" />
     </span>
  </span>

  Category: <span itemprop="eventType">Concert</span>
  <span itemprop="ticketAggregate" itemscope itemtype="http://schema.org/Offer-aggregate"> 
    Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span>
    <span itemprop="currency" content="USD" /> 
    <span itemprop="offerCount">2,000</span> tickets available
    <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl">
      http://google.com/ticket</span>See all available tickets</a>
  </span>
  <span itemprop="tickets" itemscope itemtype="http://schema.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Presale tickets</a> 
    <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> 
      till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2015</time> 
      (<span itemprop="quantity">1000</span> available)  
  </span> 
  <span itemprop="tickets" itemscope itemtype="http://schema.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Full-price tickets</a> 
    <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> 
  </span>
</div>
                

Music

Google example of music
<div itemscope itemtype="http://schema.org/MusicGroup">
  <h1 itemprop="name">The Parrot Family</h1>
  <h2>Songs</h2>
    <div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
      <span itemprop="name">Hello, World!</span>
      Length: <meta itemprop="duration" content="PT4M5S" />4:05 -
      14300 plays
      <meta itemprop="interactionCount" content="UserPlays:14300"/>
      <a href="parrot-family-helloworld-play.html" itemprop="audio">Play</a>
      <a href="parrot-family-helloworld-buy.html" itemprop="offers">Buy</a>
      From album: <a href="parrot-family-yellow-album.html" itemprop="inAlbum">The Yellow Album</a>
    </div>   
  <a href="parrot-family-helloworld-link.html" itemprop="url">Link</a>
  <div itemscope itemtype="http://schema.org/MusicRecording">
    <span itemprop="name">Parrot Power</span>
    Length: <meta itemprop="duration" content="PT6M33S" />6:33 -
    11700 plays
    <meta itemprop="interactionCount" content="UserPlays:11700"/>
    <a href="parrot-family-parrotpower-link.html" itemprop="url">Link</a>
    <a href="parrot-family-parrotpower-play.html" itemprop="audio">Play</a>
    <a href="parrot-family-parrotpower-buy.html" itemprop="offers">Buy</a>
    From album: <a href="parrot-family-yellow-album.html"
      itemprop="inAlbum">The Yellow Album</a>
  </div>
</div>
                

Recipes

Google example of recipes
<div itemscope itemtype="http://schema.org/Recipe" >
  <h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
  <img itemprop="photo" src="apple-pie.jpg" /> 
  By <span itemprop="author">Carol Smith</span>
  Published: <time datetime="2009-11-05" itemprop="published">
    November 5, 2009</time>
  <span itemprop="summary">This is my grandmother's apple pie recipe. I like to add a
    dash of nutmeg.</span>
  <span itemprop="review" itemscope itemtype="http://schema.org/Review-aggregate">
    <span itemprop="rating">4.0</span> stars based on
    <span itemprop="count">35</span> reviews </span>
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  Yield: <span itemprop="yield">1 9" pie (8 servings)</span>
  <span itemprop="nutrition" itemscope itemtype="http://schema.org/Nutrition">
    Serving size: <span itemprop="servingSize">1 medium slice</span>
    Calories per serving: <span itemprop="calories">250</span>
    Fat per serving: <span itemprop="fat">12g</span>
  </span>
  Ingredients:
    <span itemprop="ingredient" itemscope itemtype="http://schema.org/RecipeIngredient">
      Thinly-sliced <span itemprop="name">apples</span>:
      <span itemprop="amount">6 cups</span>
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://schema.org/RecipeIngredient">
      <span itemprop="name">White sugar</span>:
      <span itemprop="amount">3/4 cup</span>
    </span>
  ...
		  
  Directions:
    <div itemprop="instructions">
      1. Cut and peel apples
      2. Mix sugar and cinnamon. Use additional sugar for tart apples.
      ...
    </div>
</div>
                

Reviews

Google example of a review
<div itemscope itemtype="http://schema.org/Review-aggregate">
  <span itemprop="itemreviewed">L’Amourita Pizza</span>
  <img itemprop="photo" src="pizza.jpg" />
  <span itemprop="rating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="average">9</span>
    out of <span itemprop="best">10</span>
  </span>
  based on <span itemprop="votes">24</span> ratings.
  <span itemprop="count">5</span> user reviews.
</div>
                

Resources

W3C
The source for open web standards
WHATWG
The cutting edge of HTML development
html5doctor
Awesome annotated element index
WebPlatform.org
Unified web documents
HTML5 Please
Sound advice on the readyness of HTML5 features
HTML5 Rocks
Articles, news, presentations, demos
Google on Rich Snippets
Examples and tools on rich snippets, including microdata
schema.org
Collection of microdata vocabularies

The End!