CodeBlanks Logo Icon CodeBlanks
Login Register

RTL-aware markup

HTML course · Expert · Lesson 21/39

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

  1. 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.

  2. 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>

  3. Match the scenario to the direction tool

    Arabic page
    dir="rtl"
    English page
    dir="ltr"
    Mixed-direction text
    <bdi>
    Force direction
    <bdo>

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone