FeaturesPricingAudit GuideFree StatementDashboard →

Add Language Attribute to HTML Element

Learn how to add the lang attribute to HTML pages for proper accessibility and SEO. Includes code examples and language code reference.

6 min read
moderate severityWCAG Level AWCAG 2.1 Success Criterion 3.1.1Auto-detectable

What Is It?

The lang attribute specifies the primary language of a page using ISO 639-1 language codes (e.g., 'en' for English, 'es' for Spanish, 'de' for German). It goes on the <html> tag.

Affected users: Screen reader users, search engines, spell-checking systems, browser hyphenation systems

Why It Matters

Screen readers need to know the language to pronounce words correctly. Search engines use it for language-specific indexing. Browsers use it for spell-checking and hyphenation.

Good news: Automated tools can add basic lang attributes, but complex multilingual sites need manual verification of region codes.

How to Detect This Issue

View page source and check the <html> tag. Look for lang="..." attribute. If missing or empty, it's a violation. Test with multiple language versions if applicable.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<html>
After (accessible)
<html lang="en">

For pages in other languages, use the appropriate code: lang="es" for Spanish, lang="fr" for French, lang="de" for German, etc.

React / Next.js

Before
ReactDOM.render(<App />, document.getElementById("root"));
After
document.documentElement.lang = "en"; ReactDOM.render(<App />, document.getElementById("root"));

In Next.js, use the html lang attribute in your _document.js or layout component. For Next.js 13+, set it in layout.tsx metadata.

WordPress

Before
<html>
After
<html lang="en-US">

In WordPress, the lang attribute is set automatically in wp_language_attributes(). Verify it's in your theme's header.php <html> tag.

Shopify Liquid

Before
<html>
After
<html lang="{{ shop.locale }}">

Shopify uses Liquid template language. Use {{ shop.locale }} to automatically set the correct language for each region.

Common Mistakes

✗

Using generic 'en' when you should use regional codes like 'en-US' or 'en-GB'

✗

Adding lang only to <body> instead of <html> root element

✗

Not updating lang attribute for multilingual sites on per-page basis

✗

Using incorrect language codes (e.g., 'eng' instead of 'en')

✗

Assuming the lang attribute will be inherited (it must be explicitly set)

Frequently Asked Questions

What language codes should I use?
Use ISO 639-1 two-letter codes: en (English), es (Spanish), fr (French), de (German), etc. Add region codes for variants: en-US, en-GB, pt-BR, zh-CN.
What if my page has multiple languages?
Set the <html lang> to the primary language. For sections in other languages, add lang attributes to those elements: <p lang="es">Hola</p>
Do I need lang attributes on every page?
Yes. Every page should declare its language. For consistent sites, ensure your template automatically includes it.
Does lang attribute affect SEO?
Yes. Search engines use lang to serve the correct language version to users. Also use hreflang attributes in <head> for multilingual sites.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides