Apprends à créer des pages HTML multilingues en utilisant l'attribut lang, la direction du texte, les annotations ruby et d'autres fonctionnalités d'internationalisation.
L'attribut lang déclare la langue du contenu d'un élément. C'est l'un des attributs les plus importants pour l'accessibilité et l'internationalisation en HTML.
<html lang="en">Cela indique aux navigateurs, lecteurs d'écran et moteurs de recherche que le contenu de la page est en anglais. Les lecteurs d'écran l'utilisent pour sélectionner les bonnes règles de prononciation. Les moteurs de recherche l'utilisent pour l'indexation.
Quand une page contient du contenu dans plusieurs langues, définis lang sur les éléments concernés :
<p>The French word for hello is <span lang="fr">bonjour</span>.</p>Codes de langue courants : en, fr, de, es, ja, zh, ar, ko, pt, ru. Tu peux ajouter des sous-balises régionales : en-US, en-GB, fr-CA, zh-TW.
Certaines langues s'écrivent de droite à gauche (RTL), notamment l'arabe, l'hébreu, le persan et l'ourdou.
dirdir="ltr" — De gauche à droite (par défaut pour la plupart des langues).dir="rtl" — De droite à gauche.dir="auto" — Laisse le navigateur détecter la direction à partir du contenu.<html lang="ar" dir="rtl"><bdi> — Isolation bidirectionnelleIsole une portion de texte qui pourrait être dans une direction différente de son environnement, l'empêchant d'affecter le texte adjacent :
<p>User: <bdi>محمد</bdi> posted 3 comments.</p>Sans <bdi>, le texte arabe pourrait perturber la ponctuation et les chiffres environnants.
<bdo> — Remplacement bidirectionnelForce une direction de texte spécifique, remplaçant l'algorithme bidirectionnel Unicode :
<bdo dir="rtl">Hello</bdo> <!-- S'affiche : olleH -->Utilise <bdo> avec parcimonie — il remplace la direction naturelle et peut rendre le texte illisible.
Les annotations ruby fournissent des guides de prononciation au-dessus (ou à côté) des caractères, couramment utilisées dans la typographie d'Asie de l'Est :
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>Éléments :
<ruby> — Conteneur pour le texte annoté.<rt> — L'annotation (guide de prononciation).<rp> — Parenthèses de repli affichées dans les navigateurs qui ne supportent pas ruby. Cachées quand ruby est supporté.Résultat : Les caractères 漢字 sont affichés avec "kan" et "ji" comme petit texte au-dessus.
hreflangSur les liens, hreflang indique la langue du document lié :
<a href="/fr/about" hreflang="fr">Version française</a>Les moteurs de recherche l'utilisent pour servir la bonne version linguistique aux utilisateurs.
translateContrôle si le contenu doit être traduit par des outils de traduction automatique :
<p translate="no">Kodojo</p> <!-- Nom de marque : ne pas traduire -->
<code translate="no">console.log('hello')</code> <!-- Code : ne pas traduire --><link>Pour les versions alternatives dans d'autres langues de la même page :
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>i18n Demo</title>
</head>
<body>
<h1>Internationalization in HTML</h1>
<!-- French section -->
<section lang="fr">
<h2>Section en français</h2>
<p>Bienvenue sur notre site.</p>
</section>
<!-- Arabic section (RTL) -->
<section lang="ar" dir="rtl">
<h2>مرحبا</h2>
<p>أهلا وسهلا بكم.</p>
</section>
<!-- Japanese with ruby annotations -->
<section lang="ja">
<h2>
<ruby>
日 <rp>(</rp><rt>に</rt><rp>)</rp>
本 <rp>(</rp><rt>ほん</rt><rp>)</rp>
語 <rp>(</rp><rt>ご</rt><rp>)</rp>
</ruby>
</h2>
</section>
<!-- Brand name: do not translate -->
<p>Powered by <span translate="no">Kodojo</span></p>
<!-- Link to French version -->
<a href="/fr/" hreflang="fr">Version française</a>
</body>
</html>Quel est le but de l'élément <bdi> ?