What are the concerns when building a multilingual site?

The short answer

The main concerns are: proper HTML lang attributes, text direction for RTL languages, date/number formatting per locale, URL structure for different languages, handling text expansion (translations are often longer), font support for different scripts, and SEO with hreflang tags.

To serve each language, detect a starting language from the Accept-Language header or navigator.language, load strings from per-language translation files (for example with i18next), and always let users switch languages manually.

HTML lang attribute

Always set the language on the <html> tag:

<html lang="en"></html>

Add a region subtag when the variant matters, for example <html lang="pt-BR"> for Brazilian Portuguese.

This tells screen readers how to pronounce content and helps search engines understand the page language.

For content in a different language within the page:

<p>
  The French word <span lang="fr">bonjour</span> means
  hello.
</p>

Text direction (RTL)

Languages like Arabic, Hebrew, and Persian read right-to-left:

<html lang="ar" dir="rtl"></html>

Use CSS logical properties instead of physical ones:

/* Physical (breaks in RTL) */
margin-left: 16px;
text-align: left;
/* Logical (works in both directions) */
margin-inline-start: 16px;
text-align: start;

Text expansion

English text is often shorter than translations. German can be 30% longer, Finnish even more. Your UI must handle different text lengths:

• Use flexible layouts (flexbox, grid) that grow with content
• Avoid fixed-width containers for text
• Test with longer strings during development

URL structure

Three common approaches:

• Subdirectory: example.com/en/about, example.com/es/about
• Subdomain: en.example.com, es.example.com
• Separate domains: example.com, example.es

Subdirectories are the most common because they are easiest to manage and keep all SEO value on one domain.

Detecting the user's language

From the HTTP header: the browser sends an Accept-Language request header (for example en-US,en;q=0.9,es;q=0.8), which the server can read to pick a default language.

From the browser:

const language = navigator.language; // "en-US"
const languages = navigator.languages; // ["en-US", "en", "es"]

Detection only picks a starting language. Always provide a manual language switcher, because the browser setting does not always match what the user wants to read.

Translation files

Store translations as key-value pairs, one file per language:

{ "greeting": "Hello", "cart": "Shopping Cart" }

{ "greeting": "Hola", "cart": "Carrito de Compras" }

Use a library like i18next (in React, through react-i18next) to load them and look up strings by key:

const { t } = useTranslation();
return <h1>{t('greeting')}</h1>; // "Hello" or "Hola"

SEO: hreflang tags

Tell search engines which page to show for each language:

<link
  rel="alternate"
  hreflang="en"
  href="https://example.com/en/about"
/>
<link
  rel="alternate"
  hreflang="es"
  href="https://example.com/es/about"
/>
<link
  rel="alternate"
  hreflang="x-default"
  href="https://example.com/about"
/>

Locale-aware formatting

// Dates
new Intl.DateTimeFormat('de-DE').format(new Date()); // "5.4.2026"
new Intl.DateTimeFormat('en-US').format(new Date()); // "4/5/2026"
// Numbers
new Intl.NumberFormat('de-DE').format(1234.5); // "1.234,5"
new Intl.NumberFormat('en-US').format(1234.5); // "1,234.5"

Why interviewers ask this

This comes up at companies with international products. Interviewers want to see if you have thought about building for a global audience, including accessibility (lang attribute, RTL), SEO (hreflang), and formatting differences.