Comment mettre un texte en gras en HTML

Télécharger l'article
Télécharger l'article

En HTML, il est très facile de mettre du texte en gras, et il y a plusieurs balises à connaitre si vous cherchez des options supplémentaires. Encore mieux, vous pouvez prendre quelques minutes pour apprendre quelques notions de base de CSS et l'ajouter directement à votre document HTML. Cette méthode est plus rapide que d'ajouter une feuille de style CSS complète, et cela vous donnera plus de contrôle sur l’épaisseur exacte du texte affiché en gras.

Méthode 1
Méthode 1 sur 2:

Créer du texte en gras en HTML

Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    En HTML5, la norme privilégiée, la balise « strong » est la balise recommandée pour du texte important. Elle presque toujours affichée en gras dans les navigateurs.
    • Placez le texte que vous voulez mettre en gras entre ces balises: <strong> texte en gras ici </strong>.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Les « Titres » sont généralement placés en haut de la page web ou au début d'une nouvelle section. Habituellement, les titres sont affichés en gras et sont plus grands que la police ordinaire, mais cela peut varier. Il y a six balises de titre différentes, depuis <h1> à <h6>. Suivez ces directives lorsque vous les utiliserez:
    • La balise h1, écrite <h1> Votre titre ici </h1> est le titre le plus important, en général c’est le texte le plus grand en haut de la page.
    • <h2> La balise h2 </h2> est pour le second titre le plus important, et ainsi de suite jusqu'à <h6> h6, le plus petit </h6>.
    • Utilisez-les avec parcimonie, seulement pour organiser votre page  [1] . Les utilisateurs devraient être en mesure de parcourir rapidement les titres et de trouver le sujet qu'ils cherchent.
    • À l’heure de créer des sous-titres, descendez seulement d’un niveau à la fois. Autrement dit, ne sautez pas de <h1> à <h3>. Cela aide la page HTML à préserver son formatage lorsqu'elle est transférée à un autre format  [2] .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La balise <b> est toujours prise en charge en HTML5, mais <strong> est préféré dans la plupart des situations. Utilisez la balise <b> uniquement lorsque le texte devrait être en caractères gras pour des raisons de style, pas pour le mettre en valeur. Par exemple, des mots-clés ou des mots de vocabulaire dans un passage, ou les noms de produit dans une revue  [3] .
    • Comme avec la plupart des balises, <b> place le texte concerné entre une balise de début et une balise de fin </b>.
    Publicité
Méthode 2
Méthode 2 sur 2:

