Le document aborde les éléments clés de l'écriture pour le web, en soulignant l'importance de l'accessibilité, de la structure du texte et de l'utilisation appropriée des balises HTML. Il fournit également des conseils rédactionnels sur la manière de présenter le contenu de façon efficace, en tenant compte des spécificités de la lecture à l'écran. Enfin, il aborde des notions juridiques essentielles liées à la publication en ligne.

1. Écrire pour internet
Éléments clés : lecture à l’écran, accessibilité,
structure
du
texte,
insertion
d’autres
éléments, les balises html indispensables,
notions juridiques de base.
première rédaction 2009, mise à jour décembre 2013
—
ISABELLE
R É D A C T I O N
–
DUTAILLY
F O R M A T I O N
–
—
C O N S E I L
73 rue Louis Lumière – 75020 Paris
isabelle@dutailly.net – dutailly.net - 06 10 28 14 62

2. Écrire pour le web quelques pistes
décembre 2013
SOMMAIRE
1L’écrit « matériel » et l’écriture électronique...........................................................................4
1.1L’écrit « matériel ».......................................................................................................... 4
1.2L’écriture électronique.................................................................................................... 4
2Comment lit-on à l’écran ?..................................................................................................... 5
2.1La première étude........................................................................................................... 5
2.2Ce qui semble avéré aujourd’hui.....................................................................................5
2.3Le balayage de l’écran..................................................................................................... 5
3Conseils rédactionnels............................................................................................................ 7
3.1Un titre explicite et court................................................................................................ 7
3.2Une accroche parlante..................................................................................................... 7
3.3Le texte.......................................................................................................................... 7
3.3.1Le contenu.............................................................................................................. 8
3.3.2Le style................................................................................................................... 8
3.4Références et liens.......................................................................................................... 9
4L’écriture web : un phénomène à trois dimensions................................................................10
4.1Des liens dans tous les sens.......................................................................................... 10
4.2Des intertitres pour un sommaire..................................................................................10
5Accessibilité......................................................................................................................... 11
5.1Séparer le fond de la forme........................................................................................... 11
5.1.1Des solutions en plus............................................................................................ 11
5.1.2Des contrastes....................................................................................................... 12
5.1.3Solutions............................................................................................................... 12
5.2Signaler les éléments non textuels et proposer des alternatives.....................................12
5.2.1Solutions............................................................................................................... 12
5.3Signaler les liens........................................................................................................... 12
5.3.1Solutions............................................................................................................... 12
5.4Une information structurée........................................................................................... 13
5.4.1Solution................................................................................................................. 13
5.5Des informations obligatoires.......................................................................................13
5.5.1Solutions............................................................................................................... 13
6Images, vidéo, fichiers audio et autres documents................................................................14
6.1Les images.................................................................................................................... 14
6.2Les fichiers audio et vidéo............................................................................................. 15
6.3Les autres documents................................................................................................... 15
7Un tout petit peu de html..................................................................................................... 16
8Notions juridiques................................................................................................................ 17
8.1Public n’est pas synonyme de domaine public...............................................................17
8.2Le droit à l’image en France.......................................................................................... 17
8.3Les hyperliens et le droit............................................................................................... 18
Glossaire................................................................................................................................ 19
Page 2 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

3. Écrire pour le web quelques pistes
1 L’ÉCRIT «
1.1L’ÉCRIT «
MATÉRIEL
MATÉRIEL
»
décembre 2013
ET L’ÉCRITURE ÉLECTRONIQUE
»
Jusqu’à présent, avec l’écriture « matérielle », quel que soit le support (pierre, papier,
papyrus…) l’écrit était figé dans sa forme une fois produit et tout le monde, à moins d’avoir des
problèmes de vue, le voit de la même façon ce qui permet d’utiliser le caractère que l’on veut.
L’écrit « matériel » est aussi terriblement contraignant puisqu’on ne dispose que d’un espace,
de taille variable certes, mais exactement limité. Quand on doit rédiger un article pour la presse
« papier », on dispose d’une fourchette de signes à respecter en minimum et en maximum. Par
contre, l’œil peut balayer toute une page d’un seul coup, voire tout le texte selon son type et le
support ce qui n’est pas toujours possible sur internet.
On lira plus facilement, du moins, les francophones, un écrit papier avec les caractères empâtés
comme le Times, la police Georgia ou encore le Garamond. Alors que les caractères de type
« bâton » sont plus conseillés pour l’écran, comme l’Arial, le caractère Verdana ou encore
l’Helvetica.
1.2L’ÉCRITURE
ÉLECTRONIQUE
C’est une vraie révolution, dont on n’a pas encore pris toute la mesure, même encore
maintenant avec la multiplication des outils de lecture et le développement du « responsible
desigin » dont l’objet est de permettre à un site internet de s’adapter au terminal. L’écriture
n’est plus figée, son aspect dépend largement du terminal sur lequel elle est affichée :
•
la taille de l’écran
•
son réglage : 1024x768, 1280x1024 pixels, etc. pour les moniteurs d’ordinateurs ou
encore, par exemple, 320x480 pixels (Samsung I5700 Galaxy), 960x640 pixels (Iphone
4) pour les téléphones dont les écrans affichent des résolutions encore plus variables,
sans parler des tablettes, phablettes et liseuses numériques.=
•
le réglage qu’en a fait l’utilisateur qui, par exemple, peut avoir défini de grands
caractères pour adapter le texte à sa vue (essentiellement sur les moniteurs
d’ordinateurs et les liseuses)
•
les polices de caractères dont l’outil est équipé
•
il y a deux intermédiaires entre le lecteur et le texte : le matériel et les logiciels.
L’œil ne balaye, ce qui est logique, que l’écran et donc, pas forcément, la totalité du texte ou de
la page. Par ailleurs, si le lecteur a opté pour un fort grossissement des caractères, il est
possible qu’il ne puisse pas visionner toute la ligne sans avoir à utiliser la barre de défilement
horizontale de son ordinateur, c’est valable sur certains sites, mais aussi, par exemple, avec les
documents en pdf. Les liseuses numériques, pour les fichiers epub, offrent des taux de
grossissement du texte sans imposer des va-et-vient horizontaux.
L’écrit « matériel » et l’écriture électronique
Page 3 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

4. Écrire pour le web quelques pistes
2 COMMENT
2.1LA
LIT-ON À L’ÉCRAN
décembre 2013
?
PREMIÈRE ÉTUDE
En 1998, Jakob Nielsen et John Morkes, qui sont devenus par la suite les « gourous » de
l’écriture web ont publié une étude qui faisait ressortir les points suivants :
•
on lirait moins vite à l’écran que sur le papier, cela dit plus de dix ans après avec des
matériels qui ont considérablement évolué et sont devenus plus agréables à l’usage,
cela a peut-être changé
•
les trois quarts des internautes balaieraient du regard les textes au lieu de les lire
vraiment, ce que l’on fait avec le papier de toute façon et cela n’a pas changé.
•
à l’époque 10 % seulement des lecteurs utilisaient les barres de défilement
(ascenseurs).
2.2CE
QUI SEMBLE AVÉRÉ AUJOURD’HUI
Les barres de défilement horizontales sont à éviter le plus possible. Les barres verticales ne
posent généralement pas de problèmes.
Il semblerait que l’habitude de lire sur écran entraîne le fait que l’on ait plus de mal à lire des
textes longs avec de longs paragraphes, y compris ensuite sur le papier, y compris par des
personnes habituées à lire des documents scientifiques.
On « scanne » effectivement l’écran plutôt que de le lire entier. Cela dit on fait de même avec
les périodiques ce qui nous permet d’aller directement à l’article que l’on veut lire en évitant les
publicités.
2.3LE
BALAYAGE DE L’ÉCRAN
Un écran web a des zones chaudes plus attractives et froides moins attirantes. L’œil balaierait
la page web de droite à gauche et de haut en bas.
En fait plus subtilement, on regarde d’abord le milieu, qui est généralement là où se trouve le
plus gros pavé de texte ou d’image, puis à droite puis à gauche. Enfin ça c’est la théorie, en
pratique, néanmoins, si, sur un site donné, les publicités sont toujours à droite, l’œil blasé
finira par les éliminer inconsciemment.
Comment lit-on à l’écran ?
Page 4 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

5. Écrire pour le web quelques pistes
décembre 2013
Par ailleurs, l’œil a plus besoin sur écran que sur papier d’être « réveillé ». Il importe donc
d’enrichir le texte afin d’attirer le lecteur sur les points les plus importants ou encore d’ajouter
des intertitres. Il est également conseillé de faire des paragraphes plutôt courts.
Extrait du site Rue89
Il ne faut pas hésiter à envisager d’autres enrichissements typographiques : gras, changements
de couleurs, mais éviter l’italique peu lisible et le texte centré systématiquement. Dans
l’exemple ci-dessous, le premier mot du paragraphe, en gras, indique une idée forte.
Extrait de Libé
Comment lit-on à l’écran ?
Page 5 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

6. Écrire pour le web quelques pistes
3 CONSEILS
décembre 2013
RÉDACTIONNELS
Écrire pour le média internet nécessite-t-il une forme de rédaction particulière ? C’est un débat
où les tenants du contre, au motif que l’on écrit pour être publié depuis bien longtemps, et du
pour, au motif que certains gourous1 prônent le contraire s’affrontent. La vérité est évidemment
au milieu. Il faut, notamment, tenir compte des contraintes techniques et de la grande diffusion
des informations sur internet à un public diversifié et que l’on ne connaît pas forcément bien.
3.1UN
TITRE EXPLICITE ET COURT
Il doit donner envie de lire le texte qu’on le lise dans le moteur de recherche, dans son lecteur
de fil RSS ou sur le site lui-même. Il doit être court, entre quatre et dix mots. On évitera les
jeux de mots, qui peuvent poser des problèmes de référencement, tous les mots (adverbes,
adjectifs, etc.) et circonlocutions superflues et les sigles et acronymes sauf s’ils sont
« universellement » connus. On placera de préférence les mots-clés au tout début, si le titre
apparaît tronqué, l’essentiel sera tout de même visible.
On préférera donc :
Mobilier urbain : ce que dit la loi du 10/10/2010
à:
Présentation de la loi sur le mobilier urbain parue le 10/10/2010
ou encore Ouvertures sur les frontières : rencontre débat
à
Rencontre-débat sur le thème « Ouvertures sur les frontières »
3.2UNE
ACCROCHE PARLANTE
Qu’on l’appelle chapo (ou chapeau, terme utilisé par Spip), résumé, introduction ou accroche, le
premier paragraphe du texte doit donner une idée précise de son contenu. Il doit pouvoir se
suffire à lui-même comme une « brève » et, comme tel, il ne doit pas être long : cinq à sept
lignes au plus. À titre indicatif, cette introduction doit répondre aux cinq questions suivantes 2 :
•
Qui ?
de qui s’agit-il, qui est concerné
•
Quoi ?
de quoi parle-t-on
•
Quand ?
quand a ou aura lieu ce dont on parle
•
Où ?
à quel endroit
•
Pourquoi ?
On le voit, il est préférable de commencer par la conclusion, qui donne le résultat, et de
continuer « normalement » par le cheminement qui a abouti à la conclusion.
3.3LE
TEXTE
Si le texte doit être court et concis pour une brève ou une accroche, il n’est pas nécessaire de
se forcer à la concision à tout prix au détriment du discours. Il y a cependant quelques règles à
respecter.
1Jakob Nielsen, expert en ergonomie informatique et « usabilité » des sites web. Il est devenu une
référence incontournable.
2En anglais on parle de la règle des « 5W » : “who, what, when, where and why”.
Conseils rédactionnels
Page 6 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

7. Écrire pour le web quelques pistes
3.3.1
décembre 2013
Le contenu
Certains préconisent de ne pas dépasser quatre à cinq pages, outre le fait qu’il s’agit d’une
notion arbitraire sur internet, on peut, par ailleurs, lire des dossiers ou des livres entiers sur
écran sans que le nombre de pages pose un problème quelconque. L’intérêt de scinder un
grand article ou un dossier en plusieurs écrans consiste plutôt dans le fait qu’il oblige le
rédacteur à une plus grande rigueur dans la structuration de son texte.
À noter, la plupart des outils de gestion de contenu proposent des solutions automatiques pour
ajouter une nouvelle page à un article. Généralement, il est conseillé d’avoir des pages d’un
nombre maximum de signes (caractères et espaces) compris entre 2800 et 3000. Bien
évidemment, ce n’est pas une limite couperet.
Les points essentiels à respecter :
1. un sujet par paragraphe
2. éviter les paragraphes trop longs, si besoin les scinder, n’est pas Proust qui veut
3. insérer des intertitres, ce qui, permet en outre de vérifier le cheminement du discours
quand on rédige. Un intertitre, ce n’est pas seulement une ligne de texte passé en
gras…
4. introduire, mais sans en abuser, des listes à puces ou numérotées, elles permettent de
« casser » l’uniformité d’une page.
3.3.2
Le style
Le style doit être adapté au type d’information : brève, article, dossier… et au public autant que
faire se peut. On retiendra ces règles, pas uniquement valables sur internet d’ailleurs :
1. privilégier la forme active à la forme passive, ce qui a l’immense avantage de limiter
les problèmes d’accord du participe passé
2. éviter le jargon, ce qui n’empêche pas d’utiliser le vocabulaire adéquat et permet aussi
un meilleur référencement
3. limiter l’emploi des sigles et autre acronymes et, toujours, les détailler la première fois
qu’on les utilise, mais pas dans le titre ni dans le chapeau. Sauf, évidemment si on ne
connaît que le sigle ou que sa signification première est devenue secondaire ou a
changé. Il est inutile, voire ridicule, par exemple, de détailler SNCF ou RATP
4. mettre des dates ou des moments précis plutôt qu’une indication temporelle vague,
« le mois dernier » sera plus efficacement remplacé par « en septembre 2010 »
5. éviter les phrases d’accumulations de chiffres, de dates ou de données 3, si c’est
vraiment nécessaire et possible, les remplacer par des listes qui seront plus lisibles
6. la ponctuation est utile, mais ne pas en abuser, notamment des points de suspension
qui vont toujours par trois en français
7. limiter les « qui », les « que » car ils alourdissent la phrase. Souvent rédiger autrement
la phrase ou la scinder permet de les éviter.
3Les listes d’explorateurs ou de poissons sont déjà assez illisibles au début de certains chapitres des
Voyages extraordinaires de Jules Verne, alors imaginons sur un site internet…
Conseils rédactionnels
Page 7 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

8. Écrire pour le web quelques pistes
3.4RÉFÉRENCES
décembre 2013
ET LIENS
Il est préférable aujourd’hui de donner directement accès à la référence en ligne en faisant un
lien vers le site concerné.
Il est très fortement conseillé de ne pas écrire : « cliquer ici pour lire l’article sur le sujet » mais
de présenter le lien de façon rédactionnelle. On devrait donc mettre le lien sur « l’article du site
Choses et trucs » dans le corps du texte. La charte graphique du site permettant de bien
montrer qu’il s’agit d’un lien sur lequel on peut cliquer pour aller voir ailleurs.
Sauf que… de l’expérience de certains webmestres due, notamment, au fait, que beaucoup,
beaucoup de blogs et de sites mettent les liens sur un « cliquer ici » plutôt que sur son titre, la
formule « cliquer ici » a des beaux jours devant elle. On fera en fonction de son public.
La mise en écran doit aussi permettre de comprendre qu’on a affaire à un hyperlien. On fera le
lien sur « l’article du site Choses et trucs » dans le corps du texte.
Et aussi, essentiel, quand on introduit un lien, penser notamment que les gens qui nous lisent
peuvent être aveugles, ou ne pas pratiquer la langue du site où ils vont aboutir. Donc les règles
à respecter :
• indiquer dans les champs prévus le comportement du clic surtout si le lien ouvre dans
une nouvelle fenêtre ou un nouvel onglet et ne réserver cela qu’aux liens sortants du site
• préciser le titre de la page vers lequel le lien pointe, au besoin
• préciser la langue si elle diffère de celle du site d’origine.
Conseils rédactionnels
Page 8 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

9. Écrire pour le web quelques pistes
4 L’ÉCRITURE
4.1DES
WEB
:
décembre 2013
UN PHÉNOMÈNE À TROIS DIMENSIONS
LIENS DANS TOUS LES SENS
Sur internet, un article n’est pas « tout plat ». Tout d’abord il est dans un endroit, catégorie ou
rubrique, du site. Ensuite, la page sur laquelle on le lit est elle-même remplie de liens qui
permettent d’aller visiter d’autres partie du site, d’écrire au webmestre ou d’aller voir ailleurs.
Enfin l’article lui-même peut, et même doit, avoir des liens qui peuvent renvoyer à une autre
partie de la page (ancre), une autre page du site, ou une référence internet autre, voire faire
l’objet d’une publicité. S’il est illustré, son image peut aussi faire l’objet de traitements divers :
rester fixe, s’ouvrir dans une autre fenêtre, être zoomée ou bénéficier de l’effet lightbox.
L’effet lightbox permet d’afficher l’image sur la page en la laissant apparente
4.2DES
INTERTITRES POUR UN SOMMAIRE
Certaines applications génèrent automatiquement le sommaire d’un article ne repérant les
paragraphes de titre : h1, h2, h3, etc. comme le font les traitements de texte. Cela est utile
aussi pour le référencement. Les robots référenceurs ayant besoin de ce genre d’élément pour
bien faire leur travail. Cela facilite la navigation, notamment dans un texte long, et permet au
lecteur de voir plus vite ce qu’il a envie de lire.
Wikipédia, article sur Mtislav Rostropovitch
L’écriture web : un phénomène à trois dimensions
Page 9 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

10. Écrire pour le web quelques pistes
décembre 2013
5 ACCESSIBILITÉ
Dans la ville, c’est assez simple, sur le principe, on met tout, on doit essayer tout au moins, aux
normes « fauteuil roulant » ce qui permet aussi aux utilisateurs de béquilles, aux nains, aux
personnes très grosses ou très chargées, à ceux qui ont des poussettes de passer, et aux
toutes petites personnes de pouvoir habiter au dernier étage et de prendre l’ascenseur. On y
ajoute une pincée d’avertissements sonores et de braille pour les aveugles et c’est tout. Ce qui
déjà, en soi, pose des problèmes assez complexes pour la mise en œuvre, quand c’est
réalisable.
Sur internet le problème est plus complexe, la capacité des personnes à marcher n’a aucune
importance mais il faut tenir compte de plus d’éléments.
La vision, si elle est absente ou seulement fortement déficiente, ou s’il y a des troubles
•
de perception des couleurs.
La capacité à utiliser ou non ses mains pour naviguer sur une page ou un site et avec
•
quels outils. Les internautes peuvent ne pouvoir utiliser que leurs yeux, la souris ou
seulement le clavier en fonction de leurs handicaps, ou encore des commandes sonores.
•
L’accessibilité à internet, tout le monde ne dispose pas d’une connexion rapide et fiable.
•
Le type de matériel, un site doit pouvoir être vue sans problème sur un petit écran
comme sur un grand comme on l’a vu plus haut.
Mais c’est plus facile à mettre en œuvre et moins coûteux. Les Règles pour l’accessibilité des
contenus Web 4 ont pour objet d’indiquer ce qui doit être fait ou éviter pour donner l’accès le
plus large possible aux sites internet. La dernière version date de décembre 2008 et sa
traduction française de juin 2009. Sur la centaine de points abordés, on relèvera les éléments
clés qui pourraient le plus souvent être mis en œuvre par les rédacteurs des sites.
5.1SÉPARER
LE FOND DE LA FORME
La mise en forme à l’aide de feuilles de styles en cascade ou CSS, pratiquée par tous les outils
de gestion de contenu (CMS) est l’outil clé. On peut même envisager des feuilles de styles
spécifiques pour palier certaines déficiences visuelles : exemple, le site de l’association des
Accidentés de la vie5.
Les feuilles de style doivent être conçues de façon à permettre d’agrandir les caractères sans
que cela nuise à la lisibilité de la page, les tailles des polices seront données en em dans la
mesure du possible.
Il est à noter que le principe de séparation du fond et de la forme est aussi valable pour les
documents écrits sur traitement de texte, mais le procédé est différent puisque la conception
des styles se fait dans le logiciel de traitement de texte.
5.1.1
•
Des solutions en plus
Des feuilles de styles spécifiques pour palier certaines déficiences visuelles
développeurs.
4http://www.w3.org/Translations/WCAG20-fr
5http://www.fnath.org
Accessibilité
Page 10 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

11. Écrire pour le web quelques pistes
•
décembre 2013
Un bouton sur la page pour agrandir ou diminuer la taille des caractères peut être une
bonne idée (voir le site www.mediapart.fr, on agrandit l’article dans son bloc), car cette
fonction des navigateurs n’est pas très connue
5.1.2
développeurs.
Des contrastes
Quand le texte est peu contrasté par rapport au fond, il est peu lisible, même si les personnes
ont une vision normale. Il l’est encore moins pour celles qui souffrent de diverses affections
soit visuelles (troubles de perception des couleurs 6 par exemple où la luminosité est mieux vue
que la couleur), soit de maladies dégénératives (sclérose en plaque par exemple), ou tout
simplement passé un certain âge.
5.1.3
Solutions
•
Des feuilles de style adaptées
développeurs.
•
Les rédacteurs du site doivent s’en tenir aux couleurs prescrites par la charte du site
rédacteurs.
5.2SIGNALER
LES ÉLÉMENTS NON TEXTUELS ET PROPOSER DES ALTERNATIVES
Les personnes aveugles qui accèdent au site via un transcripteur audio, celles qui ont une
connexion à bas débit (ça existe encore, même en France métropolitaine) doivent pouvoir savoir
ce qu’il y a.
Avantage complémentaire : cela favorise le référencement. Il n’est pas indispensable, c’est
même inutile, néanmoins de le faire pour les éléments de « pure décoration » : puces et autres
icônes.
5.2.1
•
Solutions
Alimenter les balises « alt » et « title »pour décrire le contenu (moins de 60 signes),
cela se fait au cours de l’insertion d’images quand on utilise un CMS. Dans Spip, on
remplira les champs « Titre de l’image » et « Description » en dessous de l’image
téléchargée.
rédacteurs.
•
Signaler ce contenu non textuel dans le corps de l’article
rédacteurs.
•
Les captcha doivent pouvoir être fournis sous une autre forme (vocale généralement)
développeurs.
•
Les scripts doivent avoir une solution alternative
5.3SIGNALER
développeurs.
LES LIENS
Les liens doivent être reconnus de façons évidente et être explicite.
5.3.1
•
Solutions
Une mise en forme différente selon qu’il a été visité ou non et qu’il est actif (pointeur
dessus) ou non
développeurs.
6http://daltoniens.fr
Accessibilité
Page 11 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

12. Écrire pour le web quelques pistes
•
décembre 2013
Les présenter de façon « rédactionnelle » dans le texte en évitant les « cliquez ici »,
ceci est valable même pour les pages de liens, avantage c’est bon aussi pour le
référencement
•
rédacteurs.
En théorie les liens doivent ouvrir dans la même page, sinon il faut le signaler. En
pratique, on peut décider que tous les liens externes au site débouchent sur une
nouvelle page. Par contre, pour ceux ouvrant sur une autre page du site, l’internaute
doit rester au même endroit. C’est une pratique qui bien que pas très « orthodoxe »,
c’est-à-dire pas officiellement admise dans les standards, est généralisée.
rédacteurs et développeurs.
5.4UNE
INFORMATION STRUCTURÉE
Les titres doivent être mis en forme en utilisant les balises prévues : h1, h2, h3 etc., il ne suffit
pas de mettre le texte en gras et d’augmenter sa taille pour en faire un titre. De la même façon,
on indiquera correctement les citations et les listes.
5.4.1
•
Solution
Utilisation des fonctions du CMS
5.5DES
rédacteurs.
INFORMATIONS OBLIGATOIRES
Chaque page doit avoir un « doctype », balise indiquant le type de document, un titre pertinent,
une indication de la langue et du sens de l’écriture. Le premier élément est généralement
définitivement automatiquement lors de la création du site via un CMS, et ajoutée
systématiquement par les logiciels de compositions de page html.
5.5.1
•
Solutions
Dans les paramètres généraux, indiquer la langue majoritairement utilisée dans le site
et le sens de lecture
•
Si nécessaire, préciser la langue de l’article
Accessibilité
développeurs
rédacteurs
Page 12 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

13. Écrire pour le web quelques pistes
6 IMAGES,
6.1LES
décembre 2013
VIDÉO, FICHIERS AUDIO ET AUTRES DOCUMENTS
IMAGES
Les images doivent à la fois ne pas être trop grandes ni trop lourdes afin de ne pas accroitre
démesurément le temps d’affichage de la page. La résolution recommandée pour un bon
affichage sur écran d’ordinateur est de 72 à 75 pixels par pouce (ppp ou dpi pour dot per inch).
Les autres terminaux peuvent demander des définitions plus importantes.
Modifir la taille d'une image dans Gimp
On peut corriger la résolution et la taille des photos avec n’importe quel utilitaire d’image, par
exemple, en version logiciel libre : Gimp que l’on peut installer aussi bien sur Windows, Linux
ou Apple.
Quel que soit le logiciel utilisé, il faut généralement aller dans le menu Image et chercher les
mots « Attributs », « Échelle » ou « Redimensionner ».
Le format png devient le plus utile, il permet en outre d’avoir des images avec des fonds
transparents ce qui n’est pas le cas du jpg ou jpeg, format encore très prédominant.
Et, évidemment, on remplira les champs « title » ou « titre » de l’image ainsi que « alt » qui
permet d’une part à ceux qui ne peuvet pas les voir pour plusieurs raisons de savoir ce
qu’ilsperdent (ou pas d’ailleurs) et aux robots indexateurs de savoir aussi de quoi ça parle. Et
oui, c’est bon pour le référencement. D’ailleurs, à ce propos, donner un « vrai » nom parlant
aux fichiers images est aussi utile, et vous permettra de mieux vous repérer dans votre
phototèque.
Images, vidéo, fichiers audio et autres documents
Page 13 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

14. Écrire pour le web quelques pistes
6.2LES
décembre 2013
FICHIERS AUDIO ET VIDÉO
Leur insertion dépend à la fois du système de gestion de contenu et du serveur où ils sont
hébergés. Généralement il faut copier-coller une ligne de code délivrée par le site hébergeur du
fichier,à moins que l’on ait décidé, ce qui suppose que le site dispose des capacités techniques
nécessaires7. Mais on peut évidemment, se contenter d’un lien pour télécharger le fichier. D’une
manière générale, le fichier ne doit pas être trop gros. S’il est très lourd, il vaut mieux recourir
à un système de transfert de fichier (ftp).
6.3LES
AUTRES DOCUMENTS
Lorsque l’on met des fichiers accessibles en téléchargement, le rédacteur doit indiquer :
•
le titre du document, évidemment, et quelques informations sur son contenu, c’est
utile pour l’internaute, mais aussi pour les robots d’indexation, donc pour le
référencement
•
son format : pdf, rtf, etc., dans l’ensemble, évidemment il est préférable de choisir le
format pdf (fonction automatique dans Spip), on peut éventuellement indiquer aussi
une plate-forme pour télécharger l’application nécessaire à la lecture du fichier
•
son poids : 123 ko par exemple (Spip l’ajoute automatiquement également).
Tout cela fait partie des bonnes pratiques, que tout le monde ne pratique pas forcément,mais
ce n’est pas une raison pour ne pas le faire.
7 c’est-à-dire, générament un plugin dédié.
Images, vidéo, fichiers audio et autres documents
Page 14 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

15. Écrire pour le web quelques pistes
7 UN
décembre 2013
TOUT PETIT PEU DE HTML
Même si on n’y connaît strictement rien en mécanique automobile, il faut avoir quelques
notions basiques : savoir ajouter du liquide de refroidissement ou de l’huile par exemple.
C’est un petit peu pareil quand on travaille sur un site internet même si les systèmes de gestion
de contenu font à peu près tout le travail. Mais il est parfois nécessaire de pouvoir contrôler
dans le code source certains éléments, notamment pour vérifier que le CMS a bien introduit un
paragraphe (<p>) et non un saut de ligne forcé (<br>).
Les balises html doivent être ouvertes : <nom de la balise> et fermées </nom de la balise>
sauf exception.
a
ancre (anchor)
Insère un lien hypertexe.
<a href="http://www.dutailly.net">Tutoriels etlogiciels libres</a>
alt
alternate
Affiche le nom de l’image en remplacement de
celle-ci. Elle n’est jamais toute seule dans une
commande.
<img src="logo.jpg » alt="logo retour au sommaire » width="600 » height="51">
blockquote
bloc
Met un paragraphe en retrait.
<blockquote> </blockquote>
br
saut de ligne (break) Insère un retour à la ligne, ne se ferme pas.
<br> ou </br>
h1, h2 h3, etc.
heading Paragraphes de titres.
<h1> Titre de premier niveau</h1>
name
nom
Nom d’une ancre dans le cadre d’un lien
interne
<a name="haut de la page"></a>
p
paragraphe
Insère un paragraphe et fait un saut de deux
lignes après le paragraphe précédent.
<p>Ceci est un paragraphe</p>
Un tout petit peu de html
Page 15 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

