Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What’s the big deal about semantic HTML?


Published on

A brief history of the web, browser capabilities and semantic HTML - from Geocities to Microformats, Schema and beyond, and how this affects SEO; both today and in the future.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

What’s the big deal about semantic HTML?

  1. 1. What’s the big deal about semantic <acronym title=“Hypertext markup language”>HTML </acronym>? @jonoalderson
  2. 2. The reality of SEO? • Getting the big things that make the difference done is hard. • Getting little things done is easier, but these lack impact. • You have two options (do both)… @jonoalderson
  3. 3. Schmooze @jonoalderson
  4. 4. Squeeze @jonoalderson
  5. 5. @jonoalderson
  6. 6. There are HTML tags for different purposes • Things like…      <p> <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. @jonoalderson
  7. 7. Adding context • <div>John said, “hello Jane”.</div> • <p>John said, <q cite="">hello Jane</q>.</p> • What happens if/when this becomes standard? • This kind document markup has been part of HTML for years. @jonoalderson
  8. 8. So what’s the deal with Geocities? • Pro tip: Geocities was a little thin on semantic value… @jonoalderson
  9. 9. Code vs. Presentation • Back in the bad old days, using semantic markup was design-prohibitive. • HTML Tags have default visual characteristics and behaviours. • 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. @jonoalderson
  10. 10. Validation? • This is about much more than error-free valid HTML – it’s about using the language correctly and contextually. • 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. @jonoalderson
  11. 11. 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 or accessibility. @jonoalderson
  12. 12. 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 ratings</productinfo> @jonoalderson
  13. 13. The Challenge… • “What’s the relationship between the life expectancy in Leeds and the number of SEO agencies operating in the city over the last decade?” • 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 the web. • “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 @jonoalderson
  14. 14. Microformats • launches in 2005, providing common approaches to adding meaningful relational markup. • Using the tools already at hand (HTML class attributes), it allows us to add ‘bigger’ and connected semantic content. @jonoalderson
  15. 15. Addresses • 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 markup. @jonoalderson
  16. 16. hCard <div id=“vcard-the-carriageworks” class=“vcard”> <h1 class=“org fn n”>The Carriageworks</h1> <div class=“adr”>The Electric Press <span class="street-address"> 3 Millennium Square </span>, <span class=“locality”>Leeds</span>, <span class=“postal-code”> LS2 3AD</span>. <div><abbr title=“Telephone number”>Tel</abbr>: <span class=“tel”>0113 224 3801</span></div> </div> </div> @jonoalderson
  17. 17. What’s this achieve? • Practical applications:  Build software or search engines to find and/or process all occurrences of X • 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. @jonoalderson
  18. 18. OMG! • 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. @jonoalderson
  19. 19. Microformatting vs. OGP • Facebook have been doing similar things with the Open Graph Protocol. • 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. • But… • Both of these approaches are provider-specific and tied to their services. @jonoalderson
  20. 20. Schema @jonoalderson
  21. 21. Schema • In July 2011, Google, Bing and Yahoo announce a partnership in the same spirit as • 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. @jonoalderson
  22. 22. Schema Overkill? • 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. @jonoalderson
  23. 23. Schema - Restaurant <div itemscope itemtype=""> <span itemprop="name">GreatFoodDeals</span> <div itemprop="aggregateRating" itemscope itemtype=""> <span itemprop="ratingValue">3</span> stars - based on <span itemprop="reviewCount">150</span> reviews </div> <div itemprop="address" itemscope itemtype=""> <span itemprop="streetAddress">123 Example Road</span> <span itemprop="addressLocality">Trumpton</span>, <span itemprop="addressRegion">Noddy County</span> <span itemprop="postalCode">12345</span> </div> <span itemprop="telephone">(123) 456-7890</span> <a itemprop="url" href=""></a> Hours: <meta itemprop="openingHours" content="Mo-Sa 09:00-17:30">Mon-Sat 9am - 5:00pm Categories: <span itemprop="servesCuisine"> Indian </span> Price Range: <span itemprop="priceRange">£££</span> </div> @jonoalderson
  24. 24. Schema – Hierarchies of classification • • Entities that have a somewhat fixed, physical extension. A public structure, such as a town hall or concert hall. • A theatre or other performing art centre. • This one doesn’t exist… yet. @jonoalderson
  25. 25. Schema – Practical Application • Search verticals, rich snippets, mashups, crawlers, platforms, functionality, context, exposure, clickthrough, links • Support for everything*  *beach, pond, movietheatre, aquarium, dancegroup, optici an, tatooparlor, nutritionalinformation, literaryevent… @jonoalderson
  26. 26. When? • 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. @jonoalderson
  27. 27. HTML Tag Description <article> Defines an article <details> Defines additional details that the user can view or hide <summary> Defines a visible heading for a <details> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> Defines a caption for a <figure> element <footer> Defines a footer for a document or section <header> Defines a header for a document or section <hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels <mark> Defines marked/highlighted text <nav> Defines navigation links <section> Defines a section in a document <time> Defines a date/time @jonoalderson
  28. 28. Immediate Actions • 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 data. • 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). @jonoalderson
  29. 29. Resources • Microformat Cheat Sheet: -sheets/microformats-cheat-sheet/ @jonoalderson
  30. 30. Jono Alderson @jonoalderson @jonoalderson