HTML a beaucoup de balises que de nombreuses personnes utilisent chaque jour, comme <div>, <p>, et <a>. Mais il y a aussi quelques perles cachées qui passent souvent inaperçues. Ces balises peuvent aider à rendre les sites Web plus engageants, accessibles et significatifs sans trop d’effort supplémentaire.
Dans cet article, nous allons discuter d’un groupe d’éléments HTML uniques qui peuvent améliorer vos pages Web. Ils offrent des fonctions spécifiques pour le formatage du texte, l’amélioration de la lisibilité et l’ajout de fonctionnalités interactives.
Table des Matières
La balise <q> : Citations courtes en ligne
La balise <q> est utilisée pour ajouter de courtes citations à l’intérieur d’un paragraphe. Elle permet de faire ressortir les citations et de les rendre plus faciles à repérer, sans interrompre le flot du texte. Cette balise ajoute automatiquement des guillemets autour du contenu.
Description et syntaxe
La structure de base de la balise <q> est simple :
<p>She said, <q>This is amazing!</q></p>
Cela s’afficherait comme :
Elle a dit : « C’est incroyable ! »
Comment cela diffère de l’élément <blockquote>
La balise <q> est pour les courtes citations à l’intérieur d’une phrase. En revanche, l’élément <blockquote> est utilisé pour des citations plus longues qui nécessitent généralement leur propre espace ou paragraphe.
Par exemple :
<blockquote>
"This is a long quote that needs its own space. It is different from a short quote."
</blockquote>
Ce bloc apparaîtra avec un retrait et est destiné à mettre en valeur un plus gros morceau de texte cité.
Cas d’utilisation : Ajouter des citations dans les paragraphes
La balise <q> est parfaite pour les cas où vous devez mentionner une citation dans une phrase sans trop la séparer. Par exemple, lorsque vous citez quelqu’un dans un article ou un billet de blog :
<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>
Dans ce cas, la balise <q> garde la citation courte et à l’intérieur du même paragraphe.
Le professeur a dit, La pratique rend parfait
, pendant le cours.
Compatibilité des navigateurs et conseils de style
La plupart des navigateurs modernes ajoutent automatiquement des guillemets au contenu à l’intérieur d’une balise <q>. Mais vous pouvez changer son apparence à l’aide de CSS si nécessaire. Voici comment vous pouvez le styliser :
q {
quotes: "«" "»";
font-style: italic;
}
Ce code changera les guillemets en marques de style français (« et ») et mettra la citation en italique.
La plupart des navigateurs prennent en charge la balise <q>, donc vous n’avez pas à vous soucier des problèmes de compatibilité pour les utilisateurs modernes. Mais les navigateurs plus anciens peuvent nécessiter des soins supplémentaires, alors testez toujours si votre public utilise des versions plus anciennes.
La balise <s> : Texte barré
La balise <s> est utilisée pour montrer un texte qui n’est plus correct, pertinent ou qui a été supprimé. Elle met une ligne au milieu du texte, que nous appelons un « barré ». Cette balise est souvent utilisée pour indiquer quelque chose qui a été modifié ou mis à jour.
Explication et utilisation
La balise <s> est simple à utiliser. Enveloppez-la autour du texte que vous souhaitez barrer :
<p>This product was <s>$50</s> now only $30!</p>
Cela s’affichera comme :
Ce produit coûtait 50 $ maintenant seulement 30 $ !
Cas d’utilisation courants : Indiquer un contenu supprimé ou non pertinent
La balise <s> est idéale pour montrer les changements de prix, les modifications ou le contenu qui n’est plus valide. Par exemple :
Mises à jour de prix:
<p><s>$75</s> $50 (Limited Offer!)</p>
75 $ 50 $ (Offre Limitée !)
Corrections ou changements:
<p><s>Old website address</s> New website address</p>
Ancienne adresse du site web Nouvelle adresse du site web
Contenu qui n’est plus pertinent:
<p>This feature is <s>no longer available</s>.</p>
Cette fonctionnalité n’est plus disponible.
Possibilités de style avec CSS
Vous pouvez personnaliser l’apparence du texte barré en utilisant CSS. Par exemple, vous pouvez changer la couleur de la ligne ou du texte :
s {
text-decoration: line-through;
color: red;
}
Dans ce cas, le texte aura une ligne rouge le traversant, soulignant davantage le fait qu’il a été barré.
Signification sémantique versus décoration visuelle
La balise <s> a une certaine signification sémantique. Elle représente généralement un contenu qui était autrefois valide mais qui est maintenant incorrect ou obsolète. Ce n’est pas qu’un simple changement de style. Par exemple, elle est parfaite pour montrer des changements dans des documents juridiques, des corrections dans des articles de blog ou des mises à jour de prix.
D’autre part, si vous utilisez le barré uniquement pour une décoration visuelle sans signifier que le texte est incorrect, il est préférable d’utiliser CSS directement, comme ceci :
span.strike {
text-decoration: line-through;
}
Et ensuite de l’appliquer dans votre HTML :
<p>This text is <span class="strike">crossed out</span> just for fun!</p>
Cette approche est purement stylistique et n’a pas la même signification que la balise <s>.
La balise <mark> : Texte surligné
La balise <mark> est utilisée pour mettre en évidence du texte. Elle aide à attirer l’attention sur certaines parties de votre contenu, les faisant ressortir. Par défaut, les navigateurs mettent en surbrillance le texte avec un fond jaune lorsque la balise <mark> est utilisée.
Objectif de la balise <mark>
La balise <mark> est idéale lorsque vous souhaitez souligner quelque chose d’important. Elle est souvent utilisée pour montrer les résultats de recherche, les modifications récentes ou tout texte nécessitant une attention particulière.
Voici un exemple de son fonctionnement :
<p>This is a <mark>highlighted</mark> word.</p>
Cela s’affichera comme suit :
Ceci est un texte en surbrillance important.
Meilleures pratiques pour utiliser <mark> pour l’emphase ou les résultats de recherche
Mise en évidence des termes clés : Si vous souhaitez souligner des mots ou des phrases importants dans un article ou un billet de blog, la balise <mark> est un moyen simple de le faire :
<p>The most important concept here is <mark>efficiency</mark>.</p>
Le concept le plus important ici est l’efficacité.
Résultats de recherche : Lors de l’affichage des résultats de recherche sur une page web, l’utilisation de la balise <mark> pour mettre en évidence les termes correspondants facilite la recherche pour les utilisateurs :
<p>Your search for <mark>HTML</mark> found these results:</p>
Votre recherche sur HTML a trouvé ces résultats :
Mises à jour récentes : Vous pouvez également utiliser la balise <mark> pour montrer de nouvelles mises à jour ou modifications dans votre contenu :
<p>We have recently added the <mark>new feature</mark> to the app.</p>
Nous avons récemment ajouté la nouvelle fonctionnalité à l’application.
Comment styliser efficacement le texte en surbrillance
Bien que la couleur par défaut pour <mark> soit jaune, vous pouvez la changer avec CSS pour correspondre au design de votre site web. Voici un exemple de la façon de personnaliser le texte surligné :
mark {
background-color: lightblue;
color: black;
padding: 2px;
}
Cela donnera au texte un fond bleu clair avec du texte noir.
Si vous voulez que le texte se démarque encore plus, vous pouvez ajouter une bordure ou changer le style de police :
mark {
background-color: yellow;
color: black;
font-weight: bold;
border-radius: 4px;
}
Cela rendrait le texte surligné plus poli et notable.
Support des navigateurs et considérations d’accessibilité
La balise <mark> est prise en charge par tous les navigateurs modernes, vous ne rencontrerez donc aucun problème de compatibilité. Veillez simplement à ce que la couleur de fond que vous choisissez offre suffisamment de contraste pour la lisibilité, en particulier pour les utilisateurs ayant des déficiences visuelles.
Utiliser un fond clair avec un texte sombre est une bonne règle de base. Tester le contraste des couleurs garantit que le contenu surligné reste accessible à tous, y compris ceux qui utilisent des lecteurs d’écran.
La balise <ruby> : Annotation du texte en langues est-asiatiques
La balise <ruby> est utilisée pour ajouter de petites annotations au texte, souvent vues dans les langues est-asiatiques comme le japonais ou le chinois. Ces annotations aident les lecteurs avec la prononciation ou le sens, surtout lorsque les caractères sont complexes ou peu familiers.
Définition et cas d’utilisation pour <ruby>
Dans des langues comme le japonais, il est courant d’utiliser un petit guide au-dessus ou à côté des caractères pour montrer comment ils doivent être prononcés. La balise <ruby> associe le texte principal à une petite annotation, généralement dans un script plus simple.
Voici un exemple de base :
<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>
Cela montre les caractères kanji japonais 漢字 avec leur prononciation (furigana) affichée au-dessus ou à côté d’eux comme かんじ (kanji).
漢 字
L’importance des sous-éléments <rp> et <rt>
L’élément <rt> est utilisé à l’intérieur de la balise <ruby> pour définir l’annotation (comme la prononciation) pour le texte principal. Cela signifie « texte ruby ».
<ruby>漢 <rt>かん</rt></ruby>
Cela affichera 漢 avec かん (kan) au-dessus comme annotation.
漢
L’élément <rp>, abréviation de « parenthèse ruby », est utilisé comme solution de secours pour les navigateurs qui ne prennent pas en charge la balise <ruby>. Il entoure des caractères supplémentaires, comme des parenthèses, autour du texte ruby pour montrer qu’il s’agit d’une annotation :
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>
Si le navigateur ne prend pas en charge les annotations ruby, il affichera la prononciation entre parenthèses, comme ceci :
漢 (かん).
Exemples pratiques : annotations ruby pour l’apprentissage des langues
La balise <ruby> est un outil utile pour les apprenants en langues. Elle peut afficher la prononciation pour des mots ou des caractères inconnus directement au-dessus ou à côté d’eux. Cela facilite la lecture et l’apprentissage de nouveaux vocabulaire pour les débutants.
Par exemple, disons que vous voulez aider quelqu’un à apprendre le mot chinois pour « personne » :
<ruby>人 <rt>rén</rt></ruby>
Cela montrerait 人 avec la prononciation rén au-dessus.
人
Pour des phrases plus longues :
<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>
Cela aide les étudiants à voir à la fois les caractères et la prononciation correcte.
Je suis étudiant .
Considérations sur la compatibilité entre navigateurs et le rendu
La balise <ruby> est prise en charge par la plupart des navigateurs modernes, mais les anciens pourraient ne pas l’afficher correctement. C’est là que l’élément <rp> devient utile, garantissant que les annotations restent lisibles si le navigateur ne prend pas en charge le texte ruby.
Pour l’accessibilité, assurez-vous que les annotations disposent de suffisamment d’espace autour d’elles pour être facilement lisibles. Vous pouvez également utiliser CSS pour ajuster l’apparence des annotations :
ruby rt {
font-size: 0.75em;
color: gray;
}
Cela rendra le texte ruby plus petit et d’une couleur différente pour le séparer visuellement du contenu principal.
L’utilisation de <ruby> est un excellent moyen d’améliorer la lisibilité pour les apprenants en langue ou les lecteurs peu familiers avec certains scripts. N’oubliez pas de vérifier la prise en charge des navigateurs et d’ajouter des solutions de repli pour une meilleure expérience utilisateur sur différents appareils.
La balise <time> : Temps et date sémantiques
La balise <time> est utilisée pour marquer les dates ou les heures dans un format lisible par machine. Elle aide les moteurs de recherche, les navigateurs et d’autres outils à reconnaître plus clairement les informations liées au temps, ce qui est utile pour améliorer la visibilité dans les résultats de recherche ou pour un meilleur traitement des données.
Utilisation de la balise <time> pour les dates et heures lisibles par machine
Lorsque vous utilisez la balise <time>, cela vous permet de fournir des dates ou des heures faciles à lire pour les personnes comme pour les ordinateurs. Cela est particulièrement utile sur les blogs, les articles d’actualité ou les pages d’événements.
Voici un exemple :
<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>
Le texte « 1er octobre 2024 » est ce que les utilisateurs verront, mais l’attribut datetime fournit une version lisible par machine de la date. Les moteurs de recherche peuvent maintenant interpréter facilement cette date.
Publié le
Vous pouvez également utiliser la balise <time> pour afficher des heures :
<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>
Cela clarifie à la fois pour les utilisateurs et les machines quand l’événement a lieu.
L’événement commence à .
Comment <time> Améliore le SEO et l’Analyse des Données pour les Détails d’Événements
Les moteurs de recherche s’appuient sur des données structurées pour mieux comprendre le contenu. La balise <time> leur donne une idée plus claire de quand des événements, publications ou délais se produisent, améliorant ainsi la pertinence des résultats de recherche. Par exemple, les moteurs de recherche peuvent mieux afficher la date de publication d’un article de blog ou l’heure d’un événement.
Pour une page d’événement, l’exemple suivant fournit à la fois des informations temporelles conviviales pour les humains et pour les machines :
<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>
Les moteurs de recherche et les robots d’exploration web peuvent alors extraire ces données et les utiliser pour créer des extraits enrichis dans les résultats de recherche, aidant l’événement à se faire remarquer.
Exemples d’Utilisation dans des Articles, Blogs et Pages d’Événements
Voici quelques exemples pratiques de la façon dont vous pouvez utiliser la balise <time> :
-
Articles de blog: Vous pouvez afficher quand un article a été publié ou mis à jour pour la dernière fois :
<p>Dernière mise à jour le <time datetime="2024-09-28">28 septembre 2024</time>.</p> -
Listes d’événements: Les sites web d’événements peuvent utiliser la balise
<time>pour indiquer quand un événement aura lieu :<p>Notre prochaine rencontre aura lieu le <time datetime="2024-11-10">10 novembre 2024</time> à <time datetime="18:00">18h00</time>.</p> -
Délais: Lors de la présentation de délais importants, utilisez la balise
<time>pour plus de clarté :<p>Soumettez votre candidature avant <time datetime="2024-10-30T23:59">le 30 octobre 2024, 23h59</time>.</p>
Dans tous ces exemples, l’attribut datetime garantit que les ordinateurs peuvent lire les informations temporelles correctement, tandis que les utilisateurs voient une version plus lisible.
Support des navigateurs et accessibilité
La balise <time> est largement supportée par les navigateurs modernes. Elle améliore également l’accessibilité car les lecteurs d’écran peuvent interpréter la date et l’heure plus précisément, offrant une meilleure expérience pour les utilisateurs en situation de handicap.
La balise <bdi> : Isolation de texte bidirectionnelle
La balise <bdi> signifie « isolation bidirectionnelle » et est utilisée pour éviter les problèmes de direction du texte sur les sites web multilingues. Cette balise est particulièrement utile lorsque l’on travaille avec du contenu qui comprend à la fois des langues de gauche à droite (LTR) et de droite à gauche (RTL).
Rôle de la balise <bdi> dans les sites multilingues
Lorsque l’on mélange des langues avec différentes directions de texte, comme l’anglais (LTR) et l’arabe (RTL), le flux naturel du texte peut parfois devenir désordonné. La balise <bdi> aide à maintenir la mise en page du texte propre, garantissant que chaque portion de texte s’affiche correctement, peu importe la direction de la langue.
Par exemple, si vous souhaitez afficher une saisie utilisateur (comme un nom d’utilisateur) à côté d’un autre texte, et que vous ne savez pas dans quelle langue sera le nom d’utilisateur, vous pouvez utiliser <bdi> pour vous assurer qu’il ne perturbe pas le flux.
Comment utiliser <bdi> pour prévenir les problèmes de direction du texte
La balise <bdi> entoure la partie du texte que vous souhaitez isoler, et elle empêche la direction du texte d’être affectée par le contenu environnant.
Voici un exemple simple :
<p>User <bdi>اسم</bdi> has logged in.</p>
Si le nom d’utilisateur est en arabe (qui se lit RTL), la balise <bdi> garantit que le reste de la phrase (qui est en anglais et se lit LTR) ne soit pas perturbé. Sans la balise <bdi>, la phrase pourrait s’afficher incorrectement en raison du mélange des directions de texte.
Un autre exemple avec des nombres :
<p>Invoice number: <bdi>#1234</bdi></p>
Si le numéro de facture comprend du texte ou des chiffres dans différentes directions, la balise <bdi> garantit que le format reste correct.
Exemples de <bdi>
La balise <bdi> est couramment utilisée dans les applications multilingues, les plateformes de contenu généré par les utilisateurs et les sites web qui gèrent plusieurs langues à la fois. Par exemple, les sites web qui permettent aux utilisateurs de saisir des données, comme des noms ou des adresses, pourraient utiliser <bdi> pour assurer un bon alignement du texte.
Voici un exemple sur un forum :
<p><bdi>مستخدم</bdi> liked your post!</p>
Sans <bdi>, le texte pourrait s’afficher de manière maladroite, mais avec elle, à la fois le nom d’utilisateur en arabe et le texte en anglais s’affichent correctement.
Compatibilité des navigateurs
La balise <bdi> est prise en charge par tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. C’est une solution légère, qui ne nécessite pas de stylisation spéciale, et aide à garder la mise en page de votre contenu soignée lors du traitement de texte multilingue.
La balise <dfn> : Définir des termes
La balise <dfn> est utilisée pour marquer la première instance d’un terme qui est défini au sein d’une page web. Elle aide les lecteurs à reconnaître rapidement qu’un mot ou une phrase particulière est une définition, améliorant la clarté de votre contenu, en particulier dans l’écriture technique.
Comment utiliser <dfn> pour marquer des définitions
La balise <dfn> est simple à utiliser. Vous l’enveloppez autour du mot ou de la phrase que vous souhaitez définir. En général, le terme apparaît près de l’explication de son sens.
Exemple :
<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>
Ici, la balise <dfn> met en évidence que « DOM » est le terme défini.
Le DOM (Document Object Model) est une interface de programmation pour les documents web.
Meilleures pratiques pour fournir des explications dans l’article
Lors de l’utilisation de la balise <dfn>, assurez-vous que le terme que vous définissez est suivi de près par son explication. Cela garde les choses claires et aide les lecteurs à relier le terme à sa signification immédiatement.
C’est également une bonne idée d’utiliser <dfn> uniquement la première fois qu’un terme est introduit, car le répéter plusieurs fois peut confondre le lecteur.
Par exemple, dans un article technique sur HTML :
<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>
Dans ce cas, « API » est défini lorsqu’il est mentionné pour la première fois, et les utilisations ultérieures de « API » n’ont plus besoin de la balise <dfn>.
Comment <dfn> améliore la clarté du contenu technique
L’utilisation de la balise <dfn> dans l’écriture technique est un excellent moyen de rendre le contenu plus facile à suivre. Elle signale clairement aux lecteurs quand vous introduisez un nouveau terme, ce qui est particulièrement utile lors de l’explication d’idées complexes. Cela aide à améliorer la lisibilité et permet aux utilisateurs de saisir plus rapidement les concepts clés.
En marquant les définitions avec <dfn>, les moteurs de recherche et d’autres outils peuvent également mieux interpréter votre contenu, le rendant plus accessible. Par exemple, les glossaires techniques ou les sites web éducatifs peuvent utiliser <dfn> pour faire ressortir leurs termes.
Exemple de <dfn>
<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>
Dans cette phrase, le lecteur est introduit au terme « URL », suivi d’une explication claire. Cette méthode d’introduction des termes avec la balise <dfn> aide à rendre le contenu technique beaucoup plus facile à lire et à comprendre, surtout pour ceux qui ne sont pas familiers avec le sujet.
La balise <wbr> : opportunités de saut de ligne
La balise <wbr> est utilisée pour suggérer où un mot ou une URL peut être divisé pour créer un saut de ligne si nécessaire. Cela est utile lorsqu’il s’agit de longs mots, d’URL ou de tout texte qui pourrait perturber la mise en page d’une page web.
Ce qu’est la balise <wbr> et pourquoi elle est essentielle pour les longs mots ou URL
Parfois, les longs mots ou URL peuvent perturber le design d’une page web en provoquant un défilement horizontal ou en cassant la mise en page. La balise <wbr> donne au navigateur un indice sur où casser le mot, mais seulement si nécessaire. Cela aide à garder le texte lisible et prévient le débordement.
Par exemple, si vous avez une longue URL, vous pouvez placer la balise <wbr> pour indiquer au navigateur où il peut casser le texte :
<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>
Si le navigateur doit casser l’URL, il le fera après le <wbr>, garantissant que le design reste intact.
Meilleures pratiques pour contrôler le retour à la ligne et le débordement de texte
La balise <wbr> doit être utilisée dans les endroits où le texte pourrait provoquer des problèmes de débordement, tels que de longs termes techniques, des adresses email ou des URL. Mais ne l’utilisez pas trop, car des coupures inutiles peuvent rendre le texte plus difficile à lire.
Voici un autre exemple avec un long mot :
<p>This word is too long: anti<wbr>disestablishmentarianism.</p>
Si le mot devient trop long pour la ligne, le navigateur le divisera après « anti- » sans affecter la lisibilité.
En combinaison avec CSS, vous pouvez également contrôler le retour à la ligne et le débordement de texte pour de meilleurs résultats :
p {
word-wrap: break-word;
overflow-wrap: break-word;
}
Ce CSS garantit que le texte se mettra en forme correctement lorsque cela est nécessaire, et l’utilisation de <wbr> peut donner plus de contrôle sur les endroits où ces ruptures se produisent.
Support des navigateurs pour <wr> et défis potentiels
La balise <wbr> est prise en charge par tous les principaux navigateurs, y compris Chrome, Firefox, Safari et Edge. Elle est légère et ne nécessite aucun style spécial pour fonctionner.
Mais une chose à surveiller est que l’utilisation excessive de la balise peut rendre les ruptures de texte peu naturelles si le contenu est redimensionné ou visualisé sur différentes tailles d’écran.
Par exemple :
<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>
Dans ce cas, vous pouvez éviter que de longues adresses e-mail ne causent des problèmes de mise en page, mais l’e-mail pourrait sembler cassé à différents endroits selon la largeur de l’écran.
Utilisez <wbr> lorsque vous anticipez de longues chaînes de texte qui peuvent ne pas se casser naturellement, gardant votre design propre et fonctionnel sur tous les appareils.
La balise <ins> : Texte inséré
La balise <ins> est utilisée pour montrer le texte qui a été ajouté à un document. Cela est souvent utile pour suivre les modifications, les mises à jour ou les changements dans les documents. Elle est également dotée d’un soulignement par défaut pour mettre en évidence le nouveau contenu.
Qu’est-ce que la balise <ins> et comment se compare-t-elle à la balise <s> ?
La balise <ins> est conçue pour marquer le contenu inséré, tandis que la balise <s> est utilisée pour le texte qui a été supprimé ou qui n’est plus pertinent. Les deux balises sont utiles lorsque vous devez montrer des changements dans un document, comme des mises à jour ou des révisions.
Exemple :
<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>
Ici, la balise <ins> met en évidence ce qui a été ajouté, et la balise <s> montre ce qui a été barré comme obsolète.
Ceci est le nouveau texte qui a été ajouté.
Ceci est le ancien texte qui n’est plus valide.
Utilisation dans le suivi des modifications de document ou le versionnage
La balise <ins> est couramment utilisée lors de la gestion de documents nécessitant un contrôle de version ou lorsque les modifications doivent être visibles. Par exemple, vous pouvez l’utiliser dans des plateformes d’écriture collaborative ou des documents juridiques pour montrer quelles parties ont été ajoutées.
Exemple d’un document avec des modifications :
<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>
Cela rend clairement au lecteur que la section sur « la confidentialité des données » a été ajoutée récemment.
Dans le développement logiciel ou la gestion de contenu, vous pourriez utiliser la balise <ins> pour montrer le texte qui a été nouvellement introduit dans des fichiers sous contrôle de version, facilitant ainsi le suivi des modifications et des révisions au fil du temps.
Options de style pour souligner les changements
L’apparence par défaut de la balise <ins> est soulignée, mais vous pouvez la personnaliser en utilisant CSS pour un meilleur accent, surtout si vous souhaitez que les changements se démarquent davantage.
Voici comment vous pouvez styliser la balise <ins> avec différents effets visuels :
ins {
background-color: #d4edda;
color: green;
text-decoration: none; /* Supprime le soulignement par défaut */
}
Cela donnera au texte inséré une couleur verte et un arrière-plan vert clair, le rendant plus visible.
Vous pouvez également ajouter différents styles comme une police en gras ou une bordure :
ins {
font-weight: bold;
border-bottom: 2px solid green;
}
Ces options de style facilitent pour les utilisateurs l’identification des ajouts ou des modifications, améliorant la lisibilité et la transparence des modifications de document.
Dans l’ensemble, la balise <ins> est un moyen simple mais efficace de suivre le contenu inséré, ce qui la rend très utile pour les documents techniques et les plateformes collaboratives où les révisions doivent être clairement visibles.
La balise <del> : Texte supprimé
La balise <del> est utilisée pour montrer le texte qui a été supprimé ou retiré d’un document. Cette balise raye le texte par défaut, facilitant l’identification de ce qui a été supprimé. Elle est particulièrement utile dans les situations où il est nécessaire de suivre les modifications ou les révisions.
But et utilisation de la balise <del> pour le texte barré
Le principal objectif de la balise <del> est de montrer visuellement qu’un contenu a été retiré. Elle est courante dans les documents, articles ou codes où les changements doivent être visibles pour le lecteur. Le texte supprimé aura généralement un barré, indiquant qu’il n’est plus pertinent ou valide.
Exemple :
<p>This product costs <del>$50</del> $40 now.</p>
Dans cet exemple, le changement de prix est clair. L’ancien prix (50 $) est barré, et le nouveau prix (40 $) suit immédiatement après.
Comment cela peut être combiné avec <ins> pour le suivi des révisions
La balise <del> peut être associée à la balise <ins> pour montrer à la fois le contenu supprimé et le contenu nouvellement ajouté, ce qui la rend parfaite pour le suivi des modifications ou des révisions. Cela est très utile dans l’écriture collaborative, les documents juridiques ou toute situation où les changements doivent être enregistrés clairement.
Exemple de suivi des révisions :
<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>
Il est ici facile de voir que « lundi » a été remplacé par « mardi », et le lecteur sait exactement ce qui a changé.
Meilleures pratiques pour afficher et styliser le contenu supprimé
Par défaut, la balise <del> applique une ligne barrée au texte, mais vous pouvez la styliser davantage avec CSS pour la rendre plus visible ou l’adapter à vos besoins de conception.
Voici un exemple de personnalisation de l’apparence du texte supprimé :
del {
color: red;
text-decoration: line-through;
}
Cela fait apparaître le texte supprimé en rouge, attirant plus l’attention. Vous pouvez également le combiner avec un formatage supplémentaire, comme l’atténuation du texte :
del {
color: gray;
opacity: 0.7;
}
Ce style réduit l’accent sur le contenu supprimé, le rendant moins distrayant mais toujours visible pour les lecteurs.
La balise <del> fournit un moyen simple et efficace de suivre et d’afficher les changements, surtout lorsqu’elle est combinée avec la balise <ins>. C’est essentiel pour garder les documents transparents et clairs pour quiconque examine les modifications ou les mises à jour.
Conclusion
L’utilisation de ces éléments HTML uniques élargit ce qui est possible sur le web, ce qui aide à créer un contenu plus significatif et accessible. Des balises comme <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins>, et <del> apportent chacune leurs propres avantages pour des tâches spécifiques. Ces éléments font plus que simplement styliser le texte ; ils ajoutent du contexte, améliorent l’expérience utilisateur et améliorent la structure des documents.
L’utilisation correcte de ces balises rend non seulement vos pages web plus claires, mais améliore également la compatibilité entre les appareils et les moteurs de recherche. En appliquant ces éléments, pensez à la façon dont chacun d’eux sert à la fois la présentation visuelle et la structure de l’information. Ils offrent des moyens simples mais puissants de rendre les sites web plus riches et plus faciles à comprendre tout en bénéficiant à un large éventail d’utilisateurs.
Si vous avez des questions ou des suggestions, n’hésitez pas à me contacter sur LinkedIn. Si vous avez apprécié ce contenu, envisagez de m’acheter un café pour soutenir la création de contenus plus adaptés aux développeurs.
Source:
https://www.freecodecamp.org/news/less-common-html-elements-and-how-to-use-them/