16. Écrire pour le web quelques pistes
8 NOTIONS
décembre 2013
JURIDIQUES
L’internet, n’est pas et n’a jamais été une zone de non-droit. Le droit de la propriété
intellectuelle et de la presse 8 s’y sont toujours naturellement appliqués. Le problème clé qui se
pose est celui de la juridiction compétente ; il est généralement considéré que c’est celle du
lieu où a été constatée l’infraction.
8.1PUBLIC N’EST
PAS SYNONYME DE DOMAINE PUBLIC
Ce n’est pas parce qu’un texte, une image, une vidéo ou tout autre fichier ou information est
accessible librement et gratuitement sur internet qu’on peut la prendre pour la mettre sur un
site, voire sur une publication papier. En droit français, l’utilisation d’une photo non libre de
droit pour diffusion sur internet (ou autre support public) est un délit de contrefaçon 9 passible
de sanctions pénales.
Lorsque l’on veut réutiliser une photo trouvée via un moteur de recherche, il convient de
s’assurer s’il est possible de le faire, soit parce que cela figure sur le site ou les informations de
l’image (clic droit dessus et « Informations sur l’image » avec Firefox par exemple), soit parce
qu’on en aura demandé la permission au propriétaire des droits. Il est d’ailleurs assez rare que
les ayant-droits refusent de donner leur autorisation quand il n’y a aucun enjeu financier ou
commercial.
À faire quand on a le droit d’utiliser une image :
L’enregistrer et la mettre sur le serveur.
À ne pas faire
Mettre un lien vers l’image à son emplacement d’origine. Cela entraîne du trafic
« parasite » vers le site d’origine et peut coûter cher à son propriétaire s’il dépasse son
quota de trafic du fait de cette image. En effet, non seulement l’accès à son site à lui
risque de devenir problématique, mais son hébergeur pourra être amené à lui
demander à payer un complément, voire, si cela se reproduit, à réévaluer à la hausse le
prix de l’hébergement.
Et, bien sûr, toujours donner la source de l’image et son auteur si possible.
8.2LE
DROIT À L’IMAGE EN
FRANCE
Le droit à l’image est une notion floue qui n’existe pas partout. En France, avant toute diffusion
publique d’une photographie il faut s’assurer de l’accord de la personne concernée, même si la
photo est prise dans des lieux publics. La personne photographiée peut intenter une action en
justice sur la base de l’article 9 10 du Code civil. Lorsque les personnes sont mineures, les
parents doivent donner leur autorisation à la diffusion de la photo.
8Notamment la loi du 29 juillet 1881 sur la liberté de la presse et son article 29 qui définit la diffamation.
Le cadre de la loi a seulement été adapté aux spécificités « temporelles » d’internet.
9Article L. 335.2 et suivants du Code de la propriété intellectuelle
10« Chacun a droit au respect de sa vie privée.
Les juges peuvent, sans préjudice de la réparation du dommage subi, prescrire toutes mesures, telles que
séquestre, saisie et autres, propres à empêcher ou faire cesser une atteinte à l’intimité de la vie privée :
ces mesures peuvent, s’il y a urgence, être ordonnées en référé. »
Notions juridiques
Page 16 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

17. Écrire pour le web quelques pistes
décembre 2013
S’il est impossible d’obtenir l’autorisation des personnes photographiées, il est conseillé de les
« flouter » afin de les rendre méconnaissables.
Ce droit à l’image a pour but la protection de la vie privée des personnes, il ne s’étend pas aux
biens matériels, sauf si la photo, largement diffusée, dudit bien matériel peut être
dommageable à la vie privée des personnes. On peut donc librement publier des photos de
bâtiments, de monuments publics 11 ou de sites touristiques ou historiques. La Cour de
Cassation a confirmé ce principe à plusieurs reprises (rapports annuels 1999 et 2000) et dans
un arrêt du 7 mai 2004 en notifiant que : « le propriétaire d’une chose ne dispose pas d’un
droit exclusif sur l’image de celle-ci ; qu’il peut toutefois s’opposer à l’utilisation de cette
image par un tiers lorsqu’elle lui cause un trouble anormal . » En tout état de cause les
problèmes se posent généralement en cas d’exploitation commerciale des photos.
8.3LES
HYPERLIENS ET LE DROIT
La question des liens a donné lieu à nombre de débats au début des années 2000 qui ont
abouti à la recommandation du 3 mars 2003 émise par le Forum des droits sur internet dont le
principe est la : « liberté de lier dans le respect des droits des tiers. »
S’il est conseillé de demander au site que l’on veut lier son autorisation, ce n’est pas toujours
nécessaire, par exemple il serait assez incongru de demander à Légifrance la permission de
faire un lien vers sa base de données de textes législatifs et règlementaires.
Par contre il y a quelques règles à respecter :
•
faire le lien de préférence sur la page d‘accueil du site plutôt que sur une page interne
(lien profond),
•
ne jamais faire un lien directement sur un fichier, pdf ou autre, à télécharger, mais sur la
page qui le propose en téléchargement
•
référencer clairement le lien.
Il y a peu de sites qui soient hermétiques aux liens ou qui réclament impérativement une
autorisation, néanmoins, on peut toujours le vérifier. Cette information figure généralement
dans une page sous les rubriques appelées : FAQ, Établir un lien, Mentions légales, Politique de
liens…
11Sous réserve du respect des droits d’auteurs des architectes. Lequel droit se prescrit 70 ans après la
mort de l’auteur.
Notions juridiques
Page 17 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

