SiteLint documentation and guidelines

Html lang attr

Description

The lang attribute in HTML specifies the primary language of the content within an HTML document. This attribute is crucial for accessibility, search engine optimization, and proper rendering of content by browsers and assistive technologies. Setting the lang attribute helps screen readers and other tools understand how to correctly pronounce and process the text, improving the user experience for individuals who rely on these technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers benefit from the correct lang attribute, as it ensures the content is read with the correct pronunciation and intonation.
  • Cognitive disabilities: users with cognitive disabilities may find it easier to understand content that is processed correctly according to its language.
  • Multilingual users: users who speak multiple languages can benefit from correct language settings, as it helps them switch contexts appropriately.

Why it matters

Setting the lang attribute correctly is essential for accessibility and usability. It ensures that screen readers and other assistive technologies can accurately interpret and pronounce the text, providing a better user experience. Additionally, the lang attribute helps search engines index content correctly and browsers render characters appropriately.

Coding problems and solutions

Common coding problems

  • Missing lang attribute: the lang attribute is not set on the <html> element, making it difficult for assistive technologies to determine the document’s language.
  • Incorrect language code: the lang attribute is set with an incorrect or invalid language code, leading to improper interpretation.
  • Not setting lang for subsections: when a document contains multiple languages, the lang attribute is not set for individual sections, causing issues with correct pronunciation and interpretation.

How to fix it

Set the lang attribute on the <html> element

Ensure that the lang attribute is set on the root <html> element to specify the document’s primary language.

Incorrect example
<html>
Correct example
<html lang="en">
Note: the default value for lang is an empty string, indicating that the language is unknown. Therefore, it is recommended to always specify an appropriate value for this attribute. The value should be a valid BCP 47 language tag, which typically includes a language code (e.g., en for English) and optionally a script code (e.g., latn for Latin script).

Use valid language codes

Ensure that the lang attribute uses valid language codes as per the IANA Language Subtag Registry.

Incorrect example
<html lang="english">
Correct example
<html lang="en">

Set the lang attribute for multilingual content

Use the lang attribute to specify different languages for different sections of the document.

Incorrect example
<html lang="en">
<body>
    <p>Hello, world!</p>
    <p>Hola, mundo!</p>
</body>
Correct example
<html lang="en">
<body>
    <p>Hello, world!</p>
    <p lang="es">Hola, mundo!</p>
</body>

Known limitations

  • Dynamic content: ensure that dynamically loaded content also respects the lang attribute settings and adjusts appropriately.
  • Complex multilingual pages: for pages with complex multilingual content, carefully manage and test the use of the lang attribute to ensure correct interpretation.
  • Browser and assistive technology support: test across different browsers and assistive technologies to ensure they correctly interpret the lang attribute.

Resources