Html lang valid
Quick winFound on 1% of audited stores.
Add a valid BCP 47 language code to the `lang` attribute on your site's `<html>` element so browsers and assistive technologies know what language your content is written in.
What it is
Every web page starts with an `<html>` tag, and that tag should include a `lang` attribute that tells browsers, screen readers, and search engines what human language the page is written in — for example, `lang="en"` for English or `lang="fr"` for French. The value must be a valid BCP 47 language tag (a globally recognised standard). When this attribute is missing or contains an unrecognised code, assistive technology cannot determine the correct language automatically. WCAG Success Criterion 3.1.1 ("Language of Page") requires this for Level A conformance — the most basic level of accessibility compliance.
Why it matters
Screen readers use the `lang` attribute to select the correct voice, pronunciation rules, and text-to-speech engine for your content. Without a valid value, visually impaired shoppers may hear your product descriptions read back in the wrong language or with completely garbled pronunciation — making your store unusable for them. Beyond accessibility, missing or invalid language declarations expose you to legal risk under accessibility laws (ADA, EN 301 549, and similar regulations in many countries) that increasingly cover commercial websites and online stores. Search engines also use the declared language to serve your pages to the right regional audiences, so fixing this can indirectly protect your international SEO. The fix itself takes under five minutes and requires no coding skill on most platforms.
How to fix it
- Identify the correct BCP 47 language tag for your site's primary content language (e.g. 'en' for English, 'en-US' for US English, 'de' for German, 'fr-CA' for Canadian French). A full list is maintained by the IANA Language Subtag Registry.
- Locate the outermost `<html>` tag in your site's main HTML template or theme file.
- Add or correct the `lang` attribute so it reads `<html lang="en">` (replacing 'en' with your actual language code).
- Save and publish the change, then view the page source (right-click → View Page Source) to confirm the opening `<html>` tag now contains the correct `lang` value.
- Re-run an accessibility scan (e.g. axe DevTools browser extension) to verify the html-lang-valid rule passes.
- If your store serves multiple languages, ensure each language-specific page template also declares its own correct `lang` value.
Fix it on your platform
Pick your platform for the exact steps.
How to fix html lang valid on Shopify
- In your Shopify admin, go to Online Store → Themes.
- Click the '...' (Actions) button next to your active theme and select 'Edit code'.
- In the Layout folder, open 'theme.liquid' (this is your global HTML template).
- Find the opening `<html` tag near the top of the file — it often already has `lang` set to a Liquid variable like `lang="{{ request.locale.iso_code }}"`. If missing or incorrect, update it to `<html lang="{{ request.locale.iso_code }}">` — Shopify's Liquid will automatically output the correct BCP 47 code for each storefront language.
- Click 'Save'. Preview your store and view page source to confirm the rendered `<html>` tag contains a valid language code.
How to fix html lang valid on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use an FTP client / file manager).
- Open your active theme's 'header.php' file (or the file that outputs the `<html>` tag — in block themes this may be 'templates/index.html' or 'parts/header.html').
- Find the `<html` tag. In most WordPress themes it is generated by the `language_attributes()` template tag: `<html <?php language_attributes(); ?>>`.
- If the tag is hard-coded without `language_attributes()`, replace it so it reads `<html <?php language_attributes(); ?>>`. WordPress will then output the correct `lang` attribute based on the language set under Settings → General → Site Language.
- Verify the correct language is selected under Settings → General → Site Language, then save and view page source to confirm.
How to fix html lang valid on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes.
- Click 'Advanced' → 'Edit Theme Files' on your active theme (or download the theme to edit locally).
- Open 'templates/layout/base.html' (the main HTML layout file for Stencil themes).
- Locate the opening `<html` tag. Update it to include the correct `lang` attribute, e.g. `<html lang="en">`. For multilingual stores using a translation app, check the app's documentation for its dynamic language variable.
- Save and upload the updated theme, then publish it and verify via page source.
How to fix html lang valid on Wix
- Wix sets the `lang` attribute automatically based on your site's language setting.
- In the Wix Editor or Wix Studio, open Site Settings (gear icon) → Multilingual & Language → Site Language.
- Ensure your primary site language is set correctly. Wix will then inject the correct `lang` attribute into the `<html>` tag automatically.
- If you use Wix Multilingual, each language version of your site will have its own `lang` attribute set by the platform — no manual code change is needed.
- Publish your site and use a browser's 'View Page Source' or an accessibility checker to confirm the `lang` attribute value is correct.
How to fix html lang valid on Squarespace
- Squarespace automatically adds a `lang` attribute to the `<html>` tag based on the site's language setting.
- Go to Settings → Language & Region → Site Language and select the correct language from the dropdown.
- Save and publish. Squarespace will update the rendered `<html lang="...">` attribute automatically.
- Confirm by visiting your live site and inspecting the page source or using a browser developer tool to view the `<html>` tag.
- Note: Squarespace does not allow direct editing of the `<html>` tag via custom code; the language setting is the only lever available to store owners.
How to fix html lang valid on Webflow
- In the Webflow Designer, click the 'W' logo (top-left) → Project Settings → General tab.
- Scroll to the 'Localization' or 'SEO' section. Under 'Language', set your primary site language — Webflow will inject this as the `lang` attribute on the `<html>` element.
- If you use Webflow Localization (multi-language), each locale page will receive its own correct `lang` attribute automatically.
- For a custom `lang` value not available via the UI, go to Project Settings → Custom Code and add a script that rewrites `document.documentElement.lang` — though this is rarely needed.
- Publish your site and verify via page source or axe DevTools.
How to fix html lang valid on Adobe Commerce (Magento)
- In your Magento admin, go to Content → Design → Configuration.
- Select the Store View you want to update and click 'Edit'.
- Under 'HTML Head', find the 'Locale' or review your theme's root template file.
- The `lang` attribute is typically output by the root template. Open `<your-theme>/Magento_Theme/templates/root.phtml` (or the parent theme's equivalent) and locate the `<html` tag.
- Update it to use the store's locale: `<html lang="<?= $block->escapeHtmlAttr(strstr($block->getLang(), '_', true) ?: 'en') ?>">` — or use the full locale with a hyphen, e.g., `lang="en-US"`.
- Clear the Magento cache (System → Cache Management → Flush Cache) and verify the change in page source.
How to fix html lang valid on Shopify Plus
- Follow the same steps as Shopify above — Shopify Plus themes use the same `theme.liquid` layout file.
- If you use a custom Hydrogen/headless storefront, open your root layout component (e.g. `app/root.jsx` or `app/root.tsx`) and ensure the `<html>` element has `lang={locale}` where `locale` is derived from the Shopify Storefront API locale.
How to fix html lang valid on Wix Studio
- In Wix Studio, the `lang` attribute is controlled by the site's language settings, not directly editable in the canvas.
- Open your site in Wix Studio → click the Site Settings (gear icon) → Language & Region, and confirm the primary language is set correctly.
- For multilingual sites, use the Wix Multilingual panel to ensure each language has a valid locale assigned.
- Publish the site and verify via page source. If the attribute is still invalid, escalate to Wix Studio support.
How to fix html lang valid on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template structure and locale configuration paths are identical in Magento Open Source.
How to fix html lang valid on PrestaShop
- PrestaShop derives the `lang` attribute from the active store language. Go to Back Office → International → Translations → Languages and confirm the correct language is installed and active.
- In your theme's `templates/_partials/head.tpl` (or the root layout, often `templates/layouts/layout-full-width.tpl`), find the `<html` tag and ensure it uses the Smarty variable: `<html lang="{$language.iso_code}">`.
- Clear your theme cache via Back Office → Design → Theme & Logo → (Advanced Customization) or via Advanced Parameters → Performance → Clear Cache.
- Verify the rendered page source shows a valid ISO language code on the `<html>` tag.
How to fix html lang valid on WordPress.org
- Go to WP Admin → Settings → General and set 'Site Language' to your correct language.
- In your active (child) theme's `header.php`, ensure the `<html>` tag uses the WordPress template tag: `<html <?php language_attributes(); ?>>`. This outputs the correct `lang` attribute automatically.
- If you don't have a child theme, create one before editing to avoid losing changes on theme updates.
- Save and verify via page source.
How to fix html lang valid on Ghost
- In your Ghost theme files, open `default.hbs` (the root layout).
- Find the `<html` tag and update it to use Ghost's locale helper: `<html lang="{{@site.locale}}">`. Ensure your publication locale is set correctly in Ghost Admin → Settings → Publication info.
- Upload the updated theme zip via Ghost Admin → Settings → Design → Upload theme, then verify the page source.
How to fix html lang valid on Shopify Storefront API
- In your headless/custom frontend (React, Next.js, etc.), find the root HTML document component (e.g. `_document.jsx` in Next.js or your root layout).
- Pass the active locale from the Shopify Storefront API's `language` field to the `lang` prop: `<html lang={locale}>` where `locale` is the BCP 47 code returned by the API.
- Verify by inspecting the rendered HTML source of your deployed storefront.
Does your site have this issue?
Run a free SEOLZ scan to find html lang valid — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Html lang valid?
Every web page starts with an `<html>` tag, and that tag should include a `lang` attribute that tells browsers, screen readers, and search engines what human language the page is written in — for example, `lang="en"` for English or `lang="fr"` for French. The value must be a valid BCP 47 language tag (a globally recognised standard). When this attribute is missing or contains an unrecognised code, assistive technology cannot determine the correct language automatically. WCAG Success Criterion 3.1.1 ("Language of Page") requires this for Level A conformance — the most basic level of accessibility compliance.
Why does html lang valid matter?
Screen readers use the `lang` attribute to select the correct voice, pronunciation rules, and text-to-speech engine for your content. Without a valid value, visually impaired shoppers may hear your product descriptions read back in the wrong language or with completely garbled pronunciation — making your store unusable for them. Beyond accessibility, missing or invalid language declarations expose you to legal risk under accessibility laws (ADA, EN 301 549, and similar regulations in many countries) that increasingly cover commercial websites and online stores. Search engines also use the declared language to serve your pages to the right regional audiences, so fixing this can indirectly protect your international SEO. The fix itself takes under five minutes and requires no coding skill on most platforms.
How do I fix html lang valid?
Add a valid BCP 47 language code to the `lang` attribute on your site's `<html>` element so browsers and assistive technologies know what language your content is written in.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI