Now Reading
Rédaction web : la forme, le fond et… la structure

featured image


Rédaction web : la forme, le fond et… la structure

Vos contenus web sont votre richesse. Ils vous demandent du temps, de l’investissement et quand ils sont enfin en ligne, il faut encore les chouchouter, les enrichir, les croiser, les relayer et encore mille autres choses pour qu’ils aient le succès qu’ils méritent.

Dans cette course vers le lecteur, il y a le fond bien sûr (le contenu doit être pertinent), la forme (le texte doit accessible, lisible, etc.) et… la structure.

Pardon ? Qu’est-ce que la structure vient faire là-dedans ?

Hé bien votre contenu est bien sûr un objet éditorial (c’est même avant tout un objet éditorial) mais c’est aussi un objet technique. L’immense majorité des textes lus sur le web aujourd’hui sont au format HTML (ça vous le saviez). Mais n’allez pas penser que le HTML n’est qu’une affaire de développeurs web ou d’intégrateurs HTML. Vous allez voir qu’il y a pas mal d’avantages à maîtriser la structure de vos contenus.

Les bénéfices d’un contenu bien structuré

Bénéfice n°1 : une mise en forme professionnelle

Lorsqu’un texte est techniquement bien structuré, il est facile de s’appuyer dessus pour créer une charte graphique bien hiérarchisée, lisible et cohérente à travers tout le site. Cette mise en forme bénéficiera bien sûr au lecteur en améliorant l’utilisabilité du contenu qu’il consulte. En anticipant la structure des textes, vous livrez un texte facilement intégrable dans le site.

Bénéfice n°2 : un meilleur enrichissement du contenu

Des contenus structurés d’une manière systématique vont pouvoir servir de socle aux développeurs pour créer des fonctionnalités d’enrichissement du contenu :

  • On pourra positionner une infobulle personnalisée au clic sur un acronyme (et éviter que le lecteur interrompe sa lecture pour aller chercher dans Google sa signification)
  • On pourra aussi créer un sommaire automatique de l’article en s’appuyant sur les différents niveaux de titre
  • On pourra adapter la présentation du texte en fonction du terminal de lecture (ordinateur classique ou téléphone mobile par exemple)
  • etc.
Un exemple de sommaire d'article du site Newfangled.com

Des liens vers les titres de l’article sont placés avant le texte (Newfangled.com)

Bénéfice n°3 : être sympa avec la machine (notamment le robot Google)

Un contenu bien structuré est naturellement compatible avec les outils informatiques. Il est donc pérenne et va pouvoir être stocké, migré, recharté et que sais-je encore, sans une égratignure. En structurant votre texte, vous le rendez « compréhensible » pour les machines. Subitement, un programme informatique sera à même de comprendre qu’un titre est… un titre, un acronyme est un acronyme etc… Ça sera notamment le cas du robot de Google qui pourra mieux décortiquer votre texte et donc mieux l’indexer.

Le même article de la Wikipédia sur le web et le mobile : même structure, apparences différentes

Le même article de la Wikipédia sur le web et le mobile : même structure, apparences différentes

Comment définir la structure de vos contenus

Connaître les différents éléments structurels d’un contenu web

Le langage HTML vous donne un vocabulaire de base pour décrire la structure d’un contenu. Libre à vous ensuite d’organiser ces éléments comme bon vous semble.

Les titres et les paragraphes

Six niveaux de titre (balise <h>) peuvent être introduits dans le texte : de 1 (le plus important) à 6 (le moins important). Traditionnellement, le titre de niveau 1 est celui de l’article et est donc unique. Il n’est pas obligatoire d’utiliser tous les niveaux de titre. En utilisant les niveaux de titre, vous vous assurez que tous les titres sont chartés de la même façon dans votre texte. On peut aussi se baser sur les titres pour créer un sommaire.

Entre les titres, il est possible d’introduire un ou plusieurs paragraphes (balise <p>). Un paragraphe va pouvoir contenir du texte, des images et des éléments multimédia (comme les vidéos). Isoler les paragraphes du texte permet de gérer les espaces entre eux ou encore de permettre à l’utilisateur de les replier. Une bonne pratique est de faire en sorte qu’il n’y ait aucun texte en dehors d’un titre ou d’un paragraphe. Cela permet aux intégrateurs HTML de pouvoir toujours appliquer un style CSS et de charter tout votre texte. Dans le cas contraire, vous pourriez avoir des textes orphelins et hors-charte.

Les acronymes et les abréviations

Prenez soin de repérer les acronymes (balise <acronym>) et les abréviations (balise <abbr>) du texte et de fournir leurs significations. Par défaut, la plupart des navigateurs font apparaître une infobulle au survol de la souris sur un acronyme dont la description est renseignée. Vous pourrez aussi prévoir de remplacer ces infobulles par les vôtres. Ça peut être aussi un moyen de créer automatiquement une liste des acronymes et abréviations utilisés dans le texte sous la forme d’un encadré.

Les emphases

Vous pouvez mettre l’accent sur un ou plusieurs mots du texte (balise <strong>). Le rendu de cette emphase est souvent le style gras mais c’est une convention que vous pouvez tout à fait transformer (en choisissant de surligner les emphases en jaune par exemple). Il existe une autre emphase (<em>) dont le rendu par défaut est l’italique. Enfin, attention à ne pas utiliser la balise <b> car la mise en gras (<b> signifie bold, gras en anglais) est l’affaire de la feuille de style CSS.

Les listes

Il est possible d’intégrer des listes à puces (<ul>) ou numérotées (<ol>) à vos textes web. Des listes bien lisibles sont bien sûr un élément percutant de beaucoup de textes web. En utilisant des « vraies » listes au lieu d’un mélange de tirets et de retours à la ligne, vous vous assurez encore une fois que vos listes seront chartées de manière lisible et identique dans tous vos textes.

Les liens hypertextes

Rien de plus facile d’intégrer un lien hypertexte dans vos textes avec la balise <a>. Cependant rendre cliquable quelques mots dans un texte ne renseigne pas forcément sur le lien en lui-même (notamment sa destination). La balise <a> possède un attribut title qui permet de renseigner une description pour votre lien. Cette description apparaîtra dans une infobulle au survol du lien par la souris. Là encore, vous pouvez envisager de créer votre propre infobulle ou créer automatiquement une liste des liens du texte avec leurs descriptions dans un encadré à part. Enfin, la description sera utilisée par les lecteurs vocaux des personnes aveugles ou malvoyantes pour les aider à comprendre le lien et sa destination.

Les citations

Vous pouvez décider qu’un ou plusieurs paragraphes (<p>) de votre texte sont en fait une citation (<blockquote>). Grâce à l’attribut cite vous pouvez préciser la source de votre citation (ex. une URL vers l’article originel que vous reproduisez). Le contenu de cite n’apparaît pas par défaut. Il vous faudra développer un affichage pour cette information. Sinon, une bonne pratique est d’utiliser la balise <cite> (à ne pas confondre avec l’attribut cite de <blockquote>; voir ci-dessous) dans le dernier paragraphe de votre citation. Les citations sont un bon moyen de créer des exergues dans vos textes. A noter qu’une citation peut contenir des images, des liens hypertextes, etc. Vous pouvez également faire de courtes citations au sein d’une phrase grâce à la balise <q>.

Exemple de mise en forme d'une citation dans un texte web (Smashing Magazine)

Exemple de mise en forme d’une citation dans un texte web (Smashing Magazine)

Les sources

Vous pouvez signaler les sources que vous citez dans votre texte (titres de livres, de films, sites, etc.) avec la balise cite (à ne pas confondre avec l’attribut cite de la balise <blockquote>). Là encore, au-delà de la mise en forme de ces éléments, cela permettra de créer des listes des sources de l’article.

Les tableaux

HTML vous permet de créer des tableaux à l’aide de la balise <table>.  Mais peu de CMS (outils de gestion de contenu) permettent de créer des tableaux de manière aisée (un peu à la manière d’un Microsoft Word). Cela conduit à trouver beaucoup de tableaux sous forme d’images dans les textes web. On voit tout de suite la limite de ce type d’intégration, notamment quand il faut mettre à jour les données ou uniformiser la charte graphique. C’est donc une bonne pratique d’intégrer des tableaux au format HTML dans vos textes. Aussi, n’hésitez pas à faire réaliser les tableaux par un intégrateur HTML et insérez-les ensuite à l’aide d’un simple copier/coller dans votre texte.

Les images

Vous pouvez insérer des images (graphiques, photos, etc.) dans votre texte (<img>). Prenez soin de donner une légende à votre image (grâce à l’attribut alt). Les navigateurs utilisent la description de l’image pour créer une infobulle au survol de l’image par la souris. Vous pouvez également utiliser la valeur de l’attribut alt pour créer une légende automatique pour l’image. Enfin les lecteurs vocaux des personnes aveugles ou malvoyantes liront à haute voix la description de l’image. Aussi soyez aussi explicite que possible (ex. schéma représentant la progression de la valeur x sur les 3 dernières années). Si vous utilisez un outil de gestion de contenu (CMS) qui intègre une médiathèque, il est très utile que chaque média référencé dispose d’une description. Ainsi quand une image est intégrée plusieurs fois dans des textes du site, la description est mise automatiquement et peut être gérée à un seul endroit.

Et quand ça n’existe pas en HTML ?

Comme nous l’avons vu la liste des éléments de structure HTML est assez courte. Vos textes nécessitent peut-être plus de complexité ? Par exemple, vous avez besoin d’un chapô ou certains liens du texte ont besoin d’être signalés d’une manière spécifique parce qu’ils pointent vers un glossaire. Sachez que vous pouvez créer des familles d’éléments. Ainsi, le chapô sera un paragraphe spécial. Pour cela l’intégrateur HTML utilisera un attribut (class ou id) qui distinguera le paragraphe chapô des autres paragraphes du texte. Il pourra en s’appuyant sur cet attribut lui affecter une apparence et un comportement spécifiques.

Que dois-je faire pour pouvoir structurer mes textes ?

Dois-je savoir coder en HTML ?

C’est un plus. Etre familier des différentes balises vous rendra plus autonome et vous permettra de vous assurer que la structure de vos contenus a bien été respectée. Cela aide à prendre conscience des contraintes comme des possibilités. J’ai aussi remarqué que cela permet aux rédacteurs d’être plus créatifs et d’imaginer de nouvelles mises en scène et enrichissements de leur contenu (par exemple, en faisant des séances de prototypage en direct avec un intégrateur HTML). A minima, songez à savoir réaliser des tableaux en HTML. Si ce n’est pas votre tasse de thé, comprendre les concepts généraux du HTML suffit. Traduisez-les en pratiques quand vous écrivez (par exemple en proposant toujours des descriptions pour les liens et les images).

Forcez-vous à ne faire aucune mise en page

Les traitements de texte nous ont habitués à pouvoir faire de la mise en page (gras, italique, sauts de ligne, alignement, etc). Forcez-vous à ne pas le faire quand vous écrivez pour le web. A la place, structurez vos textes (comme si vous utilisiez les styles de Microsoft Word). La mise en page s’appuiera sur cette ossature une fois le texte mis en ligne sur le site.

Captures de l'éditeur WordPress et d'un article en ligne

Écrivez dans un éditeur en structurant votre texte, la mise en page se fera grâce à une feuille de style (exemple d’un article de Webstandardssherpa.com)

Participez au processus de conception et d’évolution du site web

Prenez soin de prévoir une étape consacrée à la définition des structures de contenu dans la phase de conception de votre site. Chef de projet et producteurs de contenus (journalistes, rédacteurs,…) doivent se rencontrer et travailler ensemble pour s’entendre sur la structure de chaque contenu. Chacun doit avoir une connaissance des éléments structurels d’un texte. Avoir également un intégrateur HTML ou un développeur frontend (c.-à-d. un développeur spécialisé dans les interfaces utilisateur) autour de la table facilite les choses. Pensez notamment aux éléments spécifiques dont vous pouvez avoir besoin (comme le chapô par exemple). Le livrable de ce travail sera un document décrivant la structure des textes. (Si votre site est déjà en ligne, impliquez-vous dans son évolution sur le même mode.)

Plus tard, un graphiste web va prévoir une apparence pour chaque élément du texte et c’est un intégrateur HTML qui transformera cette charte en une feuille de style CSS.

Impliquez-vous dans le choix de l’outil de gestion de contenu (CMS)

Il existe une tendance de fond à exclure les producteurs de contenus (rédacteurs, journalistes, blogueurs, etc.) du choix de l’outil de gestion de contenu qu’ils devront utiliser. Parfois, c’est d’ailleurs le fait des producteurs de contenus eux-mêmes qui voient cela comme une affaire essentiellement technique. Impliquez-vous dans le choix de l’outil de rédaction et assurez-vous que vous aurez toute la latitude de structurer correctement vos textes (par exemple, vérifiez que vous avez accès au code HTML de votre texte). Au besoin expliquez aux intervenants techniques les bénéfices de cette structuration. Les intégrateurs HTML et les développeurs frontend appuieront votre démarche.

