What

The lang attribute simply tells the browser and search engines the natural language of the content within an element or the entire page. This information helps them present the content correctly and perform various tasks based on the language.

Why

In HTML the lang attribute plays a crucial role in specifying the language used on a web page or element. It's more than just a technical detail; it holds significant importance for both users and search engines.

  • Search Engine Optimisation (SEO) - Search engines like Google use the lang attribute to categorise and index web pages according to their language. This leads to more relevant search results for users and potentially improves your website's visibility for specific language searches.
  • Content Formatting - For certain languages, the lang attribute can trigger specific formatting adjustments, like adjusting punctuation, line direction, and layout conventions. This ensures the content appears visually natural and consistent for viewers from different language backgrounds.
  • Multilingual Websites - If your website caters to multiple languages, using the lang attribute on each language section clearly defines the language boundaries for both users and search engines. This allows for better navigation and avoids confusion about content language.

For screen readers and accessibility the lang element is crucial for:

Pronunciation and Speech Synthesis

Screen readers rely on the lang attribute to determine the correct pronunciation of words and phrases. Misidentified language can lead to garbled, nonsensical outputs, rendering the content incomprehensible for users.

For languages with complex grammar rules or diacritics (accent marks), accurate language identification enables the screen reader to apply the appropriate rules and pronunciations.

Punctuation and Text Interpretation

Different languages have different punctuation conventions and sentence structures. The lang attribute helps the screen reader interpret the text correctly, avoiding misplaced pauses or misconstrued meanings.

Languages with right-to-left writing direction (like Arabic or Hebrew) require the screen reader to adjust accordingly, ensuring proper text flow and navigation.

Language-Specific Features and Tools

Many screen readers offer language-specific features like grammar checking, spell-checking, and dictionary tools. The lang attribute allows the screen reader to activate the appropriate feature set for the user's preferred language.

Some languages might require specific text editing or braille translation tools, which the screen reader can activate based on the identified language.

Improved Accessibility and Inclusion

By ensuring accurate and meaningful reading experiences, the lang attribute empowers users with diverse language needs to access and understand web content equally.

This promotes inclusivity and removes barriers for individuals who rely on screen readers in their daily lives for information and communication.

How

The lang attribute can be applied to the <html> tag for the entire page or individually to specific elements like <p>, <span>, or <div>.

Within the attribute, you specify the language code using a two-letter abbreviation according to the ISO 639-1 standard (e.g., en for English, es for Spanish, fr for French).

For more precise language variations, you can also use extended codes including the region (e.g., en-gb for British English, es-mx for Mexican Spanish).

In the html code on this page it looks like this:

<html class="no-js no-touch"  lang="en">