HTML5 Semantics

Semantic (meaningful) markup

  • doctype – document type declaration
  • page language
  • header – introductory headings (may include navigation)
  • hgroup – grouping a few headings (h1-h6) together – removed from current specification
  • footer – typically contains information about a section, such as who wrote it, links to related documents, copyright data etc…
  • nav – major navigation on the page
  • article – for content which can stand on its own and could be syndicated
  • section – thematic grouping of content. A section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. Each section can have one heading associated with it and include any number of further nested sections.
  • aside – content related to primary content on the page, and which could be considered separate from that content.
  • figure – related, stand-alone image or video
  • figcaption – caption for figure
  • time – date and time
  • mark – indicates text as marked or highlighted for reference purposes
  • small – terms and conditions, legal disclaimer
  • div – has no semantic meaning at all. It’s just some box, that’s going to have some information. Use for layout purposes.
  • further info – HTML5 specification by W3C

What element to choose and when? Flowchart published by HTML5Doctor may help.

Valid web page (http://validator.w3.org/) means that a web page code follows W3C specification. It doesn’t necessarily mean that the page is semantically correct.

 

HTML5 links

  • link to a new kind of content, e.g. other pages, sites, documents, feeds etc…
    <a href="page.html">Standard link</a>
  • link to external resources that enhance the page, e.g. stylesheets, favicons. Link relationships explain the purpose of the link, not just where the link goes to.
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="feed.rss">
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

 

Structured data – more semantic content

schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a common vocabulary for describing data on the web. It provides a standardized way to label specific types of content.  It means that search engines and other machines can read the information on the page and identify what kind of information it exactly is. Thus it can be displayed accordingly. Google recommends to use Microdata over Microformats and RDFa (answer).

<div itemscope itemtype="http://schema.org/Product">
    <h3 itemprop="name">Product 01 title</h3>
    <p itemprop="description">Product 01 Description</p>
    <p itemscope itemtype="http://schema.org/AggregateRating">
        product rating is
        <span itemprop="ratingValue">01</span> of 
        <span itemprop="bestRating">5</span> 
        (total votes <span itemprop="ratingCount"> 98</span>)
    </p>
</div>

 

HTML5 Outline algorythm

The outline creates machine readable table of contents.The outline is defined by sections and heading content. Body tag is the outline’s root. Sectioning elements are as follows:

  • article
  • aside
  • h1 – h6
  • nav
  • section

Sample outline test tools:

 

Browser support and backwards compatibility

  • html5shim or html5shiv (the same)usage
    <!--[if lt IE 9]>
    <script src="path/to/script.js"></script>
    <![endif]-->

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>