Donc, si votre contenu est produit à l’aide d’un outil de gestion de contenu (un CMS, comme WordPress par exemple), celui-ci devra être à même de produire un contenu correctement structuré, ce qui signifie que les contributeurs doivent avoir les outils pour structurer et décrire leurs contenus (pose des titres et des liens, signalement des acronymes et des citations avec leurs significations, etc.).

Adaptez votre production éditoriale

Lors de la rédaction d’un texte, prenez soin d’anticiper la structure à lui donner (paragraphes et titres). Pensez ensuite aux enrichissements comme les liens hypertextes et acronymes. Chacun de ces éléments a besoin de ses métadonnées. Un lien par exemple aura bien sûr besoin de sa destination (son URL) mais également d’une courte description de cette destination afin de pouvoir l’afficher au survol de la souris. Ce travail d’établissement de la structure et d’enrichissement du texte peut se faire à la manière d’une post-production. Le mieux est de disposer d’un outil comme un CMS dans lequel a été prévu tous les outils pour faciliter ces tâches. Par exemple, l’outil pourra proposer une liste d’acronymes avec leurs définitions afin de ne pas avoir à taper cette définition à la main. Cette liste pourra s’enrichir automatiquement quand un nouvel acronyme est signalé dans un texte.

5 points à retenir

  • Se soucier de la structure d’un contenu c’est la base d’une charte cohérente, un meilleur enrichissement et garantir une pérennité technique de ce contenu
  • Le HTML définit les éléments structurel d’un texte web
  • On rédige un contenu web hors charte mais correctement structuré et ensuite ce sont les feuilles de style CSS qui pose la charte du texte sur sa structure
  • Prenez soin de définir le rendu de chaque élément de la structure du texte
  • N’hésitez pas à vous impliquer dans le choix des outils de gestion de contenu (CMS) qui vous permettront de bien structurer votre contenu

Aller plus loin ?

Merci pour votre lecture. Si vous avez des questions ou des remarques, n’hésitez pas à utiliser les commentaires de cet article.
About The Author
Benjamin Lupu
11 Comments
Leave a response
  • Oblondy
    25 octobre 2011 at 23 h 08 min

    D’accord sur absolument tout ! En la matière, un bon SEO est une question de logique et de bon sens. En revanche quid de la balise title ? A mon sens plus importante que la balise H1

    • 26 octobre 2011 at 16 h 13 min

      Remarque pertinente. On pourrait donner une suite à cet article en parlant du SEO (référencement naturel). A minima, je conseillerais de rédiger le titre de l’article en respectant les bonnes pratiques SEO et que ce titre soit repris pour la balise . Maintenant, une bonne pratique est d’avoir une balise optimisée en termes de mots-clés et qui incite au clic dans les pages de résultats mais c’est un travail éditorial supplémentaire. Un compromis est d’avoir le premier comportement par défaut et de pouvoir personnaliser le contenu de la balise lorsque cela est nécessaire.

  • 26 octobre 2011 at 12 h 25 min

    Je ne suis pas d’accord sur tout, notamment les images.

    On distincte deux types d’images : les images de décoration et les images porteuses d’informations.

    Définition d’une image de décoration :

    Image de décoration : image n’ayant aucune fonction et ne véhiculant aucune information particulière par rapport au contenu auquel elle est associée.

    Exemples :
        une image servant à caler la mise en page
        une image de coin arrondie pour habiller un bloc d’information
        une image d’illustration n’apportant aucune information nécessaire à la compréhension du texte auquelle elle est associée.

    Dans ce cas là le alt (qui doit toujours être présent !!!) doit être vide. (alt= » »)

    Cas particulier les images de décoration entourées d’un lien, là pour que le lien ne soit pas vide on rempli le alt de manière pertinente.

    Cas particulier du cas particulier si le lien entoure une image de décoration et un intitulé textuel là l’alt doit être vide.

    • 26 octobre 2011 at 16 h 08 min

      Bonjour. Vous avez entièrement raison. J’aurais dû préciser que je me focalisais sur les images ayant un sens et intégrées dans un article (ex. schéma). Il faut dire que la majorité des images de décoration font partie du design du site.

  • 3 novembre 2011 at 11 h 43 min

    Bel article ! En espérant que ce soit lu par le plus grand nombre, et pas que par des spécialistes 😉 La référence à Word est, à cet égard, essentielle.

    • 3 novembre 2011 at 19 h 22 min

      Merci. Cet article découle de mon accompagnement de journalistes pas forcément initiés aux arcanes du contenu web. Il s’adresse donc plutôt à des producteurs de contenu en général cherchant des bonnes pratiques pour leurs contenus.

Leave a Response

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.