Structurer le texte et le contenu de la page avec des balises HTML

Dernièrement, dans la grande partie « créer une page HTML », nous avons pu constituer la base de notre page web. Cela dit notre page est un peu vide et l’objet de cette partie va être d’introduire des nouvelles balises HTML afin d’organiser et hiérarchiser du texte. Nous allons voir comment structurer la page avec des titres, des paragraphes, des listes et comment mettre certains éléments en avant.

Les titres en html, les balises HTML <hn>

Les titres sont utiles pour hiérarchiser du contenu. Comme pour la rédaction d’un document que l’on souhaite segmenter en plusieurs parties, on a pour habitude d’utiliser des titres et sous-titres pour différencier les parties de son document. En HTML, on utilise les balises <hn> pour représenter un titre. Sachant que le « n » de la balise <hn> doit correspondre à un nombre entre 1 et 6 (inclus). En fait, une balise de titre est organisée en six niveaux du plus important au moins important. Je m’explique:

  • <h1> … </h1> : Le titre entre ces balises est le plus important dans la page.
  • <h2> … </h2> : Le titre entre ces balises est important.
  • <h3> … </h3> : Ici, il est moins important.
  • <h4> … </h4> : Titre pas très important.
  • <h5> … </h5> : Titre encore moins important.
  • <h6> … </h6> : Limite celui là ne sert à rien, tu sors …

On distingue les six niveaux des balises de titre mais pour information il est très rare d’utiliser les balises <h4>, <h5> et <h6>.

L’intérêt de ce découpage en six niveaux va être utile pour le visiteur de la page qui pourra distinguer d’un coup d’œil les différentes parties. En effet, de la balise de premier niveau (<h1>) à la balise <h6>, les titres sont représentés avec une taille différente, observez:

Balises html de titre hn
Une balise de titre <hn> est »paires », elle doit donc être ouverte puis fermée, comme ceci: <hn> votre titre </hn>.

Attention: Ne confondez pas la balise <title> qui est le titre de la page entière et les balises de titre <hn> qui sont des titres dans la page.

Les bonnes pratiques sur les titres HTML dans une page web

  • Une page web ne doit pas être constituée de plusieurs titres de premier niveau.
  • Je me répète mais il ne peut pas y avoir deux titres en <h1> , seulement un seul dans une page web.
  • Votre page doit commencer par un titre de niveau 1, soit la balise <h1> .
  • En général, dans une logique de hiérarchisation, la balise après un titre de niveau 1 est un titre de niveau 2 et ainsi de suite …
  • C’est le langage CSS qui vous permettra de modifier le visuel de vos pages (taille, couleur, alignement…), avec le langage HTML vous devez penser structure logique, hiérarchie …

Un exemple vaut mieux qu’un long discours :

structure html avec les balises html hn

Les paragraphes, la balise HTML<p>

On peut apercevoir, dans l’exemple précédent, la balise <p> qui encadre du texte sous les titres. Cette balise « paire » déclare un paragraphe. Elle débute par <p> et finit par </p>.

Dans le code suivant je vous laisse découvrir l’utilisation de la balise de paragraphe <p>.balises de paragraphe en html

On s’aperçois immédiatement que le contenu de la page (maigre soit-il) est articulé autour de deux paragraphes. Maintenant que se passe t-il si je n’utilise pas les balises pour organiser mon texte ? Observez:

texte html sans balises

Le texte est mal interprété par le navigateur web, malgré avoir sauté plusieurs fois des lignes dans mon éditeur de texte, le texte est affiché sur une seule ligne. Voilà ce qu’il se passe si vous n’utilisez pas les balises HTML, même si dans votre éditeur de texte vous sautez des lignes, etc…

Retenez que ce qui a de la valeur pour le navigateur web se sont les balises qui lui permettent d’organiser votre texte. Un texte sans balises pour le navigateur c’est comme un œuf sans coquille ( 😯 ), il ne sait pas comment le représenter et il l’affichera à l’écran de façon anarchique.

D’ailleurs si vous voulez revenir à la ligne dans un paragraphe il faut utiliser une balise « orpheline », <br />:

revenir à la ligne en html, la balise html br

Maintenant que les titres et les paragraphes n’ont plus de secret pour vous, j’aimerai vous montrer les « listes ».

Les listes en HTML

Pour commencer, une liste permet d’organiser des informations. En HTML on trouve deux sortes de listes:

  • Les listes non-ordonnées (ou listes à puces);
  • Les listes ordonnées (ou listes numérotées).

Puisque j’aime bien les illustrations je vous laisse regarder l’image ci-dessous:

liste à puces et liste numérotée en html

Liste à puces, balise <ul>

La liste à puces, aussi appelé liste non-ordonnée, permet de créer une liste d’éléments avec des symboles typographiques (des cercles, carrés …) ou il n’y a pas de vraiment besoin d’avoir une notion d’ordre, observez:

  • Un exemple
  • Et un autre exemple

Ou avec des symboles différents:

  • Première exemple
  • Carré cet exemple …

La liste à puces est construite comme suit:

On déclare la liste avec la balise <ul> puis les éléments de cette liste avec la balise <li>.

Attention: Ces balises sont « paires », pensez bien a fermer les balises que vous avez ouverte.

J’insiste bien sur le fait que la liste doit être entre les <ul>, comme ceci: <ul>  la liste … </ul>

Liste numérotée, balise <ol>

Dans la liste numérotée, ou liste ordonnée, on retrouve une structure similaire, tant sur le code que sur le résultat visible.

Rappelez-vous, pour déclarer une liste non-ordonnée (liste à puces) on introduisait la balise <ul>. Ici pour une liste ordonnée, on utilise la balise <ol>. Les balises <li> sont toujours là et ne changent pas.

Le point de différence majeure est que la liste ordonnée introduit une notion d’ordre. On retrouve ainsi une liste avec un début et une fin, organisée par des chiffres dont le première élément de la liste commence par le numéro 1, le second par 2, etc …

Je vous laisse découvrir:

  1. Le début de la liste
  2. La suite
  3. etc…
  4. La fin

C’est une liste qui introduit une certaine chronologie et, à la différence de la liste non-ordonnée, permet un ordre logique à suivre avec un début et une fin. On pourrait l’appliquer par exemple pour une recette de cuisine qu’il faut suivre dans l’ordre pour obtenir un bon gâteau. En comparaison on pourrait utiliser la liste non-ordonnée pour « lister » les différents ustensiles nécessaires à la préparation.

exemple HTML avec les listes ul et ol

La comparaison des deux listes étant faites, voyons la construction de la liste ordonnée (ou liste numérotée):

Astuce: Pour différencier les balises:

  • <ol> = <Ordered List> en français liste ordonnée
  • <ul> = <Unorderer List> en français liste non-ordonnée

La mise en valeur en HTML

Il peut arriver que l’on veuille mettre l’accent sur une phrase, un mot, dans la page web. En HTML, il y a différentes façons de ressortir certains éléments par rapport à d’autres, cela va de la petite mise en valeur à la très forte.

Petite mise en valeur, l’emphase

Pour une mise en valeur légère du texte, on utilise la balise <em>. C’est une balise paire qui signifie emphase et qui a pour objectif de représenter le texte en italique.

exemple d'utilisation de la balise em en html

Très forte mise en valeur, balise <strong>

Pour une forte mise en valeur de votre texte, il faudra utiliser la balise <strong>. C’est également une balise paire, qui se traduit intuitivement par important (fort, puissant …) et qui a pour conséquence de mettre le texte en gras.

la balise html strong

La sémantique web HTML et le CSS

Aujourd’hui le web (world wide web) tant vers un web sémantique. Sémantique qui se traduit par définir le sens des mots. Comprenez qu’il y a des programmes pour naviguer sur le web, les navigateurs web (google chrome, safari, mozilla firefox …) , mais aussi des programmes qui permettent d’explorer et de stocker dans des serveurs les sites/pages web. Ces programmes sont des « robots » et sans eux vos navigateurs n’afficheraient rien.

En effet, ces robots passe leur temps sur le web à explorer (terme technique « crawler ») les nouveaux contenus, ou les mettre à jour, à les classer et les stocker dans des bases de données (terme technique « indexer »). En gros, c’est lors de cette indexation que les robots vont analyser, scanner, votre page web puis la ranger dans des base de données (serveurs). Ainsi, il sera que votre site web parle de la thématique, par exemple, « programmation » et que la page sur laquelle il se trouve traite du langage informatique « HTML & CSS ». C’est un peu comme une bibliothèque où l’on peut trouver différents rayons organisée par thèmes. Aussi, les Best-sellers sont bien visibles, les flops invendables sont dans un coin poussiéreux.

Tout ça pour vous dire que les moteurs de recherche se basent sur plusieurs critères pour bien placer votre site/page dans les résultats de recherche (Best-seller) et c’est pour cela qu’il ne faut pas confondre le HTML et le CSS. Les balises que nous venons de voir, <strong> et <em> sont des critères de pertinence pour classer votre site/page par les moteurs de recherche. C’est pour cela que le texte contenu dans les balises de mise en valeur doivent être pertinent autant pour le visiteur de la page que pour les moteurs de recherche.

Savoir quand il faut utiliser une balise <strong> ou <em>

Un exemple sur un extrait d’une page traitant sur les langages de programmation web coté serveur:

  • Dans un contexte de site web dynamique le langage PHP peut être utilisé coté serveur et fournir plusieurs fonctionnalités …

Ici, le « langage PHP » est mis en valeur car cela apporte un plus aux visiteurs (et aux robots) car on sait tout de suite que la page (sur les langages de programmation web coté serveur) va traiter du langage en question. Cela est bien sur à titre indicatif car ça dépend du contexte en général.

Un dernier exemple mais cette fois-ci avec la balise <em>. Un extrait d’une page web sur le thème de l’argent en bourse:

  • Sur l’insertion en bourse de la société X, le livre « Nom du livre », traite parfaitement de …

Petite mise en valeur sur « le nom d’un livre » qui traite du sujet en question. Mais si le thème de la page web concernait entièrement ce livre en question on aurait pu le mettre en gras avec la balise <strong>.

Je vais me répéter mais, le HTML définit le fond (structure, contenu) et le CSS la forme (apparence).

Vous devez impérativement vous poser la question:

L’action que je m’apprête à faire, et notamment la mise en valeur, est destinée à faire jolie ou à apporter un sens sémantique (une compréhension supplémentaire) ?

Si la réponse est « faire jolie », vous voulez alors modifier l’apparence et vous devez donc faire usage du langage CSS (que nous verrons très bientôt ne vous en faites pas), sinon dans l’autre cas vous pouvez utiliser les balises HTML correspondantes.

Dans cette dernière partie on est un peu rentré dans une nouvelle notion, le référencement (ou SEO Search Engine Optimization), qui nécessite à lui seul un voir même plusieurs Tutoriels. C’est un métier à part entière. Nous aborderons quelques notions de référencement quand cela est utile dans la suite de ce tutoriel sur l’apprentissage des langages HTML et CSS.

Maintenant que vous savez manier les bases HTML avec les titres, paragraphes, listes et mises en valeur, nous allons nous attaquer aux liens hypertextes.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Une réaction sur “Structurer le texte et le contenu de la page avec des balises HTML

  1. Josh says:

    Un article qui rappelle aux professionnels comment structurer efficacement les textes. Qu’il s’agit de la conception d’un site statique ou dynamique les règles en HTML et CSS resteront toujours les mêmes.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *