Open Web Platform

HTML5 and Semantic Markup

HTML: 1991
HTML 2: 1994
CSS 1 + ECMAScript: 1996
HTML 4: 1997
CSS 2: 1998
XHTML 1: 2000

WHATWG Shakedown

Mozilla & Opera take W3C to task on lack of innovation in HTML (2004). 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 2007 around WHATWG's body of work
In 2009, the W3C lets the XHTML 2.0 Working Group's charter expire

HTML 5.0 Draft: Jan. 2008
HTML 5.0 Candidate: Dec. 2012
HTML 5.1 Draft: Dec. 2012
HTML 5.0 Rec.: 2014
HTML 5.1 Rec.: 2016
HTML 5.2 Draft: 2015
WHATWG HTML: 2012 - ∞

"[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 - April, 2010

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

Moment of 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

basefont
big
center
font
strike
tt

RIP

Dead Skull Cartoon Crossbones Bones Free Poison

Destroyed because of their offensive abuse of usabilty and accessibility

frame
frameset
noframes

RIP

Kicked to the curb because they are redundant

acronym dropped in favour of abbr for abbreviations.
applet dropped in favour of object.
isindex (WTF?!) dropped in favour of form controls.
dir has been obsoleted in favor of ul.

Redefined to be Semantic

b utilitarian attention such as an article lead.
cite only good for title citations (not author).
dl no longer recommended for dialog.
hr to represent paragraph level thematic break.
i to represent alt. voice or mood (ie: stuff in other languages).
small side comment or small print.
strong represents importance and not strong emphasis (Warning! Kittens are dangerous.).

Let there be new elements

section
article
aside
hgroup
header
footer
nav
figure
figcaption
details
summary
mark
time
meter
progress
video
audio
source
track
embed
ruby
rt
rp
bdi
wbr
canvas
command
datalist
keygen
output

Semantic HTML

Blog: Neutral HTML

Blog: Semantic HTML

<div>

Why?

Because we respect ourself
- A cure for DIVITIS
- CSS & HTML is easier to read & therefore maintain
- Counting DIVs to check that they are balanced sucks
- More consise HTML and CSS selectors
Content extraction
Search Engine Optimization *
Accessibility *
Use HTML5 semantic elements for future compatibility

Because

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

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

Use HTML5 Shiv
Love Modernizr + HTML5 Shims

HTML5 Microdata

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

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>

Simple structure based on class, rel, rev attribs.
Supported by major search engines.
Grassroots development of formats not through standards bodies.
Class conflicts.
hCalendar, hCard, hMedia, hNews, hProduct, hRecipe, rReview, XFN...

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>

More complex structure based on attribs.
Supported by major search engines.
Developers tend to get them wrong.
Numerous defined vocabularies.

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

Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries ...
Embedded non-text objects: AudioObject, ImageObject, VideoObject
Event
Organization
Person
Place, LocalBusiness, Restaurant ...
Product, Offer, AggregateOffer
Review, AggregateRating

Events

<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

<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

<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

<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

Open Web Platform - HTML5 and Semantic Markup

Refresh Annapolis Valley Slide Deck