Challenge - Multilingual RTL

Write a bilingual RTL page with hreflang, dir and bidi.

Multilingual and RTL page

Pages published in multiple languages set three things correctly: language, direction, and alternate links. <html lang="en" dir="ltr"> declares the root language and writing direction; RTL languages use dir="rtl". Other language versions are linked with <link rel="alternate" hreflang="tr">; hreflang="x-default" picks the version for visitors without a language.

To avoid duplicate content, <link rel="canonical"> marks the main version. When embedded RTL text needs its direction forced, <bdi> and <bdo> are used. Together these layers build a consistent multilingual experience.

Exercise Write a multilingual head

Write the head of a multilingual page. Use <html lang="en" dir="ltr"> as the root. In head add a <link rel="canonical"> element, at least two <link rel="alternate" hreflang="..."> elements, and one hreflang="x-default" alternate.

Show example solution

Root has lang and dir; head has canonical and two alternates (one is x-default).

Example solution:
<html lang="en" dir="ltr">
<head>
  <link rel="canonical" href="https://site.example/en/">
  <link rel="alternate" hreflang="tr" href="https://site.example/tr/">
  <link rel="alternate" hreflang="x-default" href="https://site.example/en/">
</head>
</html>

Test yourself

Match the multilingual attributes

lang="tr"

Turkish language code
dir="rtl"

Right-to-left direction
hreflang="en"

English alternate
hreflang="x-default"

Unspecified default
rel="canonical"

Mark the main version
Which dir value is used for Arabic?
- ltr
- auto
- rtl
- ttb
Show answer

rtl — Correct. Arabic is written right-to-left, so dir="rtl" is used.

Link the alternate version

<link rel="alternate" ____ href="https://site.example/tr/">

Show answer

<link rel="alternate" hreflang="tr" href="https://site.example/tr/">

When is the bdi element used?
- For embedded text with unclear direction
- Only next to images
- During form submission
- In table headers
Show answer

For embedded text with unclear direction — Correct. bdi isolates embedded text with unclear direction.

Next lesson: Challenge - Security package

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies