Afficher du texte adapté
Nous avons vu la balise <p> pour afficher un paragraphe, mais il existe de nombreuses autres balises de contenus textuels qui vont permettre de différencier certains types de contenu et les afficher de façon adaptée.
Tu peux répéter ?Bon je vais prendre un exemple, ça sera plus simple.
Texte préformaté
La première est pour afficher un texte préformaté, c'est la balise <pre>
Tu entends quoi par préformaté ?Hé bien si tu affiches un texte dans du HTML, le texte va être formaté selon la façon dont le navigateur formate du texte. Par exemple :
J'ai beau avoir passé des lignes entre chaque fin de phrase, tu vois bien que tout le texte s'affiche en un seul bloc.
Par contre si j'utilise la balise <pre>, le navigateur va respecter la mise en forme d'origine du texte :
Cette fois, les passages à la ligne sont bien conservés, c'est donc une balise textuelle, qui permet de différencier ce texte par rapport au reste de la page, et qui va l'afficher différemment.
Ok je comprends, il y a d'autres balises textuelles ?Exposants et indices
Il y a deux balises qui permettent de mettre un texte en exposant avec <sup> et en indice avec <sub>, c'est très pratique pour faire des notations mathématiques, mais aussi dans certains textes.
Je ne pense pas m'en servir tous les jours, mais c'est bon à savoir !Mise en valeur et petits caractères
Il existe aussi deux autres balises de texte, l'une pour mettre un texte en valeur avec <strong> et l'autre pour écrire en petit caractère avec <small>
Les citations
Il y a trois balises pour faire des citations, chacune a un contexte d'utilisation très spécifique.
Il y a trois façon différentes de faire des citations ?En HTML oui, pour commencer a balise <q> permet de faire une citation courte sur une seule ligne.
Et on peut ajouter un attribut cite à cet élément pour ajouter un lien vers une ressource dont est tiré cette citation :
Pour une citation plus longue, sur plusieurs lignes, on peut utiliser la balise <blockquote>
On sort un peu du cadre d'aillleurs, car <blockquote> est un conteneur en bloc et non pas un contenu textuel, mais je préférais te parler des deux en même temps.
Et tu m'avais dit qu'il y en avait trois ?Effectivement, et le troisième est un peu particulier, il s'agit de la balise <cite>
Balise ? Mais tu m'as dit que cite était un attribut !En effet, mais il y a deux façons de citer la source d'une citation, soit en utilisant l'attribut cite, auquel cas la référence existe et peut être lue par les moteurs de recherche, mais n'est pas affichée pour l'utilisateur, soit en utilisant la balise <cite>, qui va afficher cette référence, et on peut même y mettre un lien pour rediriger l'utilisateur vers cette référence.
Il y a tout de même un problème dans ce cas, la balise <cite> se trouve après la balise <blockquote>, donc l'affichage est parfait pour l'utilisateur qui comprend qu'il s'agit de la référence de la citation, par contre les moteurs de recherche ne peuvent plus associer les deux.
Effectivement ce n'est pas très pratique.Dans ce cas là, on peut utiliser un conteneur dont je ne t'avais pas encore parlé <figure>. Il sert à englober un ensemble d'informations qui vont être comprises comme un seul élément. On peut d'ailleurs utiliser une balise particulière dedans, qui est la balise <figcaption> et qui permet de définir une légende à l'élément contenu dans <figure>
Ainsi la citation et la référence sont bien associés.
Parfait je comprends. Mais donc la balise <figure> est pour ainsi dire un conteneur de citation ?Pas vraiment, elle sert à englober plusieurs parties pour former un élément. On l'utilise beaucoup aussi avec les images, pour ajouter une légende en dessous d'une image affichée et former un seul élément avec l'ensemble.
Ok j'ai compris. J'ai terminé cette partie