Sites


initiation à HTML5

Structure du texte

L'écriture du texte, comme nous l'avons déjà vu, doit être au mieux structuré, en particulier en HTML5. Cela va bien sûr signifier le recours à des balises en adéquation avec le contexte et l'objectif.

Balises sémantiques de structuration 

Souvenons-nous déjà des balises de structuration du contenu.

  • header : permets de définir une zone d'en-tête, en général le titre principal ou un texte introductif.
  • footer : zone de bas de contenu, où sont souvent notés les dates de publications, noms d'auteur et autres informations relatives au texte lui-même.
  • main : zone principale de contenu de la page web.
  • article : une partie de la page ayant une homogénéité de contenu, un article de blog peut être un bon exemple.
  • section : un découpage d'un contenu plus important, par exemple d'un article.
  • aside : une zone de contenu annexe au contenu principal, comme des notes ou des compléments d'information.
  • nav : une zone de navigation qui contiendra le plus souvent une liste de liens.

Toutes ces balises sont apparues en HTML5. Elles permettent aux moteurs de recherche de bien comprendre le rôle des informations de la page et de référencer au mieux les parties les plus importantes. Un corps de base en HTML5 ressemblera donc souvent à :

<body>
   <header></header>
   <nav></nav>
   <main>
      <article>
         <header></header>
         <section></section>
         <section></section>
         <aside></aside>
      </article>
   </main>
   <aside></aside>
</body> 

Hormis main, toutes ses balises peuvent être utilisées plusieurs fois dans la page.  Leur contenu sera attaché à l'élément dans lequel elles sont insérées. Par exemple, le premier header de notre exemple pourra contenir le titre de la page web (bandeau), alors que le header placé dans article contiendra le titre spécifique de l'article. idem pour les autres : le aside directement enfant de body sera considéré comme donnant des informations annexes sur la page web, alors que celui placé dans article fournira des informations spécifiques à l'article.

On voir ici une donnée fondamentale du HTML5 par rapport au pratiques précédentes : il faut absolument éviter de structurer le texte selon sa mise en forme, mais bien selon la relation entre les différentes informations

Balises pour mettre en forme le texte structuré

Elles ne sont bien sûr pas les seules et nous avons aussi régulièrement été confrontés aux balises :

 

  • h1 à h6 pour les titres, éventuellement insérées dans un header.
  • p pour un paragraphe. 

 

 Ce sont là des balises extrêmement courantes que l'on retrouve dans presque tous les sites.

On pourra donc avoir quelque chose du genre :

 <section>
   <header>
      <h1>Les titres à la nouvelle sauce</h1>
      <p>Les titres peuvent dorénavant être encadrés dans un hgroup pour être associés à des informations comme dans le cas de ce paragraphe d'introduction.</p>
   </header>
   <p>Les titres commencent tous par la lettre h, comme en xHTML voire même le HTML1 :)</p>
   <p>Mais la capacité de les placer à différents niveaux de la page pour structurer efficacement chaque contenu de la page est un apport fondamental.</p>
</section>

ce qui donne ici (dans jsbin sur chromium/linux) :

Lorsqu'un h1 est placé en tant que fils de body, il est considéré comme titre de la page, mais lorsqu'il est placé comme fils d'article, il est considéré comme titre de l'article et ne vas se confondre avec le premier. Cet apport du HTML5 est une grande clarification des différents contenus placés dans les différents textes d'une même page.

Certains navigateurs différencient donc les titres h* selon leur position dans le document et l'imbrication dans laquelle ils se trouvent. Ainsi dans Chrome ou Firefox, un h1 placé dans un header de body ne sera pas considérer identique à un h1 d'un header de section (qui apparaît en fait comme un h2, donc moins important).

 Cependant, une validation du code auprès des services du W3C (http://validator.w3.org), sans mentionner d'erreur, mettra en garde contre cette pratique qui peut introduire des différences d'interprétation :

On pourra faire la même observation pour le footer : si le pied de page est bien connu au niveau du site, placé en bas, et contenant les informations tels que contacts, rubriques principales... footer peut aussi être intégrés dans les autres éléments tels que section ou article, par exemple pour mentionner l'auteur ou la date de publication (souvent placé en bas de l'article). Dans le cas d'un contact, on pourra même compléter le code avec la balise address qui sert spécifiquement à mentionner un contact :

 

