HTML Internationalization

Introduction

Internationalization (i18n) ensures your website works for every language and region. HTML has built-in attributes that help with direction, language declaration, encoding, and locale-aware formatting.

1. Setting the Language of the Document

<html lang="en">
<html lang="bg">
<html lang="de">

Helps screen readers, search engines, and text processing.

2. Marking Language Changes


  Welcome!  
  <span lang="bg">Здравей!</span>  
  <span lang="jp">こんにちは</span>

3. Text Direction (LTR / RTL)

<p dir="rtl">مرحبا بالعالم</p>
<p dir="ltr">Hello World</p>

Useful for Arabic, Hebrew, Farsi, etc.

4. Bi-Directional Text (bdi / bdo)

bdi — isolates direction

<bdi>مرحبا</bdi> user logged in.

bdo — forces direction

<bdo dir="rtl">Hello</bdo>

5. Character Encoding (Always UTF-8)

<meta charset="UTF-8">

Prevents broken characters like “Пример”.

6. Formatting Numbers, Dates, and Currency (JS)

Use Intl API:

Numbers

new Intl.NumberFormat('bg-BG').format(1234567.89);

Currency

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(99.99);

Dates

new Intl.DateTimeFormat('de-DE').format(new Date());

7. Localized Links (hreflang)

<link rel="alternate" hreflang="en" href="site.com/en">
<link rel="alternate" hreflang="bg" href="site.com/bg">

Google uses these for proper language handling.

8. Unicode Symbols

<p>Euro: €</p>
<p>Checkmark: ✓</p>
<p>Heart: ❤️</p>

9. Avoid Hardcoding Text in DOM

Put text in JSON files for each language and load dynamically:

// /lang/en.json
{ "title": "Dashboard", "logout": "Log out" }

// /lang/bg.json
{ "title": "Табло", "logout": "Изход" }

10. ARIA + i18n

<button aria-label="Отвори меню">☰</button>

11. Localized Placeholder Text

<input placeholder="Търсене..." lang="bg">

12. Do Not Mix Fonts Across Languages

Some fonts don't support Cyrillic or Arabic → fallback becomes ugly.

13. Using `` for older browsers

<meta http-equiv="Content-Language" content="en">

Summary