Why language information matters
A browser cannot reliably infer the language of every sentence from its words. A language attribute tells software what language a piece of text is intended to use. Screen readers may use that information to select a pronunciation voice or reading rules; browsers and other tools can also use it when processing text. Support and available voices vary, so the attribute improves the information available to those tools rather than guaranteeing a particular sound.
Start with the main language of the page. In a document whose interface and article text are primarily English, set the language of the root document element to en. That value normally applies to descendants unless a more specific language is set. Do not choose a language based only on the website’s audience or the visitor’s location: the attribute should describe the text it labels. A translated page therefore needs its own appropriate root language, even if it shares a layout with the English version.
Mark changes at the right scope
When a distinct phrase, quotation, label, or passage uses another language, identify the smallest meaningful element containing that text and give it the appropriate language value. For example, in an English sentence introducing the French phrase “bon appétit,” mark the element containing just the French phrase as fr. Leave the surrounding English under the page’s English language setting. If an entire paragraph is in French, mark that paragraph instead of wrapping and labeling each word separately.
Language values use standardized tags: en and fr identify languages, while a tag such as en-GB can specify a regional variety when that distinction matters to the content. Use a tag that matches the text, not one chosen in hopes of forcing a preferred voice. Avoid marking every borrowed word automatically; some loanwords are routinely pronounced as part of the surrounding language. The useful question is whether the reader should treat the passage as text in another language.
A reusable interface can make these decisions easier to maintain. A translated button label, error message, or component description should carry the language that matches its displayed words. If a component is inserted into a page with a different main language, do not assume it will inherit the correct one. Conversely, avoid setting a language on every component by default if it would override the correct language inherited from the page.
Keep language and text direction separate
Language identifies how text should be interpreted; direction controls how it flows. They often need attention together, but they are not interchangeable. An Arabic passage within an English page may need an Arabic language value and a right-to-left direction. Setting only one does not fully describe the passage. Direction is especially worth checking around punctuation, numbers, and adjacent left-to-right text, where the visual order can be surprising.
For names, short phrases, and user-generated content, consider each field’s actual language and direction rather than applying one setting to an entire mixed-language container. If the language is unknown, avoid guessing from a person’s name or a few characters. Review the rendered result as well as the underlying element settings: a passage can appear visually acceptable while still lacking the language information a screen reader might use.
Test a small multilingual example
A useful test needs only one short page. Set its root language to English, write an English sentence containing a French phrase, and assign fr to the element containing that phrase. Add a second French sentence without its own language setting for comparison. To inspect the page, check the document’s root language in browser developer tools, then check that the marked phrase has its own value and the surrounding sentence does not. If you set these values with JavaScript, document.documentElement.lang = "en" sets the root value; a reference to the phrase element can have its lang property set to "fr".
Next, listen with a screen reader and voice setup available to you. Compare the marked and unmarked passages, and check that the language change does not extend into the following English text. A voice may change, pronunciation may change subtly, or there may be little audible difference when a matching voice is unavailable. That outcome does not make the language attribute unnecessary: inspect the element values as well as listening, and test more than one setup when possible.
Finally, repeat the check after content changes. Translated messages loaded later, reused components, and text edited through JavaScript should retain language values that describe the words currently displayed. Treat language as part of the content itself: when the words change language, review the attribute alongside them.