<footer>
 <address>
  Pour plus d'informations, contactez
  <a href="mailto:ld@example.com">Laurent Dupont</a>.
 </address>
 <p><small>© copyright 1999 - CC-BY</small></p>
</footer>

Concernant les titres h1 à h6, la pratique xhtml consistait  n'avoir qu'un h1 par page et à utiliser les autres en fonctions de la structure du document. En HTML5, la recommandation mentionne expressément que le h1 peut être utilisé plusieur sfois dans une page et êtr ecorrectement compris selon son contexte d'utilisation. Ainsi un h1 placé en tête de main sera considéré inférieur (h2) par rapport à un h1 placé dans body. Le premier cas permet cependant d'exprimer clairement l'importance du titre dans son contexte. Il peut donc être intéressant d'utiliser un h1 pour chaque article, chaque article ayant son titre propre.

Pour plus d'infrmaitons, reportez-vous à http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.

gras (b) et italique (i) sont bannis et span

Concernant la mise en forme de texte, elle est maintenant strictement interdite en HTML5 (comme en xHTML pour la majeure partie) est doit être réalisée uniquement en CSS. Ainsi les balises b et i qui servaient auparavant à mettre en gras et en italique ne seront plus utilisées que pour faire mise en évidence de texte dans le texte comme il pourrait être fait avec strong ou em.

Attention cependant la confusion pourra toujours venir du fait que les navigateurs pourront toujours afficher ces balises comme du gras et de l'italique par défaut. Il sera donc particulièrement important d'utiliser le CSS pour adapter leur mise en forme. 

Pour des changements de mise en forme sans signification sémantique, le recours à l'élément span reste possible. Celle-ci est sans mise en forme ce qui implique qu'elle sera utilisée pour placer un attribut spécifique ou associer une classe CSS.

Citation et balises spécifiques

A noter cependant que pour certains types d'informations, des éléments spécifiques seront toujours utilisés comme :

  • cite pour les noms d'ouvrage (livre...)
  • ou q pour les citations dans le texte.

Pour rappel, les blocs de citations sortis du paragraphe courant seront toujours représentés par blockquote qui agit comme une balise de section et qui peut contenir plusieurs paragraphes, voire titres et footers... et qui peut être accompagné de l'attribut cite pour mentionner explicitement la source et ainsi faciliter la tâche de mise en relation des moteurs de recherche.

 <p>Le philosophe français <strong>Descartes</strong> a écrit dans <cite>Méditations sur la philosophie première</cite> une phrase reprise ensuite maintes fois résumée en <q>je pense, donc je suis</q> :</p>
<blockquote cite="http://www.gutenberg.org/files/13846/13846-h/13846-h.htm">
<p>Puis, examinant avec attention ce que j'étois, et voyant que je pouvois feindre que je n'avois aucun corps, et qu'il n'y avoit aucun monde ni aucun lieu où je fusse; mais que je ne pouvois pas feindre pour cela que je n'étois point; et qu'au contraire de cela même que je pensois à douter de la vérité des autres choses, il suivoit très évidemment et très certainement que j'étois; au lieu que si j'eusse seulement cessé de penser, encore que tout le reste de ce que j'avois jamais imaginé eût été vrai, je n'avois aucune raison de croire que j'eusse été; je connus de là que j'étois une substance dont toute l'essence ou la nature n'est que de penser, et qui pour être n'a besoin d'aucun lieu ni ne dépend d'aucune chose matérielle; en sorte que ce moi, c'est-à-dire l'âme, par laquelle je suis ce que je suis, est entièrement distincte du corps, et même qu'elle est plus aisée à connoître que lui, et qu'encore qu'il ne fût point, elle ne l'auroit pus d'être tout ce qu'elle est.</p>
<p>Après cela je considérai en général ce qui est requis à une proposition pour être vraie et certaine; car puisque je venois d'en trouver une que je savois être telle, je pensai que je devois aussi savoir en quoi consiste cette certitude. Et ayant remarqué qu'il n'y a rien du tout en ceci, je pense, donc je suis, qui m'assure que je dis la vérité, sinon que je vois très clairement que pour penser il faut être, je jugeai que je pouvois prendre pour règle générale que les choses que nous concevons fort clairement et fort distinctement sont toutes vraies, mais qu'il y a seulement quelque difficulté à bien remarquer quelles sont celles que nous concevons distinctement.</p>
</blockquote>

