texte & hypertext

Web Design is 95% Typography
Oliver Reichenstein

Le texte à l’écran est votre matière première. Le découper, hiérarchiser, le structurer en changeant la typographie, les couleurs, les espaces changera le rythme. La perception du lecteur sera différente selon ces choix.
Pour être efficace à cette étape, lire et comprendre votre texte est indispensable pour repérer les éléments à extraire, à baliser. Voici une liste d’éléments à identifier :

  • Les titres et leurs niveaux d’importance ;
  • les paragraphes ;
  • les listes ;
  • les mots importants ;
  • les titres d’œuvres ;
  • les citations ;
  • les abréviations.

Cette liste n’est pas complète et chacun peut l’enrichir selon la nature du projet. Je vous recommande d’associer votre recherche dans un ouvrage comme le Lexique des règles typographiques en usage à l’Imprimerie nationale avec celle sur le mdn de Mozilla.

Première approche

Si vous avez la bonne habitude de mettre les titres d’œuvres en italique, la balise <cite></cite> sera la plus propice. Le premier réflexe serait de mettre en italique avec la balise <i></i> comme dans un logiciel de traitement de texte. En HTML, <cite> sera plus propice, elle produira par défaut un texte en italique, mais ajoute une information importante pour le navigateur. Visuellement, le résultat est similaire, mais cette distinction apporte deux atouts, le premier consiste à enrichir graphiquement les italiques ou les œuvres de manière différente et le second concerne l’analyse de votre page par les moteurs de recherche ou d’autres outils. C’est ici un point primordial, une notion clé qui tranche avec le graphisme sur d’autres supports.
Gardez en tête que votre code sera lu par :

  • Les bots de Google, Bing, Qwant ou Duckduckgo ;
  • Des humains avec des navigateurs aux multiples configurations ;
  • Des humains avec des handicaps et parfois des machines spécifiques, on parle d’accessibilité du web ;
  • Vos collègues ou vous dans un futur plus ou moins proche.

Si vous êtes graphiste, vous savez qu’il existe plusieurs façons pour produire une maquette. Travailler en équipe sur un projet ou reprendre celui d’un autre est délicat. La maitrise des feuilles de styles et des gabarits est un minimum, en HTML c’est un point essentiel. Comme une charte graphique, il existe des guidelines d’écriture sur certains projets.

Les blocs

Une notion importante du HTML est la différentiation des éléments selon leur comportement dans le flux et contrôler la mise en page. D’apparence complexe, après un peu de pratique, l’usage devient très naturel et logique. Pour exemple, les titres et les paragraphes ont un affichage de type « bloc », ils peuvent être sur une ou plusieurs lignes et s’empilent les uns en dessous des autres.

Les titres h1 à h6

Comme dans un logiciel de traitement de texte, les titres sont des éléments à différencier, il ne s’agit pas de mettre en plus ou moins grand le texte via le menu corps de texte et d’obtenir un résultat visuellement satisfaisant, mais bien de marquer l’élément. Dans Word, LibreOffice ou autres, les avantages sont nombreux pour les modifications de présentation ultérieures ou la génération automatique de sommaire. Pour le web, bien baliser les titres est indispensable, cela va structurer votre site et améliorer sa lecture par les moteurs de recherches. L’optimisation pour ces moteurs est un domaine complexe où les pratiques changent régulièrement, le bon usage des titres reste un bon stratagème.

<h1>Titre du site ou de l’article</h1>
<h2>Sous-titre</h2>

Note importante, on ne passe pas d’un niveau à un autre sans passer par les intermédiaires, par exemple on s’abstiendra de passer du h1 au h3.

Les paragraphes

Les paragraphes servent à créer des blocs contenant des éléments textuels, mais pas seulement. Ainsi, on trouvera naturellement des liens, des mises en avant, des textes barrés, mais aussi des images, des vidéos, des sons ou des éléments de formulaire.

<h1>Le traitement du texte </h1>
<!-- … -->
<h2>les blocs</h2>
<!-- … -->
<h3>les paragraphes</h3>
<p>Les paragraphes servent à créer des blocs contenant des éléments textuels, mais pas seulement. Ainsi, on trouvera naturellement des liens, des mises en avant, des textes barrés, mais aussi des images, des vidéos, des sons ou des éléments de formulaire.</p>

Autres blocs de textes

Les plus fréquents sont les listes, le texte pré-formaté, les blocs de citation et l’adresse de contact.
Différents types de liste existent, la plus répandue est sans doute la liste non ordonnée <ul> ( Unordered List Element) et s’associe avec les items <li> (list item).

<ul><!-- debut d’une liste -->
  <li>Fruits</li><!-- un élément -->
  <li>Légumes</li> 
</ul><!-- fin de celle-ci -->

Les listes ordonnées <ol> (Ordered List Element) sont sur le même principe.

<ol><!-- début d’une liste -->
  <li>Farine</li><!-- un élément -->
  <li>Œufs</li>
  <li>Lait</li>
</ol><!-- fin de celle-ci -->

Dans la pratique, on utilisera souvent des listes imbriquées pour répondre à la problématique des menus et sous-menus. Voici une première approche sans les balises de lien.

<ul><!-- début d’une liste -->
  <li>Fruits <!-- on ferme plus loin -->
    <ul><!-- début de ma sous-liste -->
      <li>Pomme</li>
      <li>Orange</li>
    </ul><!-- fin de ma sous-liste -->
  </li><!-- /fruits -->
  <li>Légumes
      <ul><!-- début de ma sous-liste -->
        <li>Poireau</li>
        <li>Carotte</li>
      </ul><!-- fin de ma sous-liste -->
  </li>
</ul><!-- fin de celle-ci -->

See the Pen 4 fruits et légumes by Benoît Wimart (@benoitwimart) on CodePen.dark

Les textes pré-formatés sont indispensables à la conservation des espaces multiples. En HTML deux espaces ou plus, seront lues comme une espace. Si vous voulez conserver vos espaces et retours à la ligne, la balise <pre> est indispensable. Deux usages : ASCII art et formatage de code.

<pre>
  _    _ _______ __  __ _      
 | |  | |__   __|  \/  | |     
 | |__| |  | |  | \  / | |     
 |  __  |  | |  | |\/| | |     
 | |  | |  | |  | |  | | |____ 
 |_|  |_|  |_|  |_|  |_|______|
<!-- http://patorjk.com/software/taag/ -->
</pre>

Par défaut, le navigateur utilisera une police à chasse fixe (Courier New).

Les blocs de citations, fortement présents sur le web, rythment les pages.

<blockquote>
  <p>Web Design is 95% Typography.</p>
  <!-- le p est obligatoire -->
</blockquote>

La balise <address> sert uniquement pour l’adresse de contact en rapport avec le contenu.

<address>
  texte et mail, lien vers page de contact ou adresse
</address>

On peut peaufiner la sémantique avec l’ajout du microformat dédié au contact, le hCard : https://fr.wikipedia.org/wiki/HCard
Pour aller plus loin sur les balises, vous pouvez regarder listes de définitions <dl> <dt> et <dd> sur le MDN de Mozilla.

les inlines

Les éléments inlines se comportent comme des lettres et se placent les uns derrière les autres. La liste de ces éléments en version courte

abbr, cite, code, dfn, em, kbd, strong, samp, time, var
a, br, img, span, sub, sup
button, input, label, select, textarea

les liens

Les liens sont les éléments clés du web, leur structure nécessite l’ajout d’une information à partir d’un attribut. Voici quelques exemples :

<!--lien vers une page externe, on quitte le site -->
<a href="http://fr.wikipedia.org">l’encyclopédie libre</a>
 
<!--lien vers une page sur le même domaine -->
<a href="contact.html">contact</a>
<a href="web/cours.html">css</a>
 
<!--lien vers une ancre, on navigue dans la page en cours -->
<a href="#exemples">voir les exemples</a>

L’attribut permet de passer plus d’information à la balise, pour un lien, on utilisera un href puis le signe égal et la valeur entre guillemets simples ou doubles. Attention, en code les guillemets français sont « mauvais pour le code », un copier/coller entre certains logiciels peut rendre votre code défaillant.

On verra la balise pour les images dans un prochain chapitre, mais le code pour un lien sur un texte ou sur une image est le même.
<a href="…"><!-- texte ou image --></a>

Ensemble tout devient… logique

Attention, une erreur fréquente consiste à imbriquer les balises n’importe comment. Pas de paragraphe dans un paragraphe, pas de titre dans un titre et plus subtitle, pas de strong ou em dans un titre.
En allant sur la document de Mozilla MDN :
https://developer.mozilla.org/…/strong
Un tableau affiche « Contenu autorisé » Contenu phrasé.

Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.
 
Les éléments appartenant à cette catégorie sont  <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command> , <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>  , <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> et du texte brut (n'étant pas une simple suite de blancs).
Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :
 
<a> s'il contient seulement du contenu phrasé
<area> s'il est un descendant de l'élément <map>
<del> s'il contient seulement du contenu phrasé
<ins> s'il contient seulement du contenu phrasé
<link> si l'attribut itemprop est présent
<map> s'il contient seulement du contenu phrasé
<meta> si l'attribut itemprop est présent