Aller au contenu

Le langage HTML/Style de texte

Ajouter des liens
Un livre de Wikilivres.
Titres et paragraphes Titres et paragraphes
Placement des objets Placement des objets

[ Modifier le sommaire ]

Titres et paragraphes Titres et paragraphes
Placement des objets Placement des objets

Le style du texte indique au navigateur la mise en forme à appliquer au texte selon l'élément.

Comme pour les titres, la manière dont le texte est mis en forme dépend des réglages du navigateur pour le style par défaut, et de la feuille de style (voir Le langage CSS).

Plutôt que de « style de texte », il vaudrait mieux parler d'« éléments de texte » (« éléments de phrase » et « de citation »), puisque les balises décrivent des portions de texte.

Éléments HTML de mise en forme

[modifier | modifier le wikicode]
Styles de texte les plus courants
Style Balise Mnémotechnique Rendu par défaut
mise en emphase <em>…</em> emphase italique
mise en emphase forte <strong>…</strong> « fort » gras
citation d'une référence <cite>…</cite> … italiques
citation courte dans le texte <q>…</q> quote (citation) entre guillemets
citation à part <blockquote>…</blockquote> « bloc de citation » marge à gauche plus grande
code source <code>…</code> … police à chasse fixe avec empattement (type Courier)
texte préformaté (par exemple pour aligner avec des espaces, ou faire des dessins ASCII) <pre>…</pre> preformatted (préformaté) police à chasse fixe, en général avec empattement (type Courrier)

La tendance est de préférer utiliser les balises[1] :

  • <i>…</i> par em.
  • <b>…</b> par strong.

En effet, cela revient à définir la description de texte plutôt que faire sa mise en forme, tâche plutôt dévolue au CSS.

Dans la pratique, si cela ne change pas grand chose pour un rendu graphique (sauf si la feuille de style ou le rendu du navigateur en décide autrement), et cela favorise l'accessibilité : s'il est possible pour un lecteur d'interpréter une mise en emphase (par exemple en changeant le ton de la voix), il est en revanche impossible de rendre une variation de mise en forme.

Exemple 

<p>Selon Boileau&nbsp;:</p>
<blockquote>
   Vingt fois sur le métier
   remettez votre ouvrage
</blockquote>
<p>bref, <em>ne vous découragez pas&nbsp;!</em>
   <strong>Soyez patient&nbsp;!</strong></p>

ce qui donne :

Selon Boileau :

Vingt fois sur le métier remettez votre ouvrage

bref, ne vous découragez pas ! Soyez patient !

Voici quelques autres styles de texte :

