Formation HTML

Les balises de contenu rédactionnel

  • Episode N° 5
  • Difficulté facile
  • Publié le 21/04/2020 par
  • Dernière mise à jour le 28/04/2020
Retour à la formation HTML

Dans cet épisode, nous allons parler de structuration de contenu rédactionnels, c’est à dire, tout le contenu textuel. Vous verrez toutes les balises utiles à la création de pages et d’articles sur internet. Si vous n’avez pas lu le dernier épisode sur la structure d’une page web, allez-y et revenez ici ensuite, sinon vous risquez d’être perdu.

Les paragraphes

Tout d'abord, nous allons commencer par le plus simple, les paragraphes. L’usage de cette balise est relativement simple. Pour créer un paragraphe, il faut simplement encadrer le texte souhaité de la balise <p>, comme dans l’exemple ci-dessous :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a rutrum justo, non
consequat quam. Aliquam nec quam et quam ornare porttitor at non mauris. Interdum
et malesuada fames ac ante ipsum primis in faucibus.</p>

Il faut utiliser une seule balise <p> par paragraphe, cela veut dire que si vous devez faire un saut de ligne, il faut fermer la balise <p> et en ouvrir une nouvelle. Petite particularité tout de même, on ne peut pas mettre de balise <p> à l'intérieur d’une autre balise <p>, si vous faites ça, votre navigateur fermera automatiquement la première avant de réécrire la seconde, essayez et vous verrez.

Les titres (structure hn)

Comme dans tout document, vous souhaitez surement organiser votre contenu à l’aide de titres et de sous-titres. Pour cela, vous pouvez utiliser la balise <h1> pour créer un titre de niveau 1 (le plus important de la page donc). Vous pouvez utiliser jusqu'à 6 niveaux de titres pour structurer votre page. Contrairement aux idées reçues, il est possible d’avoir plusieurs titres de niveau 1 au sein de la même page.

Si vous suivez la logique, un titre <h2> sera moins important que le titre <h1> et ainsi de suite. Je vous ai parlé de 6 niveaux de titres, mais en réalité, peu de sites utilisent les balises <h5> et <h6>.

Essayez en copiant cet extrait de code dans votre document HTML:

N’oubliez pas de sauvegarder les changements au niveau du document et de recharger la page, vous devriez avoir trois phrases avec trois tailles de police différente. Malheureusement cela va bien souvent plus vous induire en erreur que vous aider à styliser votre site.

En effet, beaucoup de personnes conservent les tailles des titres au détriment de la bonne structuration de la page. N’oubliez pas qu’en HTML nous sommes là pour structurer et non pour styliser. Nous verrons dans la formation CSS comment faire pour désactiver ces tailles par défaut afin de manipuler les balises indépendamment de leur effet visuel. De plus ces tailles peuvent varier suivant l’emplacement de la balise <hn> (ici ‘n’ est à remplacer par un nombre de 1 à 6)

Cette structure de document en utilisant les balises de titres est communément appelée “structure HN”. Sa bonne réalisation était une action utile en référencement naturel, mais il semblerait que son importance ait été réduite aux yeux des algorithmes des moteurs de recherche aujourd’hui.

Les balises de mise en avant

Reprenons notre paragraphe de tout à l’heure, imaginez maintenant que vous souhaitez mettre un mot en gras, enfin je devrais plus dire, en avant (peu importe le style visuel que vous souhaitez lui attribuer, n’oubliez pas).

Vous pouvez faire cela très simplement en entourant le mot ou le groupe de mots souhaité par la balise <strong>. Si vous faites le test, vous verrez que le texte contenu entre ces balises est maintenant affiché en gras, c’est le comportement par défaut des navigateurs web. La balise <strong> permet d’indiquer que le mot encadré est plus important que le reste de la phrase ou du contenu du paragraphe.

On retrouvera un comportement similaire avec la balise <em>. Cette balise sert également à mettre en exergue du contenu dans une phrase, mais cette fois-ci, le rendu visuel par défaut du navigateur sera de mettre le contenu en italique.

Il existe beaucoup de balises comme celles-ci, mais pour l'instant, nous ne nous attarderons que sur les principales, nous aurons largement l’occasion d’en croiser d'autres dans cette formation HTML et lors d’exercices.

Les liste à puces et numérotées

En HTML il est possible de créer des listes très simplement, et croyez-moi, des listes en HTML, vous allez en créer un sacré paquet. Pour l’instant on va juste créer la première liste de votre longue carrière. Pour cela, copiez simplement le code suivant dans votre page :

Comme vous pouvez le constater, une liste à puce ne tient pas en une seule balise HTML, il en faut pour cela au minimum 2. La première balise, <ul>, sert à définir le type de liste que l’on souhaite afficher. Ici <ul> vient de l’anglais “Unordered List”, ce qui veut dire “Liste non ordonnée”, donc une liste à puce. A l’inverse si l’on souhaite créer une liste ordonné (avec des numéros), il faudra utiliser la balise <ol> pour “Ordered List” en anglais.

N’hésitez pas à modifier la balise <ul> en <ol> afin de voir le changement s'opérer.

Maintenant que notre liste est ordonnée,  ajoutez l’attribut start et renseigner une valeur pour définir à quelle chiffre la liste doit débuter, comme ceci:

Il est également possible d’ajouter un attribut reversed à notre balise <ol> afin de lister les éléments par ordre décroissant.

Maintenant, parlons du contenu de la liste, pour ajouter un élément à notre liste, il suffit d’ajouter une balise <li> entre les balises <ul> (ou <ol>). Chaque nouvelle balise <li> créera automatiquement une nouvelle entrée dans la liste. Le contenu de la balise <li> peut être du texte, mais ce n’est pas une obligation, vous êtes libre de mettre d’autres balises à l’intérieur, cela s'avérera très pratique lorsqu’il faudra créer des menus de navigation par exemple.

Il est également possible de mettre une liste dans une liste et de créer comme ceci des sous-listes. Voici un exemple de sous-liste, on remarque qu’une liste <ul> a été insérée dans le 3e élément <li> de la liste ordonnée (de premier niveau).

Vous l’aurez compris, avec les listes on peut aller très loin, c’est un ensemble de balises très pratique dès lors qu’un contenu se répète plusieurs fois dans une page.