Maison >interface Web >tutoriel HTML >Balises de formatage du texte HTML

Balises de formatage du texte HTML

王林
王林original
2024-09-04 16:16:32921parcourir

Le formatage du texte est une partie importante des pages Web Internet modernes ; même lorsque nous étions limités à des navigateurs Web basés sur du texte, le formatage du texte, tel que la taille, l'orientation, etc., était disponible. Avec les révisions HTML modernes, il existe une tonne de balises HTML qui peuvent être utilisées pour donner l'apparence du texte à votre goût.

Formatage du texte avec des balises HTML

Ci-dessous, nous aborderons quelques balises HTML importantes utilisées pour formater le texte :

1. Formatage du texte en gras dans un HTML

HTML a deux balises différentes pour mettre le texte en gras. L'un est et l'autre est alors que les deux produisent un résultat similaire. Le La balise est une balise physique, uniquement pour afficher le texte en gras, et elle n'ajoute aucune valeur importante dans le navigateur.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<p> <b>Here is some text in bold. </b></p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

Le La balise, en revanche, est considérée comme une balise logique et est utilisée pour informer le navigateur que le texte de la balise a une certaine importance logique.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<p> <strong>This is an important content formatted using the strong tag </strong>, and this is just
normally formatted text</p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

2. Définir le texte en italique en HTML5

Tout comme définir le texte en gras, vous pouvez utiliser balise et balise pour définir le texte en italique sur HTML5.

En utilisant est destiné, tout comme l'utilisation de , à l'affichage physique du texte en italique et à la balise tout en affichant également le texte en italique à l'écran, permet au navigateur de savoir qu'il a une importance sémantique.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<p> <i> This is the first para in italic text. </i></p>
<p> <em> This content is made italics with the em tag</em>, This is normal text </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

3. Surligner du texte avec du code HTML

Dans les situations où vous souhaitez surligner du texte avec un effet de surligneur, la balise peut être utilisé; avec le CSS par défaut, la balise rend l'arrière-plan du texte jaune, vous aidant ainsi à attirer facilement l'attention d'un visiteur sur ce texte.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

4. Souligner du texte en HTML

La balise HTML peut être utilisé pour ajouter un soulignement dans le texte. Veillez à ne pas utiliser le soulignement avec du texte bleu, car cela pourrait donner l'impression aux visiteurs que le texte est un lien.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<p> <u> This is Text with underline tag. </u> </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

5. Texte barré

Dans les cas où vous devez tracer une ligne horizontale à travers le texte, balisez peut être utilisé. La ligne noyée est fine, de sorte que le texte qu'elle traverse peut toujours être lu facilement.

 Exemple 

Code :

<!DOCTYPE>
<html>
<body>
<p> <strike> Here is a sentence with strike through text </strike>. </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

6. Écrire en police Monospace en HTML

L'utilisation de Monospace peut être utile dans les situations où vous souhaitez citer quelque chose ou afficher du code dans le navigateur. Le code Monospace, comme son nom l'indique, rend la largeur de chaque caractère identique. Pour l'obtenir sur un navigateur, nous devons utiliser le bouton étiquette.

 Exemple

Code :

<!DOCTYPE>lt;html>
<body>
<p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

7. Texte en indice en HTML

En mathématiques et en chimie, l'utilisation de l'indice est une exigence absolue à plusieurs reprises. Dans la rédaction générale également, vous pouvez rencontrer des situations dans lesquelles un texte en indice peut être utilisé. En HTML, tout texte sous le la balise fonctionnera comme un indice dans le navigateur.

Exemple

Code :

<!DOCTYPE>
<html>
<body>
<p> This is normal text <sub>Notice something different with this text? </sub> </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

8. Texte supprimé en HTML5

La balise est utilisée comme un moyen logique d'indiquer au navigateur que le texte à l'intérieur du texte est supprimé. Gardez à l'esprit que pour un utilisateur, le texte affiché est le même que la balise barrée, ce qui signifie qu'il est affiché au format barré.

 Exemple 

Code :

<!DOCTYPE>
<html>
<body>
<p> This is normal text <del> This is text between del tag. </del> </p>
</body>
</html>

Sortie :

Balises de formatage du texte HTML

9. Superscript Text formatting in HTML5

Text in tag is shown in superscript. This is useful in math, chemistry and other places where math is involved. You can use the tag when citing with adding in-page links with too.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text<sup> This text is in superscript. </sup> </p>
</body>
</html>

Output:

Balises de formatage du texte HTML

10. Making Text size larger with HTML formatting

In cases where you need some text in a larger size on the screen, but you don’t want to use a heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text <big> This text in in larger size. </big> </p>
</body>
</html>

Output:

Balises de formatage du texte HTML

11. Making Text smaller with HTML

Like the tag , you can use to make text smaller on the screen without using CSS or headings.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text <small> the size of this text is smaller </small> </p>
</body>
</html>

Output:

Balises de formatage du texte HTML

Conclusion

Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size is important too, too small, and the readably will be affected negatively, and if it is too large, there will be less information on the screen at once.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Feuilles de style HTMLArticle suivant:Feuilles de style HTML