Formatage du texte en HTML

Formater du texte avec HTML

HTML fournit plusieurs balises que vous pouvez utiliser pour faire apparaître du texte sur vos pages Web différemment du texte normal, par exemple, vous pouvez utiliser la balise <b> pour mettre le texte en gras, la balise <i> pour mettre le texte en italique, la balise <mark> pour mettre le texte en surbrillance, balise <code> pour afficher un fragment de code informatique, des balises <ins> et <del> pour marquer les insertions et suppressions éditoriales, et plus encore.

L'exemple suivant illustre les balises de formatage les plus couramment utilisées en action. Maintenant, essayons ceci pour comprendre le fonctionnement de ces balises :

<p>Ceci est un <b>Texte en gras</b>.</p>

<p>Ceci est un <strong>texte très important</strong>.</p>

<p>Ceci est un <i>texte en italique</i>.</p>

<p>Ceci est un <em>texte mis en accent</em>.</p>

<p>Ceci est un <mark>texte en surbrillance </mark>.</p>

<p>Ceci est un <code>code source</code>.</p>

<p>Ceci est un <small>petit texte</small>.</p>

<p>Ceci est un text en <sub>souscrit</sub> et <sup>exposant</sup>.</p>

<p>Ceci est un <del>texte supprimé</del>.</p>

<p>Ceci est un <ins>texte inséré</ins>.</p>

Par défaut, la balise <strong> est généralement rendue dans le navigateur sous la forme <b>, tandis que la balise <em> est rendue sous la forme <i>. Cependant, il existe une différence dans la signification de ces balises. 

Différence entre les balises <strong> et <b>

Les balises <strong> et <b> affichent par défaut le texte inclus en caractères gras, mais la balise <strong> indique que son contenu a une grande importance, alors que la balise <b> est simplement utilisée pour attirer l'attention du lecteur sans transmettre d'importance particulière.

<p><strong>ATTENTION!</strong> procéder avec prudence.</p>

<p>Le rendez-vous aura lieu à <b>Pullman</b> à Kinshasa.</p>

Différence entre les balises <em> et <i>

De même, les balises <em> et <i> rendent le texte inclus en italique par défaut, mais la balise <em> indique que son contenu a mis l'accent sur le texte environnant, alors que la balise <i> est utilisée pour marquer le texte qui est mis en valeur par rapport au texte normal pour des raisons de lisibilité , comme un terme technique, une expression idiomatique d'une autre langue, une pensée, etc.

<p>Les <em>Macbook</em> sont des meilleurs ordinateurs.</p>

<p>La <i>Voiture</i> à été vendu hier</p>

Remarque : Utilisez les balises <em> et <strong> lorsque le contenu de votre page nécessite que certains mots ou expressions soient fortement mis en valeur ou importants. ils jouent aussi grand rôle dans le référencement naturel (SEO) de votre site dans les moteurs de recherche. De plus, dans HTML5, les balises <b> et <i> ont été redéfinies, auparavant elles n'avaient pas de signification sémantique.

Mise en forme des citations

Vous pouvez facilement formater les blocs de citation d'autres sources avec la balise <blockquote> de HTML.

Les blocs de citations sont généralement affichés avec des marges gauche et droite en retrait, ainsi qu'un peu d'espace supplémentaire ajouté au-dessus et au-dessous. Essayons un exemple pour voir comment cela fonctionne :

<blockquote>

    <p>Apprendre d'hier, vivre aujourd'hui, espérer pour demain. L'important est de ne pas s'arrêter de se questionner.</p>

    <cite>— Albert Einstein</cite>

</blockquote>

La balise cite est utilisée pour décrire une référence à une œuvre créative. Il doit inclure le titre de cette œuvre ou le nom de l'auteur (personne ou organisation) ou une référence URL.

Pour les courtes citations en ligne, vous pouvez utiliser la balise <q>. La plupart des navigateurs affichent les guillemets en ligne en entourant le texte de guillemets. Voici un exemple :

<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>

Affichage des abréviations

Une abréviation est une forme abrégée d'un mot, d'une phrase ou d'un nom.

Vous pouvez utiliser la balise <abbr> pour désigner une abréviation. L'attribut title est utilisé à l'intérieur de cette balise pour fournir le développement complet de l'abréviation, qui est affichée par les navigateurs sous forme d'info-bulle lorsque le curseur de la souris survole l'élément. Essayons un exemple :

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr> est la principale organisation internationale de normalisation pour le <abbr title="World Wide Web">WWW or W3</abbr>. Il a été fondé par Tim Berners-Lee.</p>

Marquage des adresses de contact

Les pages Web incluent souvent des adresses postales ou de rue. HTML fournit une balise spéciale <address> pour représenter les informations de contact (physiques et/ou numériques) d'une personne, d'un peuple ou d'une organisation.

Cette balise devrait idéalement être utilisée pour afficher les informations de contact liées au document lui-même, telles que l'auteur de l'article. La plupart des navigateurs affichent un bloc d'adresse en italique. Voici un exemple :

<address>

Letecode Academy<br>
43. Avenue Tombalbay<br>
Kinshasa/Gombe, RDC

</address>