Lesson 29 of 55 · HTML
Internationalization – `lang` Attribute and Text Direction
Duration: 9 min
Global‑Ready HTML
Declare the page language to improve accessibility and SEO.
<html lang='en' dir='ltr'>
…
</html>
lang– ISO language code (en,fr,ar). Helps screen readers pronounce text correctly and informs search engines.dir–ltr(left‑to‑right) orrtl(right‑to‑left) for scripts like Arabic or Hebrew.
Per‑element overrides
<p>Welcome! <span lang='es'>¡Bienvenido!</span></p>
The <span> tells assistive tech that the inner text is Spanish.
Right‑to‑left considerations
- Use CSS logical properties (
margin-inline-start,padding-inline-end) instead of physical ones (margin-left). - Align text with
text-align: startto respect the document’s direction. - For tables, add
dir='rtl'on the<table>if the primary language is right‑to‑left.
Quick checklist for i18n
langanddirset on<html>? ✅- Language overrides (
lang='…') used where needed? ✅ - CSS logical properties used for layout? ✅
text-align: startused instead ofleft/right? ✅- Tested with a screen reader in both LTR and RTL modes? ✅
Tip: For multilingual sites, implement a language switcher that updates the
langattribute and optionally the URL (/en/,/es/).