What’s the big deal about semantic HTML?

4,702 views

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="http://example.com/chatlog/123">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 • Microformats.org 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 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. @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="http://schema.org/Restaurant"> <span itemprop="name">GreatFoodDeals</span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">3</span> stars - based on <span itemprop="reviewCount">150</span> reviews </div> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <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="http://www.greatfooddeals.com">www.greatfooddeals.com</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: http://www.addedbytes.com/cheat -sheets/microformats-cheat-sheet/ @jonoalderson
  30. 30. Jono Alderson jonoalderson@gmail.com @jonoalderson www.jonoalderson.com @jonoalderson

×