Microdata

Adding microdata to Web pages helps search engines to better understand the pages’ content, their topics, etc. The main purpose of microdata is Search Engine Optimization.This information is not visible to humans: it is pure semantic information.

example:

  1. <section itemscope itemtype=http://schema.org/Person&#8221;>
  2.     <h1>Contact Information</h1>
  3.     <dl>
  4.       <dt>Name</dt>
  5.       <dd itemprop=“name”>Michel Buffa</dd>
  6.       <dt>Position</dt>
  7.       <dd><span itemprop=“jobTitle”>
  8.            Professor/Researcher/Scientist</span> for
  9.           <span itemprop=“affiliation”>
  10.               University of Côte d’Azur, France
  11.           </span>
  12.       </dd>
  13.     </dl>
  14.     <!– SURFACE ADDRESS GOES HERE –>
  15.     <h1>My different online public accounts</h1>
  16.     <ul>
  17.        <li><a href=http://www.twitter.com/micbuffa&#8221;
  18.               itemprop=“url”>Twitter profile</a></li>
  19.        <li><a href=http://www.blogger.com/micbuffa&#8221;
  20.               itemprop=“url”>Michel Buffa’s blog</a></li>
  21.     </ul>
  22. </section>

Testing tools

One of the most popular resources for testing microdata (as well as microformats and RDFa) is the Google page about rich snippets and structured data. This page contains a link to a structured data testing tool that you can use to see how Google recognizes the semantic data you embed in your HTML code.

Microdata Tools

There are many tools available (most are free) that you can use for generating, visualizing and debugging microdata. We list some of them in this page, but feel free to share the tools you find / like in the forums.

MICRODATA GENERATORS

There are many free tools you can use to automatically generate microdata for describing persons, restaurants, movies, products, organizations, etc. such as:

EXAMPLES OF WELL STRUCTURED PAGES:

http://output.jsbin.com/buriqi/35

http://output.jsbin.com/wozoye

 

The new HTML5 DOWNLOAD attribute for A HREF

Example:

  1. <ahref=“//d37djvu3ytnwxt.cloudfront.net/assets/courseware/v1/aa323a9c005768df2c1e674c31002efb/asset-v1:W3Cx+HTML5.1x+3T2016+type@asset+block/normal.gif”
  2.    download=“MichelBuffa.gif”>
  3.     download a picture of Michel Buffa
  4. </a>

WARNING: since 2015, and for security reasons, the image should be located on the same domain as the HTML page that contains the link (using a relative URL works well, for example, but linking a page on another domain will not work – it will keep its original name).

The HTML5 TRANSLATE ATTRIBUTE

HTML5 gives us a new translate attribute. This attribute is used to limit the impact of  translation tools such as Google Translate by prohibiting the translation of certain content. In many cases some parts of a document should not be translated.

Use cases include:

    • HTML pages that contain source code: you would certainly not like to see the Java or PHP or whatever programming language parts of your page translated into another spoken language!
    • Video game Web sites that propose cheat codes; the codes do not have to be translated,
    • Street names, author names in an “about” page must not be translated,
    • etc.

<p translate=“no”>This is a text in a paragraph element, that should not be translated: the p element has a translate=”no” attribute.<span> This part that is in a span element embedded within the paragraph. It does not have a translate attribute but inherits the translation-mode of the p and will not be translated too</span>. This is the end of the paragraph…</ p>

time and mark elements

The <time> element is useful for marking a time or a duration in a document.

https://www.w3.org/TR/html5/text-level-semantics.html#the-time-element

The datetime attribute may be present. If present, its value must be a representation of the element’s contents in a machine-readable format.

A valid month string

<time>2011-11</time>

A valid date string

<time>2011-11-12</time>

A valid yearless date string

<time>11-12</time>

A valid time string

<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.929</time>

A valid floating date and time string

<time>2011-11-12T14:54</time>
<time>2011-11-12T14:54:39</time>
<time>2011-11-12T14:54:39.929</time>
<time>2011-11-12 14:54</time>
<time>2011-11-12 14:54:39</time>
<time>2011-11-12 14:54:39.929</time>

Times with dates but without a time zone offset are useful for specifying events that are observed at the same specific time in each time zone, throughout a day. For example, the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise moment across all time zones. For events that occur at the same time across all time zones, for example a videoconference meeting, a valid global date and time string is likely more useful.

A valid time-zone offset string

<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>

For times without dates (or times referring to events that recur on multiple dates), specifying the geographic location that controls the time is usually more useful than specifying a time zone offset, because geographic locations change time zone offsets with daylight savings time. In some cases, geographic locations even change time zone, e.g. when the boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There exists a time zone database that describes the boundaries of time zones and what rules apply within each such zone, known as the time zone database. [TZDATABASE]

A valid global date and time string