Créer du texte en gras avec du CSS en ligne

Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Le CSS est une façon plus puissante et plus cohérente de mettre en forme votre page web. Cela en fait le moyen idéal pour définir l’aspect de votre page, tandis que le HTML est conçu pour définir le sens de votre page. C’est tout à fait normal d’utiliser des balises HTML lorsque vous voulez mettre en valeur du texte important, mais le CSS vous donnera plus de contrôle sur l'aspect visuel de votre texte en gras.
    • Essayez d'ouvrir une simple page HTML avec différents navigateurs, et vous verrez peut-être des différences dans l'affichage. Le CSS indique au navigateur la façon exacte d’afficher le texte concerné par une balise donnée, afin de minimiser la quantité de variation.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vous ne connaissez pas encore le CSS, utiliser du « CSS en ligne » est une bonne façon de débuter. Alors que vous pouvez l'utiliser pour modifier des balises telles que <p> ou <h1>, parfois vous voudrez modifier du texte qui ne se trouve pas déjà entre des balises  [4] . Dans ce cas, placez le texte entre des balises <span></span>. Elles n’auront aucun effet par elles-mêmes, mais cela nous donnera quelque chose avec quoi travailler. Voici l'exemple que nous allons utiliser:
    • <span>J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Les attributs en HTML sont écrits directement dans la balise, à l'intérieur des crochets < >. L'attribut « style » est nécessaire pour insérer du CSS dans la balise HTML, donc nous allons insérer style= dans la balise « span »:
    • <span style=> J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
    • Il n'y a pas de raison d'ajouter l'attribut « style » sans préciser le style. Nous allons juste étape par étape pour que cela soit plus facile à suivre.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Les propriétés CSS sont ajoutées dans le cadre de l'attribut « style ». Dans notre cas, nous allons utiliser la propriété « font-weight », qui détermine l’épaisseur de la police. Cette propriété unique peut être utilisée pour afficher du texte en gras (extraépais), du texte mince ou même pour indiquer que le texte devrait être affiché avec une épaisseur normale. Ajoutez "font-weight:" après le signe « = », comme ceci.
    • <span style="font-weight: "> J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
    • Encore une fois, ce n'est pas fini et cela n’aura aucun effet.
    • N'oubliez pas les guillemets avant et après font-weight: .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La seule chose que nous devons faire maintenant est ajouter une valeur pour « font-weight », entre font-weight: et le guillemet final. Il y a de nombreuses options différentes pour les différentes tailles d’ « épaisseur », mais la valeur bold est la plus facile à utiliser  [5] .
    • <span style="font-weight:bold"> J'ai appris comment mettre ce texte en gras avec du CSS en ligne. </span>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Le CSS vous donne beaucoup plus d'options que le HTML, vous ne vous sentirez donc pas limité. Voici plusieurs solutions de rechange pour la valeur « bold  [6]  ».
    • <span style="font-weight:bolder"> Le texte « bolder » sera toujours plus épais que l’élément parent. </span> Par exemple, si vous mettez tout un paragraphe en « bold », puis que vous utilisez « bolder » sur une seule phrase à l'intérieur de ce paragraphe, elle sera encore plus épaisse.
    • <span style="font-weight:normal"> Le texte « normal » sera affiché normalement même si le « span » est à l’intérieur d’une balise « bold ». </span>
    • <span style="font-weight:900"> Vous pouvez utiliser à la place un nombre entre 100 et 900 pour définir l'épaisseur. 400 est un texte normal, tandis que du texte en gras utilise une épaisseur de 700 par défaut. </span> [7]
    Publicité

Conseils

  • À l’heure d’utiliser la propriété « font-weight » en CSS, utilisez uniquement des valeurs numériques qui sont des multiples de 100. Les valeurs qui se situent entre les deux seront arrondies  [8] .
  • Une feuille de style CSS embarquée ou externe est encore un meilleur moyen pour mettre du texte en gras, puisqu'elle vous permet de modifier et de changer facilement l'intégralité d'un document en une seule fois.
  • Chaque police a seulement certaines « font-weights » disponibles. Avec du CSS, la « font-weight » disponible la plus proche à la quantité spécifiée sera utilisée. Cela signifie que vous ne verrez pas toujours de différence entre deux polices plus épaisses que la normale.
Publicité

wikiHows en relation

Comment
accéder au BIOS
Comment
faire une capture d'écran sur un ordinateur HP
Comment
casser le mot de passe d'un BIOS
Comment
installer un système d'exploitation sur un nouvel ordinateur
Comment
ouvrir des ports
Comment
créer et supprimer des dossiers et fichiers sous Windows avec l'invite de commandes
Comment
deviner un mot de passe
Comment
formater une clé USB si Windows n’y arrive pas
Comment
augmenter la mémoire vidéo dédiée sur les portables Windows avec Intel Graphics
Comment
compresser de gros fichiers
Comment
accéder au BIOS d'un ordinateur portable Lenovo
Comment
ouvrir des fichiers DLL
Publicité

Références

  1. ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
  2. ↑ http://www.hobo-web.co.uk/headers/
  3. ↑ http://www.quackit.com/html/codes/bold/
  4. ↑ http://reference.sitepoint.com/html/core-attributes/style
  5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  6. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  7. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

À propos de ce wikiHow

Autres langues 
Cette page a été consultée 98 466 fois.

Cet article vous a-t-il été utile ?

Publicité