SlideShare une entreprise Scribd logo
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.
Exemples
Knowledge Graph
La sémantique HTML5
& Wordpress
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
/* 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
Le footer
Jouons un peu !
^-^
single.php
?
?
archive.php
?
La sémantique HTML5
& Wordpress
I: Pourquoi parler de sémantique ?
II : La sémantique avec HTML5
III : Les Microdatas
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">&copy; Monsite.org 2013 - tous droits
réservés</small></li>
</ul>
</div>
Exemples
CONTACT
FOOTER
Filet de navigation
<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/

Contenu connexe

En vedette

Homo-Ehe-Debatte
Homo-Ehe-DebatteHomo-Ehe-Debatte
Homo-Ehe-Debatte
nblock
 
Los Mayas y su relación con la naturaleza
Los Mayas y su relación con la naturalezaLos Mayas y su relación con la naturaleza
Los Mayas y su relación con la naturaleza
Universidad Arzobispo Loayza
 
Mineria1 2010
Mineria1 2010Mineria1 2010
Mineria1 2010
cristian
 
Sesion 7 la buena vida y donde encontrala
Sesion 7 la buena vida y donde encontralaSesion 7 la buena vida y donde encontrala
Sesion 7 la buena vida y donde encontrala
Asael Lopez
 
Presentation apéro swm public
Presentation apéro swm   publicPresentation apéro swm   public
Presentation apéro swm public
ShopWiz .me
 
Sciences en hashtags : la culture scientifique sur Twitter
Sciences en hashtags : la culture scientifique sur TwitterSciences en hashtags : la culture scientifique sur Twitter
Sciences en hashtags : la culture scientifique sur Twitter
Marion Sabourdy
 
Marchen cute
Marchen cuteMarchen cute
Marchen cute
nehcram
 
La gripe
La gripeLa gripe
Sesion 14 haciendote de un nuevo nombre en el trabajo
Sesion 14 haciendote de un nuevo nombre en el trabajoSesion 14 haciendote de un nuevo nombre en el trabajo
Sesion 14 haciendote de un nuevo nombre en el trabajo
Asael Lopez
 
iOS UX par iMakeit4U
iOS UX par iMakeit4UiOS UX par iMakeit4U
iOS UX par iMakeit4U
iMakeit4U
 
Ccpresentation
CcpresentationCcpresentation
Ccpresentation
sigi_dietz
 
Le futur simple correct
Le futur simple correctLe futur simple correct
Le futur simple correct
Marlène Fert
 

En vedette (17)

Art Konsept
Art KonseptArt Konsept
Art Konsept
 
Homo-Ehe-Debatte
Homo-Ehe-DebatteHomo-Ehe-Debatte
Homo-Ehe-Debatte
 
Los Mayas y su relación con la naturaleza
Los Mayas y su relación con la naturalezaLos Mayas y su relación con la naturaleza
Los Mayas y su relación con la naturaleza
 
Mineria1 2010
Mineria1 2010Mineria1 2010
Mineria1 2010
 
Sesion 7 la buena vida y donde encontrala
Sesion 7 la buena vida y donde encontralaSesion 7 la buena vida y donde encontrala
Sesion 7 la buena vida y donde encontrala
 
Presentation apéro swm public
Presentation apéro swm   publicPresentation apéro swm   public
Presentation apéro swm public
 
Sciences en hashtags : la culture scientifique sur Twitter
Sciences en hashtags : la culture scientifique sur TwitterSciences en hashtags : la culture scientifique sur Twitter
Sciences en hashtags : la culture scientifique sur Twitter
 
Marchen cute
Marchen cuteMarchen cute
Marchen cute
 
La gripe
La gripeLa gripe
La gripe
 
Typographie
TypographieTypographie
Typographie
 
Sélection ACT
Sélection ACTSélection ACT
Sélection ACT
 
Aimer
AimerAimer
Aimer
 
Sesion 14 haciendote de un nuevo nombre en el trabajo
Sesion 14 haciendote de un nuevo nombre en el trabajoSesion 14 haciendote de un nuevo nombre en el trabajo
Sesion 14 haciendote de un nuevo nombre en el trabajo
 
iOS UX par iMakeit4U
iOS UX par iMakeit4UiOS UX par iMakeit4U
iOS UX par iMakeit4U
 
Ccpresentation
CcpresentationCcpresentation
Ccpresentation
 
Website
WebsiteWebsite
Website
 
Le futur simple correct
Le futur simple correctLe futur simple correct
Le futur simple correct
 

Similaire à La sémantique html5 et Wordpress

Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
Indexation et optimisation technique - version 2010
Indexation et optimisation technique - version 2010Indexation et optimisation technique - version 2010
Indexation et optimisation technique - version 2010
JCDomenget
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
Hafid Denguir
 
03 seo indexation et optimisation technique
03 seo    indexation et optimisation technique03 seo    indexation et optimisation technique
03 seo indexation et optimisation technique
JCDomenget
 
Psm master 1 - indexation et optimisation technique SEO
Psm   master 1 -  indexation et optimisation technique SEOPsm   master 1 -  indexation et optimisation technique SEO
Psm master 1 - indexation et optimisation technique SEO
JCD srcmontbeliard
 
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnementDw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
CERTyou Formation
 
Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)
JCD srcmontbeliard
 
Screaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisanScreaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisan
Aymeric Bouillat
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
Francois ANDRE
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
Les-Tilleuls.coop
 

Similaire à La sémantique html5 et Wordpress (20)

Atelier template
Atelier templateAtelier template
Atelier template
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Indexation et optimisation technique - version 2010
Indexation et optimisation technique - version 2010Indexation et optimisation technique - version 2010
Indexation et optimisation technique - version 2010
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
03 seo indexation et optimisation technique
03 seo    indexation et optimisation technique03 seo    indexation et optimisation technique
03 seo indexation et optimisation technique
 
Psm master 1 - indexation et optimisation technique SEO
Psm   master 1 -  indexation et optimisation technique SEOPsm   master 1 -  indexation et optimisation technique SEO
Psm master 1 - indexation et optimisation technique SEO
 
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnementDw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
 
Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)
 
Screaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisanScreaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisan
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 

Dernier

procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Erol GIRAUDY
 
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdfTutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Erol GIRAUDY
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usagesCLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
Erol GIRAUDY
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 

Dernier (8)

procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
 
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdfTutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usagesCLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 

La sémantique html5 et Wordpress