ce qui rend le résultat suivant dans votre navigateur :

L'effet produit pas cite et q ne sont pas évidents. Ils ne servent qu'à titre sémantique. Mais on peut observer dans le cas de q, que le texte a reçu automatiquement des guillemets qui n'étaient pas dans le texte initial et qui sont donc induits par la balise. De la même façon, cite a mis automatiquement le nom du livre en italique qui est la règle typographique en France pour les noms d'ouvrages. ll convient cependant de ne pas mélanger i, em et cite, car cite indique clairement que le texte balisé est une oeuvre d'auteur alors que em sera une mise en forme générique pour tout texte devant être pris dans un sens particulier. Cite est donc plus spécifique et on pourra d'ailleurs l'utiliser aussi dans le cas où ce sont d'autres sites web qui sont cités.

 On ne rappellera jamais assez de ne pas réfléchir en terme de mise en forme, mais en terme sémantique. Pour nous français, cite, em, i, address ... sont autant de balises qui s'afficheront par défaut en italique mais elles n'aurons pas le même sens au niveau du référencement et de plus elles permettent ensuite de faire de la mise en forme ciblée en CSS.

Mettre en évidence des contenus spécifiques avec time ou data

Il existe d'autres types d'informations régulièrement utilisés sur les sites web, en fonction de leur destination.

Dates avec time

Enfin, pour les sites organisés à la manière d'un blog ou mentionnant des évènements (concerts, meeting...), le HTML5 apporte le nouvel élément time qui peut être utilisé sans attribut :

<p>Participez au Libérathon ce soir à partir de <time>20:00</time>.</p>

ou avec un attribut datetime spécifiant la date au format informatique :

<p>Participez au Libérathon à partir du <time datetime="2013-12-01 20:00">1 décembre 2013, 20h</time> à Rennes.</p> 

Affichage de code informatique samp, code, kbd ou var

Mais si vos données ne rentrent pas dans ces catégories, vous écrivez peut-être souvent des lignes de codes (rien ne vous oblige cependant à écrire des tartines comme nous !).

  • var servira à mentionner les variables ;
  • kbd une saisie utilisateur ;
  • code, un code informatique au sens large ;
  • samp, un exemple de rendu à l'écran ou de résultat.

Bien sûr la balise pre. Elle permet d'écrire du texte en gardant la mise en forme (espace, tabulation telle qu'ils ont étaient placés dans le code alors qu'ils sont normalement non interprétés en HTML.

<pre>

   Ceci est un texte écrit dans pre           et ici la suite



Avec un vide i   c   i.
</pre>

ce qui rend :

   Ceci est un texte écrit dans pre           et ici la suite



Avec un vide i   c   i.

alors qu'avec p, cela donnerait :

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

ou avec samp:

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

ou encore code :

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

Eh oui, c'est ainsi. Ce n'est pas l'aspect qui compte en HTML, mais le sens.

Mise en avant de données personnalisées avec l'élément data

L'élément data permet de relier un texte avec un attribut value pouvant contenir un référent spécifique pour ce contenu. Cela peut être un numéro de produit, par exemple. On l'utilisera sous la forme :

<data value="123456789">Un nouveau livre Fmfr !</data>

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.