Html has lang

Quick win

Found on 17% of audited stores.

Add a valid `lang` attribute to the `<html>` element so browsers, screen readers, and search engines know what language your page is written in.

What it is

Every HTML page should declare its primary language in the opening `<html>` tag using a `lang` attribute — for example, `<html lang="en">` for English. This single attribute tells browsers, screen readers, and search-engine crawlers what human language the page content is written in. WCAG Success Criterion 3.1.1 ("Language of Page") requires it. A common mistake is using the XML version (`xml:lang`) instead of the standard HTML `lang` attribute — only `lang` is valid in HTML documents.

Why it matters

Screen readers use the `lang` attribute to select the correct pronunciation engine and voice profile; without it, a visually-impaired customer may hear your entire site read aloud in the wrong language, making it effectively unusable. This is a Level A WCAG violation — the lowest bar for accessibility compliance — and is frequently cited in accessibility audits and legal complaints under the ADA, the European Accessibility Act, and equivalent laws worldwide, exposing you to real legal and financial risk. Search engines also use the declared language to serve your pages to the right audiences, so a missing or wrong `lang` value can quietly undermine your international SEO. Fixing it takes less than five minutes and has zero negative side effects.

How to fix it

Identify the opening `<html>` tag in your site's main layout or theme file (sometimes called a template, master page, or head file).
Check whether the tag already has `xml:lang` — if so, replace it with `lang` (e.g., change `<html xml:lang="en">` to `<html lang="en">`).
If there is no language attribute at all, add `lang="xx"` where `xx` is the correct BCP 47 language code for your content (e.g., `en` for English, `en-US` for American English, `fr` for French, `de` for German, `es` for Spanish, `ja` for Japanese).
Save and publish the change, then load any page of your site and use your browser's 'View Page Source' to confirm the `<html>` tag now reads `<html lang="en">` (or your chosen code).
If your store serves multiple languages, ensure each language-specific page or template declares the correct `lang` value for that language — not just the default.
Re-run your accessibility scanner or browser extension (e.g., axe DevTools) to confirm the html-has-lang violation is resolved.

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 file list, under Layout, click theme.liquid (this is your site's master template).
Find the opening `<html` tag near the top of the file.
If it already contains `xml:lang`, replace it with `lang`. If neither exists, add `lang="{{ shop.locale }}"` — Shopify's Liquid variable that outputs the store's active locale code automatically.
The result should look like: `<html lang="{{ shop.locale }}">` (or a hard-coded code like `lang="en"` if you only serve one language).
Click Save. Verify by viewing your storefront source.

Full Shopify guide →Official Shopify docs ↗

How to fix html has lang on Shopify Plus

Same as Shopify: Online Store → Themes → Actions → Edit code → Layout/theme.liquid.
Update the `<html>` tag to include `lang="{{ shop.locale }}"` so it works across all expansion stores and locale-specific storefronts automatically.
For headless storefronts built on the Storefront API, add the `lang` attribute in your framework's root HTML document component (e.g., `_document.js` in Next.js).
Click Save and verify via View Source.

Full Shopify Plus guide →Official Shopify Plus docs ↗

How to fix html has lang on WooCommerce

The `lang` attribute in WordPress is typically output by the `language_attributes()` template tag in your theme's header.
In your WordPress admin, go to Appearance → Theme File Editor (or use an FTP/SFTP client).
Open your active theme's header.php file.
Find the `<html` tag. It should call `<html <?php language_attributes(); ?>>` — this is the correct WordPress way and automatically outputs the correct `lang` attribute based on Settings → General → Site Language.
If the tag instead has a hard-coded `xml:lang` or is missing the language altogether, replace it with `<html <?php language_attributes(); ?>>`.
Go to Settings → General and confirm the 'Site Language' is set to your primary language.
Save and verify via View Source. If using a page-builder theme (Elementor, Divi, etc.) that overrides header.php, check that theme's specific header template or use a plugin like 'Head, Footer and Post Injections' as a last resort.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix html has lang on BigCommerce

In your BigCommerce admin, go to Storefront → My Themes.
Click Customize on your active theme, then in the Theme Editor click Advanced → Edit Theme Files (or download the theme, edit locally, and re-upload).
Open templates/layout/base.html (the path may vary slightly by theme — look for the file containing the `<html>` tag).
Add or correct the `lang` attribute: `<html lang="en">` (replace `en` with your store's primary language code).
Save and upload, then verify via View Source on your storefront.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix html has lang on Wix

In Wix, the `lang` attribute on the `<html>` element is controlled by your site's language setting, not by hand-editing HTML.
Go to your Wix Dashboard → Settings → Multilingual (or Language & Region).
Set your primary site language. Wix will automatically inject the correct `lang` attribute into the HTML for that language.
If you use Wix Multilingual, each language version of your site gets its own `lang` tag automatically.
After saving, use View Source on your live site to confirm `<html lang="en">` (or your language) is present.
Note: Wix does not allow direct editing of the `<html>` tag — the language setting is the only control point.

Full Wix guide →Official Wix docs ↗

How to fix html has lang on Wix Studio

In Wix Studio, navigate to the site's Settings panel and set the primary language under Language & Region.
Wix Studio injects the `lang` attribute automatically based on this setting.
For multilingual sites, use the built-in Multilingual tool to ensure each locale gets the correct `lang` value.
Verify with View Source after publishing.

Full Wix Studio guide →Official Wix Studio docs ↗

How to fix html has lang on Squarespace

Squarespace automatically sets the `lang` attribute based on your region/language settings.
Go to Settings → Region & Language and ensure the correct language is selected.
Squarespace will inject `<html lang="xx">` accordingly on all pages.
If you need to override this (e.g., for a specific language not in the list), go to Settings → Advanced → Code Injection and add a small JavaScript snippet: `document.documentElement.lang = 'fr';` (replace `fr` with your code) — this is a workaround only.
Verify with View Source after saving.

Full Squarespace guide →Official Squarespace docs ↗

How to fix html has lang on Webflow

In the Webflow Designer, open your Project Settings (the gear icon in the top-left).
Go to the Publishing tab (or General tab depending on your Webflow version).
Find the 'Locale' or 'Language' field and set your primary language — Webflow uses this to set the `lang` attribute on the `<html>` tag.
For Webflow Localization (multi-language), each locale automatically gets its correct `lang` attribute.
Publish your site and verify via View Source.

Full Webflow guide →Official Webflow docs ↗

How to fix html has lang 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 the HTML Head section, check for any overrides, but the primary control is the locale set in Stores → Configuration → General → General → Locale Options → Locale.
The `lang` attribute is output in your theme's root template. Navigate to your theme directory (e.g., app/design/frontend/Vendor/theme/Magento_Theme/templates/root.phtml) and verify the `<html>` tag uses `<?php /* @escapeNotVerified */ echo $htmlAttributes ?>` or directly includes the lang attribute.
If the tag is missing `lang`, add it: `<html lang="<?= $block->escapeHtmlAttr($currentLocale) ?>">` — you may need to pass the locale from your layout XML or block class.
Clear the Magento cache (System → Cache Management → Flush Magento Cache) and verify via View Source.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

How to fix html has lang on Magento Open Source

Follow the same steps as Adobe Commerce (Magento) above.
The root template is located at app/design/frontend/[Vendor]/[theme]/Magento_Theme/templates/root.phtml.
Set the locale in Stores → Configuration → General → General → Locale Options.
Flush cache after saving changes.

Full Magento Open Source guide →Official Magento Open Source docs ↗

How to fix html has lang on PrestaShop

In your PrestaShop admin, go to International → Translations → Languages to confirm your default language is set correctly.
Open your active theme's layout file — typically themes/[your-theme]/templates/layouts/layout-full-width.tpl or layout-both-columns.tpl.
Find the `<html>` tag and ensure it reads `<html lang="{$language.iso_code}">` — PrestaShop provides the `{$language.iso_code}` Smarty variable for this.
Save and verify via View Source.

Full PrestaShop guide →Official PrestaShop docs ↗

How to fix html has lang on OpenCart

In your OpenCart admin, go to System → Settings → Store and ensure the Language is correctly set.
Open your active theme's main template file, typically catalog/view/theme/[your-theme]/template/common/header.twig.
Find the `<html>` tag and update it to: `<html lang="{{ lang }}">` (OpenCart passes a lang variable to templates).
Save and verify via View Source.

Full OpenCart guide →Official OpenCart docs ↗

How to fix html has lang on Ghost

In your Ghost admin, go to Settings → General and set the Publication Language to the correct BCP 47 code (e.g., `en`).
Ghost automatically injects `<html lang="{{@site.locale}}">` in the default Casper theme and most modern themes.
If your custom theme is missing it, edit your theme's default.hbs file and update the `<html>` tag to `<html lang="{{@site.locale}}">`, then re-upload the theme ZIP.
Verify via View Source after saving.

Full Ghost guide →Official Ghost docs ↗

How to fix html has lang on Next.js

Open pages/_document.js (Pages Router) or app/layout.js (App Router).
For Pages Router: In your `<Html>` component, add the lang prop: `<Html lang="en">`.
For App Router: In your root layout.js, set the lang attribute on the html element: `export default function RootLayout({ children }) { return <html lang="en">{children}</html>; }`
For i18n sites using next.config.js internationalization, you can use the locale from the router: `const { locale } = useRouter();` and pass it as the lang value.
Deploy and verify via View Source.

Full Next.js guide →Official Next.js docs ↗

How to fix html has lang on Headless / Custom (I build in code)

Locate the file that renders the root HTML document — typically index.html, _document.js, app.html, layout.html, or your framework's equivalent.
Find the `<html>` tag and add a `lang` attribute with the correct BCP 47 language code, e.g., `<html lang="en">`.
If you serve multiple languages, set the lang attribute dynamically based on the current locale/route.
Remove any `xml:lang` attribute if present (it is not valid in HTML5).
Deploy and verify via View Source or browser DevTools.

Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find html has lang — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Html has lang?

Why does html has lang matter?

How do I fix html has lang?