Formation HTML

Les balises de contenu rédactionnel

  • Episode N° 5
  • Difficulté facile
  • Publié le 21/04/2020 par
  • Dernière mise à jour le 29/09/2024
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 aidez à 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 davantage 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 désormais 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. À l’inverse, si l’on souhaite créer une liste ordonnée (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 numéro 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 par ailleurs 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 3ᵉ é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.

Allez, ne t'arrête pas maintenant !
Épisode suivant
Épisode précédent
Commentaires

Vous devez être connecté pour pouvoir commenter. Se connecter

Vous cherchez un formateur HTML pour votre école ou entreprise ?

J'enseigne le HTML depuis 2016 dans des écoles du supérieur, donc si vous recherchez un intervenant/formateur qualifié, n'hésitez pas à me contacter 🤓

Je me laisse tenter