<time>2011-11-12T14:54Z</time>
<time>2011-11-12T14:54:39Z</time>
<time>2011-11-12T14:54:39.929Z</time>
<time>2011-11-12T14:54+0000</time>
<time>2011-11-12T14:54:39+0000</time>
<time>2011-11-12T14:54:39.929+0000</time>
<time>2011-11-12T14:54+00:00</time>
<time>2011-11-12T14:54:39+00:00</time>
<time>2011-11-12T14:54:39.929+00:00</time>
<time>2011-11-12T06:54-0800</time>
<time>2011-11-12T06:54:39-0800</time>
<time>2011-11-12T06:54:39.929-0800</time>
<time>2011-11-12T06:54-08:00</time>
<time>2011-11-12T06:54:39-08:00</time>
<time>2011-11-12T06:54:39.929-08:00</time>
<time>2011-11-12 14:54Z</time>
<time>2011-11-12 14:54:39Z</time>
<time>2011-11-12 14:54:39.929Z</time>
<time>2011-11-12 14:54+0000</time>
<time>2011-11-12 14:54:39+0000</time>
<time>2011-11-12 14:54:39.929+0000</time>
<time>2011-11-12 14:54+00:00</time>
<time>2011-11-12 14:54:39+00:00</time>
<time>2011-11-12 14:54:39.929+00:00</time>
<time>2011-11-12 06:54-0800</time>
<time>2011-11-12 06:54:39-0800</time>
<time>2011-11-12 06:54:39.929-0800</time>
<time>2011-11-12 06:54-08:00</time>
<time>2011-11-12 06:54:39-08:00</time>
<time>2011-11-12 06:54:39.929-08:00</time>

Times with dates and a time zone offset are useful for specifying specific events, or recurring virtual events where the time is not anchored to a specific geographic location. For example, the precise time of an asteroid impact, or a particular meeting in a series of meetings held at 1400 UTC every day, regardless of whether any particular part of the world is observing daylight savings time or not. For events where the precise time varies by the local time zone offset of a specific geographic location, a valid floating date and time string combined with that geographic location is likely more useful.

A valid week string

<time>2011-W46</time>

Four or more ASCII digits, at least one of which is not “0” (U+0030)

<time>2011</time>
<time>0001</time>

A valid duration string

<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

The <mark> element

The HTML <mark> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.

  1. <body>
  2. <pre>
  3. <code><mark>var</mark> i = 3;</code>
  4. </pre>
  5. <p>The var keyword is used to declare a variable in JavaScript.</p>
  6. </body>

 

Retro-compatibility and polyfills

Sources for checkin if some functionality work in old browsers:

http://www.caniuse.com, http://www.html5please.com … or you can just use a search engine looking for the term Polyfill.

A polyfill is a piece of JavaScript code you include in your HTML page, that will emulate HTML5 features not yet implemented in browsers. Usually a polyfill starts emulating a feature only when native support is not detected.

html5-summary-details-polyfill

Just add JS script:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset=“UTF-8”>
  5.    <title>Contact manager</title>
  6.    
  7.       (function(e,t){function r(e){var t=null;… // POLYFILL CODE HERE!
  8.        …
  9.    
  10. </head>

main element in the HTML5

BEST PRACTICE:

For accessibility matters, a best practice is to split your page content into “regions” defined by the five 5 elements (aside, footer, header, main and nav) like:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.      <title>Some title</title>
  5.    </head>
  6. <body>
  7. <header>header text:
  8.    <nav>
  9.      <h2>Click these links to navigate…</h2>
  10.      <ul>
  11.         <li><a href=“link1.html”>link1</a></li>
  12.         <li><a href=“link1.html”>link2</a></li>
  13.         <li><a>TEST</a></li>
  14.      </ul>
  15.    </nav>
  16. </header>
  17. <main>
  18.   <h1>link1</h1>
  19.   <nav>
  20.      <h2>Please choose:</h2>
  21.      <ul>
  22.         <li><a href=“#1”>1</a></li>
  23.         <li><a href=“#2”>2</a></li>
  24.         <li><a href=“#3”>3</a></li>
  25.      </ul>
  26.   </nav>
  27.   <h2 id=“1”>1</h2>
  28.   <p>1.1</p>
  29.   <p>1.2</p>
  30.   <p>1.3</p>
  31.   <p>1.4</p>
  32.   <p>1.5</p>
  33.   <h2 id=“2”>2</h2>
  34.   <ul>
  35.      <li>2.1</li>
  36.      <li>2.2</li>
  37.      <li>2.3</li>
  38.      <li>2.4</li>
  39.      <li>2.5</li>
  40.      <li>2.6</li>
  41.   </ul>
  42.   <h2 id=“3”>3</h2>
  43.   <ul>
  44.     <li>3.1</li>
  45.     <li>3.2</li>
  46.     <li>3.3</li>
  47.   </ul>
  48. </main>
  49. <footer>Copyright 2012 B.lawson</footer>
  50. </body>
  51. </html>

Best practices when using sectioning elements

Best structure for Header tags,
always add a heading to explicit sectioning content:

  1. <body>
  2. <h1>Apples</h1>
  3. <p>Apples are fruit.</p>
  4. <section>
  5.      <h2>Taste</h2>
  6.      <p>They taste lovely.</p>
  7.      <section>
  8.          <h3>Sweet</h3>
  9.          <p>Red apples are sweeter than green ones.</p>
  10.      </section>
  11. </section>
  12. <section>
  13.      <h2>Color</h2>
  14.      <p>Apples come in various colors.</p>
  15. </section>
  16. </body>