La sémantique html5 et Wordpress

La sémantique HTML5
& Wordpress
M.MARTINET Jacques
Intégrateur Web et formateur Web
http://www.vectorskin.com
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas
Meetup du 19/09/2013
http://cantine.atlantic2.org/evenements/

L’importance
de la sémantique
le Web devient
sémantique
Être compatible avec
les moteurs de
recherche
Un code
compréhensible par
tout le monde

Le Web sémantique ?
Par l’ajout de nouvelles balises HTML et d’un nouveau format de métadonnées,
un des buts du web sémantique est d’offrir aux machines la capacité de
comprendre le contenu qu’elle traite.
Avec HTML5 :
- Les balises HTML sémantique (section, article, nav…)
- Microdata (schema.org)
Autre…
- RDFa
- SPARQL
- Knowledge Graph
- Open Graph
- etc.

La sémantique HTML5
& Wordpress
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas

/* tags HTML5 qui se comportent comme des blocs */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, menu, nav,
section, video { display: block; }
/* tags de type en ligne */
abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; }
Compatibilité
http://caniuse.com
(la compatibilité est à voir au niveau navigateur
plus qu’au niveau du CMS)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset=utf-8"/>
<title>Titre de ma page Web</title>
<meta name="author" content="Jacques Martinet" />
<link rel="stylesheet" href="http://monsite.org/style.css" media="screen" />
</head>
<body>
(…)
<script src="http://monsite.org/jquery.js"></script>
<noscript><p>La fonction JavaScript n'est pas prise en charge par votre navigateur.</noscript>
</body>
</html>
Structure d’un document HTLM5

En passant ….
L'attribut charset (sur <meta>)
<meta charset="utf-8">
L'élément <link>
<link rel="stylesheet" href="style.css">
L'élément <script>
<script src="script.js"></script>
L’attribut Type est obsolète pour les balises
<link> et <script>.

Les balises HTML5
http://www.w3schools.com/tags/default.asp
http://html5doctor.com/

1er
cas
Le contenu est implicite
<div><p>Mon contenu principal</p></div>
2d cas :
Le contenu est indépendant du reste de la page et peut-être syndicalisé, typique d’un article de Blog :
on utilise alors la balise
<article><p>Mon contenu principal</p></article>
3eme cas :
Le contenu n’est pas indépendant, mais fait partit d’un ensemble comme un chapitre d’un livre
<section><p>Mon premier contenu</p></section>
<section><p>Mon second contenu</p></section>

Bien choisir les balises de structure

http://gsnedders.html5.org/outliner/
HTML5 outliner
Le plan d’un document HTML5

<header>
<h1>Titre</h1>
     <nav>
     <h1>Titre</h1>
      <ul>….</ul>
     </nav>
</header>
<article>
<header>
            <h1>Titre</h1>
              <time datetime="2011-04-01T12:42:42+02:00" pubdate="pubdate">Posté le premier avril 2011</time>
</header>
<p>…</p>
<footer>…</footer>
</article>
<footer>
<h1>Titre</h1>
</footer>
Bien choisir les balises de structure

<nav id="mainnav" role="navigation">
    <ul class="menu" id="menu-menu-du-header">
           <li class="menu-item current-menu-item"><a href="http://www.monsite.org/">Accueil</a></li>
           <li class="menu-item menu-item-object-category"><a href="http://www.monsite.org/projets/">Projets</a></li>
           <li class="menu-item menu-item-object-page"><a href="http://www.monsite.org/contact/">Contact</a>
   </ul>
</nav>
<?php
$defaults = array(
'theme_location'  => 'InHeader',
'menu'            => 'Menu Header',
'container'       => 'nav',
'container_class' => '',
'container_id'    => 'mainnav',
'menu_class'      => 'menu',
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'           => 0,
'walker'          => ''
         );
         wp_nav_menu( $defaults );
?>
La navigation

• Les balises de sections sont absentes
• Certaines balises n’ont pas besoin d'être fermées comme les balises <img>,
<br>
• Va manquer des attributs additionnels
• Manque la balise <figure>
• http://www.creativejuiz.fr/blog/wordpress/wordpress-transformer-code-caption-
html5-figure-figcaption
Le contenu éditorial
Rajouter des shortcodes et modifications
dans function.php si nécessaire

Attributs data-*
<img src="mamoto.jpg" alt="Une moto rouge" id="moto"
data-auteur="Simon" data-lieu="Strasbourg"
data-materiel="EOS" data-gps="48.582967,7.74828">
// Lire
$("#moto").data("lieu");
// Modifier l'attribut
$("#moto").attr("data-lieu","Strasbourg");

MICRODATA
http://schema.org/
Spécifications W3C : www.w3.org/TR/microdata/
Ce qu’en dit Google : https://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035
Tester son code : http://www.google.com/webmasters/tools/richsnippets

MICRODATA
https://support.google.com/webmasters/answer/99170
Types d'extraits enrichis :
Balisage schema.org pour les vidéos
Événements
Extraits enrichis : applications logicielles
Extraits enrichis : avis
Extraits enrichis : musique
Extraits enrichis : notes associées aux avis
Extraits enrichis : personnes
Extraits enrichis : produits
Extraits enrichis : recettes
Extraits enrichis : rubriques de fil d'ariane
Organisations
Types d'applications logicielles compatibles
Vidéos : Facebook Share et RDFa

<ul itemtype="http://schema.org/Person" itemscope="itemscope" class="list-localisation">
<li><span itemprop="name">Prénom NOM</span> - <span itemprop="jobTitle">Mon métier</span>
<ul itemtype="http://schema.org/PostalAddress" itemscope="itemscope">
<li><span itemprop="streetAddress">120 rue du Calvaire de Grillaud</span></li>
<li><span itemprop="postalCode">44100</span> <span itemprop="addressLocality">Nantes</span> - <span
itemprop="addressCountry">FR</span></li>
</ul>
</li>
<li>Tél : <span itemprop="telephone">02 51 84 77</span></li>
<li><a itemprop="email" href="mailto:contact@moniste.org">contact@moniste.org</a></li>
</ul>
<div itemtype="http://schema.org/WPFooter" itemscope="itemscope" class="container">
<ul class="list-copyright">
<li class="seven columns"><small itemprop="description">Description de mon Footer</small></li>
<li class="five columns end"><small itemprop="copyrightHolder">© Monsite.org 2013 - tous droits
réservés</small></li>
</ul>
</div>
Exemples
CONTACT
FOOTER

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<header>
<h1 class="entry-title"> <?php the_title(); ?> </h1>
<div class="entry-meta">
<span class="meta-prep meta-prep-author">Publié le</span>
<time pubdate datetime=" <?php the_time( DATE_W3C ); ?> "
class="entry-date">
<?php the_time('j F Y'); ?>
</time>
<span class="author vcard">Auteur</span>
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-utility entry-footer">
<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>
</footer>
</article>
Les microformats dans Wordpress
http://www.seomix.fr/microformats-microdata-wordpress/

C’est fini….merci d’être venu nous voir !
http://www.wp-nantes.org/
http://www.vectorskin.com/

La sémantique html5 et Wordpress

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a La sémantique html5 et Wordpress

Similar a La sémantique html5 et Wordpress (20)

La sémantique html5 et Wordpress