Search code examples
htmle-commerceonline-store

HTML5 official examples for e-commerce


While building a new onlineshop (based on magento) we considered to make use of the new HTML5 tags like <header><footer><section><article> etc.

We read lots of blogs / websites describing how to use the tags - unfortunately, most of the time the authors use Blogs or News Sites for their examples but not a typical e-commerce shop with landing-pages, category pages, product pages.

Also, we found some shops that are using the above-mentioned tags already - but they do differently.

Therefore we would like to know if someone knows if there are any (maybe official) examples of how to structure e.g. category- or product pages with HTML5-Tags.


Solution

  • Many HTML5 tags have their own semantic meaning and are self-explanatory. There are no hard-and-fast rules.

    <figure> is for an image or diagram.

    <section> is for a section or category, etc.

    There aren't really any standards, other than trying to be logical in your choice of tag. While you can find examples of how people are using them, in the bigger scheme of things, it doesn't matter all that much. What matters is what drives customers to make purchases and having a decent structure to support SEO.

    If you really want to get into semantic markup that can actually be used (such as in Google Offers) then you may want to consider a micro-format schema as an alternative.

    http://schema.org/Product