Autres styles de texte
Style Balise Mnémotechnique Rendu par défaut
saisie clavier <kbd>…</kbd> keyboard (clavier) idem <code>
abréviation <abbr>…</abbr> abbreviation souligné par un trait pointillé
acronyme <acronym>…</acronym> … idem abbr
Note
En français, un acronyme est lexicalisé, c'est-à-dire prononcé comme un mot (comme laser, ovni), alors que dans un sigle, les lettres sont prononcées séparément (SNCF). En anglais, langue de référence du HTML, la définition est plus floue : certains distinguent les termes initialism (sigle) et acronym (sigle lexicalisé, même sens qu'en français), alors que pour d'autres acronym désigne un sigle qu'il soit lexicalisé ou non (voir l'article du Wikipédia anglophone Acronym). Dans la pratique, il n'y a pas de différence dans le traitement de <abbr> et de <acronym>, cette dernière disparaît d'ailleurs du XHTML 2.

Même lorsqu'elles ne modifient pas la mise en forme, les balises abbr et acronym sont utiles pour les analyseurs syntaxiques (parsers) et les correcteurs d'orthographe. Elles sont surtout utiles avec le paramètre title (titre), qui permet d'expliciter l'abréviation ; en général, le titre s'affiche dans une info-bulle.

Exemple 

Les pages Web sont écrites en <acronym title="Hypertext Markup Language">HTML</acronym>.

donne (passez le curseur de la souris sur l'abréviation « HTML » ci-dessous) :

Les pages Web sont écrites en HTML

Paramètres

[modifier | modifier le wikicode]

Pour les balises de citation (<q> et <blockquote>), on peut préciser la source, avec le paramètre cite indiquant son URL.

Exemple
Selon le site Alsacréations,
<q cite="http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-un-div-et-un-calque">
  cet abus de langage
  est malheureusement demeuré très ancré
  et induit de nombreux amalgames.
</q>

Balises de mise en forme

[modifier | modifier le wikicode]

Avant le CSS, la modification de la police était déjà une préoccupation, le W3C a donc créé des balises permettant ces modifications — donc de la mise en forme — que l'on peut toujours trouver dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.

Logo

Les balises "center", "font", "strike" et "tt" sont dépréciées en HTML5, remplacées par "span style".

Autres styles de texte
Style Balise Mnémotechnique
affichage écran (idem code source) <tt>…</tt> teletype (terminal)
italique <i>…</i> italic
gras <b>…</b> bold (gras)
grandes lettres <big>…</big> (grand)
petites lettres <small>…</small> (petit)
texte barré <strike>…</strike> ou <s>…</s> (barré)
texte souligné <u>…</u> underligned (souligné)

On peut également modifier :

  • la taille de la police : <font size="taille">…</font>, ou taille est un nombre absolu en unité arbitraire (la taille normale est 3), ou un nombre relatif (+1 pour la taille courante augmentée de 1, -2 pour la taille courante diminuée de 2) ;
  • la nature de la police : <font face="nom de la police">…</font>.

On peut combiner les deux, par exemple <font size="12" face="Times New Roman">…</font>

Ces balises sont maintenant déconseillées. On peut utiliser em et strong pour l'italique et le gras, et le CSS pour le reste :

  • lettres plus grandes de 10 % : <span style="font-size:1.1em">…</span>
  • lettres plus petites de 10 % : <span style="font-size:0.9em">…</span>
  • souligner : <span style="text-decoration:underline">…</span>
  • barrer : <span style="text-decoration:linethrough">…</span>
  • type de police : <span style="font-family:"Times New Roman" ">…</span>

mais il vaut mieux définir des styles dans un fichier à part et faire appel à ces styles (ce qui simplifie la maintenance des fichiers), par exemple, mettre dans le fichier CSS : 

.grand {font-size:1.1em}
.petit {font-size:0.9em}
.souligner {text-decoration:underline}
.barrer {text-decoration:linethrough}

ce qui s'exploite dans le fichier HTML de la manière suivante : 

<p>
  Du texte en <span class="grand">grandes</span>
  ou <span class="petit">petites</span> lettres,
  <span class="souligner">souligné</span>
  ou <span class="barrer">barré</span>.
</p>


Pour plus de détails voir : Le langage CSS/Texte.

Équivalence de taille de caractères

[modifier | modifier le wikicode]

Les éléments <font>, <big> et <small> sont désuets, ce qui signifie qu'ils pourraient ne plus fonctionner sur les prochains navigateurs. Les tableaux ci-dessous donnent leur équivalent utilisant <span> et CSS.

Taille absolue, élément obsolète Taille relative, élément obsolète CSS font-size équivalent CSS font-size équivalent en points

<font size=0>

<font size=-3>

xx-small font-size: 7pt

<font size=1>

<font size=-2>

x-small font-size: 8pt

<font size=2>

<font size=-1>

small font-size: 10pt

<font size=3>

<font size=+0>

medium font-size: 12pt

<font size=4>

<font size=+1>

large font-size: 14pt

<font size=5>

<font size=+2>

x-large font-size: 18pt

<font size=6>

<font size=+3>

xx-large font-size: 24pt

<font size=7>

<font size=+4>

xxx-large font-size: 36pt


HTML à remplacer CSS équivalent

<small>Du texte de petite taille.</small>

<span style="font-size:85%;">Du texte de petite taille.</span>

<big>Du texte de grande taille.</big>

<span style="font-size:120%;">Du texte de grande taille.</span>

Références

[modifier | modifier le wikicode]
  1. ↑ https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html
Récupérée de « https://fr.wikibooks.org/w/index.php?title=Le_langage_HTML/Style_de_texte&oldid=724884 »