Écrire Pour le Web

Ce n’est pas parce qu’on est rédacteur Web qu’on est un as de l’html. Je sais de quoi je parle. Pourtant, il nous arrive à tous de devoir, un jour ou l’autre, mettre les mains dans le cambouis – lisez: intégrer du texte dans un éditeur html. Voici donc quelques codes html essentiels au webwriter.

Langage et balises

Pour rappel, HTML est un langage de balisage qui permet d’écrire de l’hypertexte. Les balises sont des marqueurs ou commandes HTML constitués d’une directive. Encadrée par les signes inférieur à (<) et supérieur à (>), cette directive permet de mettre en forme le texte, et indique au navigateur Web comment doit être affiché le document concerné.

Généralement, il y a 2 balises:

1. La balise ouvrante indique à partir de quel endroit la directive doit être prise en compte : <p>.
2. La balise fermante précise à quel endroit la directive prend fin : (</p>).

Rudiments de vocabulaire

Nous vous proposons ci-dessous quelques balises particulièrement intéressantes pour optimiser vos contenus Web.

Ci-dessous, les balises sont mises entre parenthèses pour éviter leur mise en forme.

Les titres

Il y a 6 niveaux de titres en html : de h1 à h6, h1 correspondant à la typographie la plus grande et h6, la plus petite. Ainsi, vous placerez vos titres de premier niveau entre les balises (<h1>) et (</h1>).

Utilisez des titres pour

• organiser votre information,
• hiérarchiser visuellement vos contenus,
• créer de la saillance,
• permettre un balayage facile.

Le gras

Le gras est indiqué par les balises (<strong>) et (</strong>) ou (<b>) et (</b>). Ces balises sont intéressantes pour mettre vos mots-clés en évidence. De cette manière, ils ont une meilleure saillance et sont plus facilement repérables dans le texte.

Utilisez le gras pour

• mettre vos mots-clés en évidence (qui n’apparaissent pas déjà dans votre titre),
• faire ressortir les concepts et mots qui comptent dans vos pages
• créer de la saillance,
• permettre un balayage facile,
• aider au référencement.

Les listes à puces

Les balises utilisées pour créer une liste à puces sont : (<ul>)(<li>)(</li>)…(<li>)(</li>)(</ul>). Utilisez le (<ul>) pour ouvrir la liste, le (</ul>) pour la fermer et les (<li>)(</li>) pour créer les lignes de votre liste.

Utilisez les listes à puces pour

• mettre une énumération en évidence,
• organiser et structurer vos contenus
• créer de la saillance,
• permettre un balayage facile,
• aider au référencement.

N’exagérez pas dans vos énumérations : ne dépassez pas 6 à 7 lignes, regroupez logiquement les éléments de vos listes et évitez les répétitions dans les premiers mots de vos lignes.

Les hyperliens

(<a href= »http://www.wearethewords.com »>We are the words a un nouveau site Web ! (</a>) est la syntaxe de la balise utilisée pour indiquer un hyperlien. Dans cette structure, l’adresse elle-même est invisible pour l’utilisateur, qui ne voit que la mention « We are the words a un nouveau site Web ! ».

Utilisez les hyperliens pour

• permettre la navigation interne dans une longue page (via les ancres),
• donner plus d’informations à l’utilisateur (en lui suggérant, par exemple, d’autres ressources via une série de liens du type « En savoir plus »)
• favoriser le côté « acteur » de l’internaute. L’internaute est un utilisateur ; une page Web sans hyperlien n’est donc pas une page Web optimisée en termes d’utilité, d’utilisation et d’action.
• aider au référencement.

Vous veillerez à regrouper les hyperliens en bas de la page ou sur le côté lorsque les pages en comptent beaucoup. Vous veillerez également à toujours prévoir un « titre » pour votre hyperlien (ici : We are the words a un nouveau site Web) plutôt que de fournir l’adresse web « en dur ».

Les paragraphes

Les balises de paragraphe sont (<p>) qui se place avant la première lettre du paragraphe et (</p>) à la fin du paragraphe.

Utilisez les paragraphes pour

• « aérer » vos pages Web,
• « découper » l’information en paquets de 2 à 3 idées max. pour s’adapter à la « capacité d’appréhension immédiate » de l’internaute
• organiser son information par thèmes.

Vous n’hésiterez pas à prévoir un titre tous les 2, 3 paragraphes pour que l’internaute suive le développement. Vous veillerez à placer les éléments les plus informatifs dès le début des paragraphes. De cette manière, si, à la lecture de la première phrase, l’utilisateur ne se sent pas concerné par tel paragraphe, il pourra passer directement au paragraphe suivant. Cela lui permet de parcourir une page en diagonale et d’évacuer directement les éléments qui ne l’intéressent pas.

Le saut de ligne

La balise « saut de ligne » est une mono-balise (elle fonctionne seule, sans balise ouvrante). Le marqueur est  (<br />). Il se place en fin de la phrase, avant celle que vous souhaitez forcer de passer à la ligne.

Utilisez le saut de ligne pour

• réduire la largeur de vos textes. Une ligne de texte à l’écran doit faire env. 60 à 100 ca pour être lue confortablement.
• corriger visuellement un bloc de texte trop confus sans alignement à droite. En général, un texte à l’écran n’est pas justifié, mais seulement aligné à gauche. Parfois, il convient de « tricher » un peu la présentation, notamment, des listes à puces ou paragraphes pour que le balayage de la page reste facile.

Petit bonus

En début d’article, j’ai utilisé la balise Acronyme pour expliquer le sigle HTML. Son marqueur est (<acronym title= »HyperText Mark-up Language »>HTML(</acronym>).

Poursuivre votre lecture

1. Sur les contraintes formelles de l’écriture Web
2. Sur les contraintes fonctionnelles de l’écriture Web
3. Sur le référencement

Vous êtes rédacteur Web ? Avez-vous acquis le langage HTML ? Quelles sont les balises que vous utilisez le plus ?

A propos de Muriel Vandermeulen

Directrice de l'agence "We Are The Words", Muriel prône un Web utile, attrayant et durable grâce notamment à une meilleure gouvernance éditoriale. Aujourd'hui, ses compétences sont largement reconnues auprès des groupes de presse (Le Monde, L'Avenir.net, ... ), de grands comptes (Fnac, CDC, Unilever, Toyota), ou encore de hautes écoles et ministères belges et français.

• Mail
|
• Web
|
• Twitter
|
• Facebook
|
• LinkedIn
|
• Google+
|
• More Posts (429)

Sur le sujet, avez-vous lu...

• Multiplier les balises H1 sur une page: sacrilège ou opportunité?
• Référencement éditorial: il y a balises html et balises html
• Google Panda et Google Pingouin: prédateurs du référencement?
• Les contenus dupliqués au menu du Panda (1/3)
• Ergonomie des contenus et rédaction Web, deux revers, une médaille