outils et langages numériques

1 - Structurer sa page

Pour contenir l'ensemble de votre texte (construction du squelette de la page), vous allez convoquer les balises sectionnantes <section> et <article> :

Résultat dans un navigateur :

La balise sectionnante <section> est utilisée pour regrouper des contenus liés logiquement (qui traitent du même sujet) et créer des sections de page. Elle peut être multipliée dans la page.

L'élément de contenu <article> constitue une section de contenu indépendante. Dans cet élément <article> on peut investir :
- les paragraphes <p> pour organiser le corpus textuel et
- les titres de <h2> à <h6>. Si le titre <h1> n’a pas été utilisé, avant dans le <header> par exemple, alors il peut être convoqué.

2 - Structurer son contenu textuel

Pour respecter la structure initiale d'un texte constitué de paragraphes, vous allez convoquer l'élément HTML p pour chaque paragraphe à créer :

Résultat dans un navigateur :

Les paragraphes sont généralement représentés comme des blocs et séparés par un espace horizontal (saut de ligne).
Préconisation : répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page pour les personnes en situation de handicap visuel. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

3 - Hiérarchiser les niveaux de titre

Pour matérialiser dans votre texte différentes valeurs de titres, vous allez convoquer les éléments h1 à h6. Ils représentent six niveaux de titres dans un document, h1 est le plus important et h6 est le moins important. Un élément de titre a une valeur sémantique (relative au sens) et décrit brièvement le sujet de la section qu'il introduit :

Résultat dans un navigateur :

Les paragraphes sont généralement représentés comme des blocs et séparés par un espace horizontal (saut de ligne).
Préconisation : répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page pour les personnes en situation de handicap visuel. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

Vous trouverez ici un tableau indiquant les valeurs en px, en em et accessoirement en pt pour ces six niveaux de titre.

4 - Mettre en valeur en gras

L'élément HTML b permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras, cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS font-weight qu'il faut utiliser. L'exemple ci-dessous embarque un style CSS inline pour le côté pratique de la démonstration mais il peut être déporté dans une feuille de styles externe. La valeur bold équivaut à une valeur numérique de 700.

Résultat dans un navigateur :

L'élément HTML strong indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent (tels que des messages d'avertissement par exemple). Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques.

Si l'élément est d'une importance particulière, on utilisera l'élément HTML strong.

Résultat dans un navigateur :

Pour les puristes
strong représente une logique, apporte une différence sémantique. Alors que b ne représente qu'une mise en forme, l'apparence. Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style, la présentation de strong est pertinent, contrairement à b.

5 - Mettre en valeur en italique

L'élément HTML i représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.

Résultat dans un navigateur :

L'élément HTML em (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister.

Résultat dans un navigateur :

Pour les puristes
em représente l'accentuation de son contenu, tandis que l'élément i représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique.

Particularisme : le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture, doit utiliser l'élément HTML cite.

6 - Gérer les espaces

Dans les documents imprimés, et avec l’aide du logiciel Adobe Indesign, on peut insérer une espace fine sécable ou une espace fine insécable.

Dans les documents HTML, la syntaxe pour insérer et matérialiser l’espace insécable est l’entité :   (pour Non Breakable SPace). Celle-ci a les mêmes caractéristiques visuelles que l’espace régulière, avec l’avantage de garder sur une même ligne les caractères étant de chaque côté.

Résultat dans un navigateur :

Par ailleurs, pour marquer une espace fine insécable, l’entité à convoquer est :  . Cette espace étroite est insécable et peut être utilisée à la perfection comme espace fine insécable dans tout document HTML.

7 - Marquer un retour à la ligne

Pour réaliser un saut de ligne dans un texte, lorsqu'il a une importance (par exemple lorsqu'on écrit une adresse ou un poème), vous allez convoquer l'élément br :

Résultat dans un navigateur :

Attention, br ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS <margin> sur l'élément HTML p.