18. Écrire pour le web quelques pistes
décembre 2013
GLOSSAIRE
•
Ancre : lien dans une page internet qui permet d’accéder à un autre endroit de ladite
page, par exemple une note de bas de page.
•
Arborescence : organisation d’un site internet. La page d’accueil d’un site internet est
toujours une page « index », à partir de là, le contenu s’organise en rubriques et en
sous-rubriques. Malgré les évolutions techniques qui font que les sites sont de plus en
plus dynamiques, définir l’arborescence d’un site est toujours aussi fondamental.
•
Balises :bases du langage html et xml. Les balises servent à décrire les éléments. Elles
doivent être ouvertes et fermées, sauf exceptions. Une balise html s’écrit entre les <>.
Exemple <body> texte</body> qui indique au navigateur ou commence et ou finit ce
qu’il doit afficher. On les appelle aussi tag, voire méta-tags.
•
Captcha : mot ou expression généralement illisible à retaper après avoir saisi un
commentaire, ce procédé est sensé être anti-spam.
•
Catégorie : sur un blog, articles regroupés selon un thème défini par le gestionnaire du
blog, synonyme : rubrique plutôt utilisée pour les autres sites.
•
CMS : outil de gestion de contenu de site internet, permet, une fois le site développé,
d’alimenter et de mettre à jour un site internet sans connaissances préalables, bien que
els bases soient utiles, du html, les sites conçus avec des CMS sont dynamiques.
Aujourd’hui concevoir un site sans utiliser un CMS est anachronique. Toutes le
sinterfaces de blog reposent dessus par exemple.
•
Commentaire : fonction dans un site ou un blog qui permet aux internautes, librement
ou selon certains critères : inscription (journaux en ligne de Libération et de Rue89 par
exemple), abonnement (journal LeMonde, site Mediapart) de commenter un article.
Selon la structure on peut ou non répondre au commentaire en engageant une « vraie »
conversation. Sous Spip, cette fonction est appelée forum. Elle peut être désactivée
d’office.
•
em : abréviation anglaise pour espace cadratin. Unité de mesure à utiliser dans les
feuilles CSS pour permettre une meilleure accessibilité des textes car la longueur ainsi
mesurée est proportionnelle à la taille des caractères du bloc. Le texte peut ainsi être
agrandi ou diminué avec tous les navigateurs.
•
Fil d’Ariane : élément de navigation qui permet de savoir exactement dans quelle
branche d’un site on se situe.
•
Fil RSS, fil Atom : documents xml qui, mis en ligne, permettent à ceux qui y sont
abonnés de suivre les nouveautés d’un site, d’un blog ou leurs commentaires.
•
h1, h2, h3… : balises indiquant que le paragraphe est un titre. Un titre, sous-titre, titre
de niveau 1, 2, 3, 4, etc. doit toujours être mis en forme avec cette balise. Cela facilite le
référencement et, dans certains cas (les wikis notamment), les paragraphes ainsi traités
forment automatiquement un sommaire.
•
Lien ou hyperlien : lien vers une autre page du site ou un autre site.
Glossaire
Page 18 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62

19. Écrire pour le web quelques pistes
•
décembre 2013
Lightbox (effet) : script qui permet d’afficher une plus grande vue d’une image pardessus sa fenêtre et en la laissant voir en transparence.
•
Pixel : unité de mesure des images et de taille d’affichage des écrans, s’exprime en
pixels par pouce (ppp) ou dot per inch (dpi).
•
Plugins ou extensions : petits programmes qui ajoutent des fonctions aux CMS.
•
Point : mesure typographique. À éviter pour les sites internet.
•
Résolution : ou définition, qualité de l’image ; plus le nombre de pixels par pouce est
élevé, plus le poids informatique de l’illustration est élevé. Pour une vue à l’écran 72 à
75 ppp suffisent, pour une impression il ne faut pas moins de 150 (minimum) pixels par
pouce si l’image n’est pas très grande. Sinon une résolution de 200 à 300 pp est tout à
fait indiquée en fonction du type d’impression.
•
Rétro-modération : modération, c’est-à-dire tri, donc suppression ou modification, des
commentaires après publication. Peut poser des problèmes de responsabilité civile ou
pénale selon les législations.
•
Rubrique : organisation du contenu des sites internet par chapitre, synonyme de
catégories pour les blogs ou de sections pour le CMS Joomla par exemple.
•
Scripts : petits modules de programmation, souvent en JavaScript, qui permettent
d’ajouter des fonctions autrement impossible à obtenir sur des pages web.
•
Tag : mot-clé, principalement utilisé pour les blogs ou les métadonnées (dans ce cas
synonyme « balise »).
Glossaire
Page 19 / 19
Isabelle Dutailly – 73 rue Louis Lumière, 75020 Paris – isabelle@dutailly.net – www.dutailly.net – 06 10 28 14 62