Semantic chop

SEMANTIC
HTML5 101
or “Bye bye divitis”

Pascal Rettig
On Twitter @cykod

Wednesday, May 25, 2011

Born in 1989 by Tim Berner’s Lee

HTML IS IN TO ITee EA
’S RLY 20’S
Born in 1989 by Tim Berner’s L


LI FE CRniSgI”S
QUAR3TERing to ﬁnd “Mea n I
FACINlGr A ML5 & Web .0 is try
fo HT
The big goa


WHAT IS A
“SEMANTIC CHOP”?
A way to give structure and meaning to the
HTML that you generate.


W HO IS TH IS FOR?
• Primarily clients other than
your usual Web Browsers.

• The Google, Other Search
Engines, Data Aggregators,
Screen Readers, “Non-
traditional” browsers


THE GOALS
• HTML tags used in Meaningful
ways
• All styling information left to CSS
• Validating markup
• All dynamic interactions added
“unobtrusively” (usually via
jQuery)


HOW DOES
HTML5 ACHIEVE
THIS?


#1 A BOATLOAD OF
MEANINGFUL TAGS.
<article> <aside> <audio> <canvas>
<command> <datalist> <details>
<embed> <ﬁgcaption> <ﬁgure> <footer>
<header> <hgroup> <keygen> <mark>
<meter> <nav> <output> <progress>
<rp> <rt> <ruby> <section> <source>
<summary> <time> <video> <wbr>
http://www.w3schools.com/html5/
tag_wbr.asp


#2SECTIONING
TAGS
<article>
<aside>
<nav>
<section>
(Also <details> <ﬁgure> act as the
same, but don’t add to the parent
section)


EACH CREATES A
NEW “SECTION” OF
YOUR PAGE
Each of these represents a separate line in
the outline of your document.


#3ORGANIZATIONAL
ELEMENTS
<header>
<footer>
<hgroup>


CAN BE USED TO
GROUP CONTENT
TOGETHER
(But does not create a separate sectioning
root)


#4SELF-CONTAINED
“SYNDICATABLE”
CONTENT
All <article>’s should be self-contained
elements
They can contain their own <h1>’s
<header>’s <footer>’s etc


#5ADDED MEANING
TO HTML5 TAGS
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Deﬁnition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<var>Variable</var>
<cite>Citation</cite>


E XAMPLE:
<!DOCTYPE html>
<html>
<head>
... Head Stuff ..
</head>
<body>
<header>
<h1>My Website</h1>
<nav id=‘main-menu’>
<h1>Main Menu</h1>
<ul>
<li><a href=’#’>Item 1</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>My Awesome Article</h1>
<h2>Sub Title</h2>
</hgroup>
<p> Lorem ipsum... </p>
</article>
<aside>
<h1>Blog roll</h1>
<p>Content something or other</p>
<ul>
</ul>
</aside>
</body>
</html>


CREATES AN OUTL INE OF:

http://gsnedders.html5.org/
outliner/

1. My Website
1. Main Menu
2. My Awesome Article
3. Blog Roll


NITTY GRITTY
DETAILS...
Can I use a semantic chop now?


YES, IF YOU INCLUDE
A SHIV FOR IE < 9
• html5shiv
• (Or just use modernizr.js, which
also includes it)
• Fine print: Javascript required


SO NO MORE <DIV>’S
AND <SPAN>’S?
• Not quite - <divs> and <spans>
should still be used for styling and
for organizing data with microdata.
• Remember: <article>, <section> et al
create new sectioning roots


PART 2:
ADDITIONAL
MEANING


SPEAKING OF
MICRODATA...
A way mark up *your existing html* to give it
machine readable meaning.


WHY?
Again - search engines. We
learned from the bad keyword-
stuﬃng days that pure meta-data
doesn’t work.


MICRO DATA EXAMPLE:
<div itemscope>
<p>My name is <span
itemprop="name">Neil</span>.</p>
<p>My band is called <span
itemprop="band">Four Parts Water</span>.</
p>
<p>I am <span
itemprop="nationality">British</span>.</p>
</div>

Create items with itemscope, add
properties with itemprop.


MORE
ATTRIBUTES
• Itemtype - Defines the vocabulary to be
used by the microdata format.
• Itemid - The unique identifier of the
item, if defined by the microdata
vocabulary.
• Itemref - Allows a microdata element to
reference another element on the page to
define it by either HTML id or by itemid.

Reference

WHERE IS IT
USED?
• Google Rich snippets
• http://www.google.com/
support/webmasters/bin/
answer.py?answer=99170


OPENGRAPH:
MAKING FACEBOOK
HAPPY
Facebook scans your page and pulls
information whenever someone likes or
shares a page of your site


IT’LL JUST PULL RANDOM
CR*P IF YOU DON’T ADD
OPENGRAPH TAGS


ADD META PR OPERTIES
TO YOUR <HEAD>

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://
www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://
ia.media-imdb.com/images/rock.jpg" />
...

http://ogp.me/


FINALLY RDFA


FINALLY RDFA
... Which is too complicated to cover in
a few minutes ...

But with it’s big brother RDF opens
you up to the full world of Web 3.0 &
the Semantic Web.


THE L INKED DATA GRAPH
T he Semantic Web


THANKS!
QUESTIONS?

Pascal Rettig
cykod.com
Twitter @cykod


Semantic chop

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (6)

Similar to Semantic chop

Similar to Semantic chop (20)

Recently uploaded

Recently uploaded (20)

Semantic chop