RTL-aware markup

Learn to write RTL-aware tables, forms and landmarks.

The RTL page skeleton

For an RTL page you put dir="rtl" on the <html> tag; the whole page flows right to left. Landmarks like <header>, <nav>, <main> and <footer> stay the same; only the visual direction changes.

If a section needs LTR (say a phone number), give that element dir="ltr". It overrides the direction inherited from the parent. The rule: use dir where needed; do not overuse it.

RTL tables and forms

In an RTL context a table's first column starts from the right; the browser does this automatically from dir="rtl". In forms the label and input swap positions; the label's for still matches the input's id.

The key point: dir changes only the visual direction, not the meaning. A <label for="email"> and <input id="email"> pair works the same in RTL; only the visual layout differs.

Exercise RTL page skeleton

Write an RTL page skeleton. Start with <html lang="ar" dir="rtl">. Add a <head> and a <body>. In the body add a <header> holding an <h1> (text: Marhaba). Also add a <main> and a <footer> to the body.

Show example solution

<html lang="ar" dir="rtl">
  <head><meta charset="utf-8"></head>
  <body>
    <header>
      <h1>Marhaba</h1>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

Test yourself

How do you keep a phone number LTR on an RTL page?
- <p lang="rtl">
- <span lang="ltr">
- <p dir="rtl">
- <span dir="ltr">
Show answer

<span dir="ltr"> — Correct. A span with dir="ltr" flips the page direction just for that element.

Complete the label-input pair

<form>
  <label for="____">Email</label>
  <input id="email" type="email">
</form>

Show answer

<form>
  <label for="email">Email</label>
  <input id="email" type="email">
</form>

Match the scenario to the direction tool

Arabic page

dir="rtl"
English page

dir="ltr"
Mixed-direction text

<bdi>
Force direction

<bdo>

Next lesson: Multilingual SEO

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies