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 hgroup.
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>
   <hgroup>
      <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>
   </hgroup>
   <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 :

Les titres à la nouvelle sauce

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.

Les titres commencent tous par la lettre h, comme en xHTML voire même le HTML1 :)

Mais la capacité de les placer à différents niveaux de la page pour structurer efficacement chaque contenu de la page est un apport fondamental.

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.

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 :

Le philosophe français Descartes a écrit dans Méditations sur la philosophie première une phrase reprise ensuite maintes fois résumée en je pense, donc je suis :

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.

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.

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>