There are HTML tags for different purposes
• Things like…
<h1>, <h2>, <h3>…
<em> (or <i>)
<ul>, <ol> and <li>
<dl>, <dfn>, <abbr>, <address>, <cite>, <ins>, <del>
• It’s like (it is!) grammar.
• Using these tags provides and clarifies meaning.
• <div>John said, “hello Jane”.</div>
• <p>John said, <q
• What happens if/when this becomes standard?
• This kind document markup has been part of HTML for
So what’s the deal with Geocities?
• Pro tip: Geocities was a little thin on semantic value…
Code vs. Presentation
• Back in the bad old days, using semantic markup was
• HTML Tags have default visual characteristics and
• Bastardising flexible tags (generally <table> and <br>
tags) was easier than using semantically correct tags.
Pro tip: Don’t hate tables – tabular data can be great, readable, linkable content.
• This is about much more than error-free valid HTML
– it’s about using the language correctly and
• There are overlaps, and validation is important – but
this is about grammar, rather than spelling.
Pro tip: W3 has galleries for websites which validate against HTML, CSS and
accessibility standards which link back to the source.
Capitalism saved the day
• Markup and presentation are separate (mostly); we can ensure that
content can be semantically accurate and attractive.
• There are no scenarios in which SEO should conflict with design, usability
So what’s next?
• We can help search engines and software to
understand the nature of specific chunks of semantic
HTML and content.
• …But these are the tools for creating an
encyclopaedia, rather than poetry.
• <productinfo>Blue Widget, £19.99, 4.5/5
• “What’s the relationship between the life expectancy in Leeds and
the number of SEO agencies operating in the city over the last
• All of this data exists… but in different formats - human-readable
data and machine-readable data.
• This distinction is the single biggest bottleneck for the evolution of
• “We all know that we have to produce a human-readable version of
the thing... why not use that as the primary source?”
Dan Connolly, W3, 2000
• Microformats.org launches in 2005, providing
common approaches to adding meaningful relational
• Using the tools already at hand (HTML class
attributes), it allows us to add ‘bigger’ and
connected semantic content.
• The Carriageworks
The Electric Press, 3 Millennium Square, Leeds, LS2 3AD
• We have sufficient human experience to interpret this
address and decode the components.
• Is the street ‘The Electric Press’?
• In order to progress, every piece of kit needs to be able
to explicitly understand each component of the address
What’s this achieve?
• Practical applications:
Build software or search engines to find and/or process all occurrences
• This is game-changing, but not significantly commercially
viable or exciting…
• Few systems supported this, so nobody took the time to
implement it. Catch 22?
• Until Google came in, introduced Rich Snippets (based on
microformats) in May 12, 2009, and started an arms race.
Reported clickthrough rate increases of up to 30%.
This is no longer an abstract pipe-dream about connectivity – it’s
real, now, commercial and growing.
Microformatting vs. OGP
• Facebook have been doing similar things with the Open
• OGP works at page-level, and allows pages to be more
richly and accurately represented in the social graph (on
Facebook walls, in posts, etc.).
• You can use both together.
• Both of these approaches are provider-specific and tied
to their services.
• In July 2011, Google, Bing and Yahoo announce a
partnership in the same spirit as Sitemaps.org.
• A formal, semantic and infinitely extensible grammar
designed to allow for and provide explicit markup for
every type of everything.
• This already plays a part of rich snippets, and is gradually
replacing microformats in common usage.
Pro tip: You can combine standard HTML meta, OGP meta and schema meta into single tags.
• Schema is the tip of the iceberg of a wider
movement and evolution.
• It’s a means to an end, and it’s the beginning of
something bigger (web 3.0).
• It’s only one tool from the kit – use it alongside
OGP, normal meta and semantic HTML tags.
Schema – Hierarchies of classification
Entities that have a somewhat fixed, physical
A public structure, such as a town hall or concert
A theatre or other performing art centre.
This one doesn’t exist… yet.
• This all exists now, and you can do it now; this is
widely supported and relatively straight-forward.
• It doesn’t require mass re-engineering – the whole
point is that you only need to mark up the existing
‘human’ information and presentation.
Defines an article
Defines additional details that the user can view or hide
Defines a visible heading for a <details> element
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
Defines a caption for a <figure> element
Defines a footer for a document or section
Defines a header for a document or section
Groups a set of <h1> to <h6> elements when a heading has multiple levels
Defines marked/highlighted text
Defines navigation links
Defines a section in a document
Defines a date/time
• Mark up simple content semantically to enrich context and
get incremental relevance, traffic, exposure and links.
• When you make content recommendations, write the code!
• Invest in marking up templates (‘page types’) with Schema
• Start thinking about HTML 5, too!
• Invest in extending schema itself where your
products, services or business isn’t represented (and
evangelise to get links).