Les effets de texte HTML étaient extrêmement populaires au début du Web et étaient souvent surutilisés. Cependant, ils sont progressivement devenus un élément essentiel des feuilles de style en cascade à mesure que le Web est devenu 2.0.

Premiers effets de texte HTML

Alors que le langage de balisage hypertexte est issu du monde de la publication imprimée statique, la possibilité d’avoir des animations et des couleurs dynamiques sur les écrans d’ordinateur était très excitante pour les premiers concepteurs de sites Web. Malheureusement, certains sont allés un peu trop loin, en utilisant les balises d’en-tête

et au point où la lecture d’une page Web pourrait littéralement vous donner un mal de tête. Pire encore, la terrible balise , qui donnerait l’effet d’une enseigne au néon dans une vitrine. Il est presque universellement admis que la balise ne doit plus être utilisée nulle part.

Autres effets de texte HTML inclus:

• StrikeThrough : Cela produit du texte traversé par une ligne, comme s’il avait été barré tout en restant lisible.
• Sous- et SuperScript: En utilisant les balises évidentes de _{et ^{, vous pouvez créer des annotations et des notes de bas de page sur votre texte Web.}}
• Souligner : Ce n’est plus autant utilisé dans le texte car le texte souligné implique généralement un hyperlien.
• Code et dactylographie: Ces effets de texte étaient utilisés pour désigner du texte cité ou destiné à être copié. Bien qu’il soit encore parfois utilisé dans des exemples codés tels que javascript, la plupart des gens séparent le texte en utilisant soit

  ou simplement une règle CSS.

Les propriétés

L’un des aspects intéressants de tout effet de texte est que beaucoup de contrôle peut être exercé en utilisant la balise avec une propriété, telle que la famille (groupements serif ou sans-serif), le style, la taille, la couleur et la page alignement (« align = left », par exemple). Cependant, il est considéré comme une mauvaise forme dans le codage actuel d’utiliser ces propriétés dans le corps de votre document. Presque toutes les propriétés de police sont utilisées dans la du document où les styles sont définis, ou bien dans un document .CSS complètement séparé. Cela signifie qu’il est utile de bien connaître la balise , même si vous ne l’utilisez pas comme prévu à l’origine.

Les quatre principaux effets de texte

Il existe quatre types de balises pour contrôler l’apparence du texte qui sont restées très utiles, bien qu’elles aient également changé au fil des ans pour refléter un style plus sémantique du HTML.

1. Paragraphe: Il est encore plus essentiel de pouvoir délimiter des paragraphes en ligne qu’en version imprimée, car le texte à l’écran est plus dur pour les yeux. La plupart des paragraphes en ligne sont séparés par des espaces, mais les feuilles de style en cascade peuvent changer cela à volonté

2. Italique: À l’origine, il s’agissait d’un texte incliné, mais certains concepteurs préféraient utiliser d’autres méthodes pour mettre l’accent, et la balise est donc de plus en plus utilisée pour le même effet.
3. Gras: Tout comme , alors que les gens veulent avoir du texte mis à part, ce n’est pas toujours en gras. La balise sémantique de cet effet est .
4. En-tête: Ceci est utilisé pour les titres, sous-titres et autres en-têtes qui aident à décrire un document. Le « H » est toujours suivi d’un nombre, généralement de 1 à 5.

Ces quatre balises sont toujours utilisées très souvent en conjonction avec les feuilles de style en cascade, qui peuvent être utilisées pour presque tous les effets de texte que vous aimez. Un CSS Zen Garden a des milliers d’exemples de la façon dont le même code peut donner des effets radicalement différents, ou vous pouvez vous rendre sur des sites tels que Web Designer Wall pour d’autres excellents exemples CSS, y compris du texte dégradé.

Effets de texte Javascript

Une autre façon d’obtenir des effets HTML maximisés consiste à incorporer du javascript à votre code. La bibliothèque Javascript sur Internet.com contient de nombreux didacticiels et exemples de codes pour des effets tels que le défilement du texte, les alertes contextuelles et même le texte 3D Twisting. Cependant, de nombreux navigateurs ont désactivé javascript, et il n’y a donc aucune garantie que les effets apparaîtront comme vous le souhaitez.

Cela vaut malheureusement aussi pour les effets de texte HTML simples. Différents navigateurs affichent même le CSS de différentes manières, et vous devez toujours vérifier sur plusieurs écrans avant d’utiliser un effet de texte de manière intensive sur votre site. Rappelez-vous toujours que le but d’une page est de livrer votre message et utilisez la conception du texte pour l’améliorer.

Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !