Language Tags in HTML — The lang Attribute Guide

Q: Language Tags in HTML — The lang Attribute Guide

## The HTML lang Attribute The lang attribute is one of the most important yet frequently misused attributes in HTML. It tells browsers, screen readers, and search engines which language the content is written in. ### Setting the Page Language Every HTML document should declare its primary language on the element: html ... ... For right-to-left languages, add the dir attribute: html

How to use the HTML lang attribute correctly for accessibility, SEO, and browser behavior including best practices and common mistakes.

Web Development

Detailed Explanation

The HTML `lang` Attribute

The lang attribute is one of the most important yet frequently misused attributes in HTML. It tells browsers, screen readers, and search engines which language the content is written in.

Setting the Page Language

Every HTML document should declare its primary language on the <html> element:

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

For right-to-left languages, add the dir attribute:

<html lang="ar" dir="rtl">

Marking Language Changes Within a Page

When content switches language mid-page, mark the element:

<p>The French word <span lang="fr">bonjour</span> means hello.</p>
<blockquote lang="de">
  Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.
</blockquote>

Why `lang` Matters

Screen readers change pronunciation rules based on the lang attribute. A screen reader will pronounce "chat" differently in English (lang="en") versus French (lang="fr")
Browsers apply language-specific typographic rules (quotation marks, hyphenation, spell checking)
Search engines use lang (along with hreflang) to serve the correct language version to users
CSS can target specific languages with the :lang() pseudo-class:

:lang(ja) { font-family: "Noto Sans JP", sans-serif; }
:lang(ar) { font-family: "Noto Sans Arabic", sans-serif; }

Common Mistakes

Using country codes instead of language codes (lang="uk" is Ukrainian, not English-UK — use lang="en-GB")
Forgetting to update lang when the page content is dynamically translated
Not marking inline language switches for accessibility
Using invalid codes (e.g., lang="english" instead of lang="en")

Use Case

Every web page needs a correct lang attribute for accessibility compliance (WCAG 2.1 Success Criterion 3.1.1), proper screen reader pronunciation, browser spell-checking, and SEO. Multilingual sites must also mark language changes within content.

Try It — Language Code Reference

Open full tool →