docs - examples page - update html semantic for accessibility purpose

Created by: Lausselloic

Hello,

I suggest to update the HTML semantic in docs/examples/index.md because actual one generate empty links, so it can't be understand with screen reader tools, and also can't be used for SEO.

There's also a break in title hierarchy h2-> h4. Maybe could use an unordered list for each rows, and put each example (picture, 'title', desc) into a list element. To improve the link consistency, maybe group picture and 'title' into it, and remove the title which is not really consistency, with a span with the h4 class?

What's your point of vue? I can make a PR if needed.

Here is the jsfiddle with the proposition : https://jsfiddle.net/sf4quyxm/

I propose to update from :

<div class="row bd-examples">
  <div class="col-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/starter-template/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
    </a>
    <h4>Starter template</h4>
    <p>Nothing but the basics: compiled CSS and JavaScript.</p>
  </div>

To :

<ul class="row bd-examples">
  <li class="col-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/starter-template/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
      <span class="h4">Starter template</span>
    </a>
    <p>Nothing but the basics: compiled CSS and JavaScript.</p>
  </li>