Html has lang
Quick winFound on 9% of audited stores.
Add a valid `lang` attribute to the `<html>` element so browsers and assistive technologies know what language your page is written in.
What it is
Every web page starts with an `<html>` tag. The `lang` attribute on that tag (e.g., `<html lang="en">`) declares the primary human language of the page's content. Without it, screen readers, browsers, and translation tools have to guess the language — and they often guess wrong. This is a WCAG 2 Success Criterion 3.1.1 ("Language of Page") requirement, meaning it is part of an internationally recognised accessibility standard.
Why it matters
Screen readers use the `lang` attribute to select the correct voice engine and pronunciation rules — a missing or wrong value means a visually impaired customer hears your product descriptions read aloud in the wrong accent or language, making your store unusable for them. Failing WCAG 3.1.1 is an accessibility violation that can expose your business to legal risk under laws such as the ADA (US), the European Accessibility Act (EU), and the Equality Act (UK). Search engines also use the declared language to correctly index and serve your pages in the right regional search results, so a missing `lang` can quietly hurt your international organic traffic. It is also one of the fastest accessibility wins available — a one-line change that immediately satisfies a legal compliance checkpoint.
How to fix it
- Identify the correct BCP 47 language tag for your store's primary language (e.g., `en` for English, `en-US` for US English, `fr` for French, `de` for German). A full list is maintained by the IANA.
- Open your store's root HTML template file — the file that outputs the `<!DOCTYPE html>` declaration and the opening `<html>` tag.
- Change `<html>` (or `<html class="…">`, etc.) to include the lang attribute, for example: `<html lang="en">`.
- If your store serves multiple languages (e.g., via a language switcher), ensure the `lang` value is dynamically set to match the active locale for each translated page, not hard-coded to a single language.
- Save and publish the change, then reload the page and use browser DevTools (View Source or Inspector) to confirm the opening `<html>` tag now includes the correct `lang` attribute.
- Re-run an accessibility scan (e.g., axe DevTools browser extension) on a representative page to confirm the `html-has-lang` rule now passes.
<html lang="en">Fix it on your platform
Pick your platform for the exact steps.
How to fix html has lang on Shopify
- In your Shopify admin, go to Online Store → Themes.
- Next to your active theme, click Actions → Edit code.
- In the left-hand file tree under 'Layout', click `theme.liquid` (this is your root template).
- Find the opening `<html` tag near the top of the file.
- Shopify themes typically already output `<html lang="{{ request.locale.iso_code }}">` using a Liquid variable — if this variable is present, the lang is already dynamic and correct. If the tag reads simply `<html>` or has a hard-coded lang value, replace it with `<html lang="{{ request.locale.iso_code }}">` to dynamically match the store's active language.
- Click Save. Verify by viewing source on any storefront page.
How to fix html has lang on Shopify Plus
- Follow the same steps as Shopify above — edit `theme.liquid` under Online Store → Themes → Actions → Edit code.
- If you use Shopify Markets for multi-language storefronts, the Liquid variable `{{ request.locale.iso_code }}` automatically outputs the correct BCP 47 locale code per market, so use `<html lang="{{ request.locale.iso_code }}">` to cover all markets dynamically.
- Click Save and verify via View Source on each market's storefront URL.
How to fix html has lang on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a local code editor / FTP).
- Open your active theme's `header.php` file (child theme recommended — never edit a parent theme directly).
- Locate the `<html` tag. WordPress themes typically use the `language_attributes()` template tag: `<html <?php language_attributes(); ?>>`. If this is already present, WordPress automatically inserts the correct `lang` attribute based on Settings → General → Site Language.
- If the tag is missing `language_attributes()`, add it: `<html <?php language_attributes(); ?>`.
- Go to Settings → General and confirm 'Site Language' is set to your store's primary language — this controls what value `language_attributes()` outputs.
- For multilingual stores using WPML or Polylang, those plugins automatically switch the `lang` value per translated page when `language_attributes()` is used.
- Save changes and verify via View Source.
How to fix html has lang on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes.
- Next to your active theme click Advanced → Edit Theme Files (or download the theme to edit locally).
- Open `templates/layout/base.html` (Cornerstone theme) — this is the root layout containing the `<html>` tag.
- BigCommerce's Cornerstone theme uses Handlebars: the tag should read `<html lang="{{locale_name}}">`. If the `lang` attribute is absent or hard-coded, add the Handlebars variable: `<html lang="{{locale_name}}">` to make it dynamic.
- Save and upload (or push via Stencil CLI), then verify via View Source.
- The active storefront language is configured under Settings → Store Profile → Default Language.
How to fix html has lang on Adobe Commerce (Magento)
- The root `<html>` tag is declared in `vendor/magento/module-theme/view/base/templates/root.phtml` — do NOT edit the core file.
- Instead, override it in your custom theme: copy the file to `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml`.
- In the copied file, locate the `<html` tag. Magento outputs the language via a helper; ensure the tag includes `lang="<?= $htmlAttributes ?>"` or check that the `html_attributes` block renders the `lang` attribute correctly.
- Alternatively, in your theme's `default_head_blocks.xml` layout file you can add a `<html>` attribute node to inject the lang attribute dynamically using the store's configured locale.
- Set the store locale under Stores → Configuration → General → General → Locale Options → Locale.
- Run `bin/magento cache:flush`, then verify via View Source on the storefront.
How to fix html has lang on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — override `root.phtml` in your custom theme and ensure the `lang` attribute reflects the configured locale from Stores → Configuration → General → Locale Options.
How to fix html has lang on Wix
- Wix automatically adds the `lang` attribute to the `<html>` element based on the language you set for your site.
- To set or change the site language: in the Wix Editor, go to Settings (gear icon) → Multilingual, or in the Wix dashboard go to Settings → Language & Region → Site Language.
- Select the correct primary language for your site. Wix will inject the matching `lang` attribute on the `<html>` tag automatically when the page is rendered.
- For multilingual Wix sites using Wix Multilingual, each language version of a page will automatically receive the correct `lang` value — no manual coding is required.
- Verify by using your browser's View Page Source on the published site and confirming `<html lang="…">` is present.
How to fix html has lang on Wix Studio
- In Wix Studio, the `lang` attribute is controlled the same way as in standard Wix — through the site's language settings.
- Go to the Wix Studio dashboard → Settings → Language & Region and confirm your primary language is correctly set.
- Wix Studio automatically renders the correct `lang` attribute based on this setting; no template editing is needed.
- For multi-language projects, ensure each language is properly configured under the Multilingual section so every translated page gets its own correct `lang` value.
How to fix html has lang on Squarespace
- Squarespace automatically injects the `lang` attribute based on your site's language setting.
- To set the language: in the Home Menu go to Settings → Regional → Language & Region → Site Language, and choose the correct language.
- Squarespace will automatically add the correct `lang` value to the `<html>` element on all pages — no code editing needed.
- If you need a custom or override value, you can inject code via Settings → Advanced → Code Injection: add `<script>document.documentElement.lang='en';</script>` in the Header section as a last resort, but setting the correct Site Language is always preferable.
- Verify on the published site using View Page Source.
How to fix html has lang on Webflow
- In the Webflow Designer, open Project Settings (the gear icon in the left toolbar or via the top menu).
- Go to the General tab. Find the 'Localization' or 'Language' field — set the Primary Language to your store's language. This controls the `lang` attribute on the `<html>` element sitewide.
- For Webflow Localization (multi-language sites), each locale's pages automatically receive the correct `lang` attribute based on the locale configuration under Project Settings → Localization.
- Publish the site, then verify via View Page Source that `<html lang="en">` (or your chosen language code) is present.
How to fix html has lang on PrestaShop
- In PrestaShop, the `<html>` tag is in your theme's `templates/layouts/layout-full-width.tpl` (or `layout-both-columns.tpl`, etc.) Smarty template files.
- Open the relevant layout `.tpl` file in your theme (always use a child/custom theme to avoid overwriting on upgrades).
- Locate the `<html` tag and ensure it includes the Smarty language variable: `<html lang="{$language.iso_code}">`.
- The `$language.iso_code` variable is automatically set to the active store language configured under International → Translations → Languages.
- Save the file and clear the cache under Advanced Parameters → Performance → Clear Cache. Verify via View Source.
How to fix html has lang on OpenCart
- In OpenCart, the root HTML is output by your theme's layout template, typically `catalog/view/theme/<your-theme>/template/common/html.twig` or `html.tpl` depending on your version.
- Open the file via FTP or a file manager (use a custom theme copy, not the default theme).
- Find the `<html` tag and update it to include the language code variable, for example: `<html lang="{{ language_code }}">` (Twig) or `<html lang="<?php echo $language_code; ?>">`.
- Ensure the controller passes the language ISO code to the view — check `catalog/controller/common/html.php` to confirm `$data['language_code']` is set from the active language.
- Save, then verify via View Source on the storefront.
How to fix html has lang on Ghost
- In Ghost, the `<html>` tag lives in your theme's `default.hbs` file (the root Handlebars layout).
- Access your theme files via Ghost Admin → Settings → Design → Customize → (download theme or edit via direct file access if self-hosted).
- Open `default.hbs` and find the `<html` tag. Add or update the lang attribute using the Ghost locale helper: `<html lang="{{@site.locale}}">` — this dynamically outputs the locale set in your publication settings.
- Set the publication locale under Ghost Admin → Settings → General → Publication Language.
- Upload the updated theme via Settings → Design → Upload theme, then verify via View Source.
Does your site have this issue?
Run a free SEOLZ audit to find html has lang — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Html has lang?
Every web page starts with an `<html>` tag. The `lang` attribute on that tag (e.g., `<html lang="en">`) declares the primary human language of the page's content. Without it, screen readers, browsers, and translation tools have to guess the language — and they often guess wrong. This is a WCAG 2 Success Criterion 3.1.1 ("Language of Page") requirement, meaning it is part of an internationally recognised accessibility standard.
Why does html has lang matter?
Screen readers use the `lang` attribute to select the correct voice engine and pronunciation rules — a missing or wrong value means a visually impaired customer hears your product descriptions read aloud in the wrong accent or language, making your store unusable for them. Failing WCAG 3.1.1 is an accessibility violation that can expose your business to legal risk under laws such as the ADA (US), the European Accessibility Act (EU), and the Equality Act (UK). Search engines also use the declared language to correctly index and serve your pages in the right regional search results, so a missing `lang` can quietly hurt your international organic traffic. It is also one of the fastest accessibility wins available — a one-line change that immediately satisfies a legal compliance checkpoint.
How do I fix html has lang?
Add a valid `lang` attribute to the `<html>` element so browsers and assistive technologies know what language your page is written in.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI