← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 6 of 9

HTML Language Codes

Imagine walking up to a group of friends who are speaking a language you do not understand. You would have to listen for a few minutes just to figure out what language it is. Browsers and screen readers have that exact issue. When they load a webpage, they have to read the text to figure out what language it is written in. The HTML lang attribute solves this. It is like a language tag on your webpage. By writing simple two-letter codes, you tell the browser, screen readers, and search engines exactly what language you are using so they can render accents, pronounce words, and rank your pages correctly.

In this page:

  1. The lang Attribute
  2. Standard Two-Letter Language Codes
  3. Specifying Regional Language Variants
  4. Accessibility and Language Codes
  5. SEO and Translation Benefits

The lang Attribute

The lang attribute is used inside your opening html tag to declare the primary language of your webpage, which is essential for accessibility and search engine optimization.

Note: Always declare the primary language of your page inside your opening html tag.
Warning: Failing to set the correct language tag can cause screen readers to read your text with an incorrect pronunciation.

Example: The lang Attribute

markup 
<html lang="en">
</html>

Standard Two-Letter Language Codes

HTML uses standard two-letter ISO 639-1 language codes (like en for English, es for Spanish, or de for German) to define webpage languages.

Note: Always use lowercase letters when writing your two-letter language codes.
Warning: Using custom, non-standard language codes can cause browser rendering and translation errors.

Example: Standard Two-Letter Language Codes

markup 
<html lang="es">
</html>

Specifying Regional Language Variants

Languages often have regional variations. You can specify these variations by appending a two-letter ISO 3166-1 country code (like en-US for American English, or en-GB for British English) to your language tag.

Note: Use regional language tags to customize your pricing tables, dates, and spelling for specific countries.
Warning: Write the country code in uppercase letters, separated from the language code by a hyphen.

Example: Specifying Regional Language Variants

markup 
<html lang="en-US">
</html>

Accessibility and Language Codes

When visually impaired users open a webpage, screen readers use your lang attribute to select the correct pronunciation voice. Declaring correct language codes is essential for keeping your site accessible.

Note: If a specific paragraph or word is written in a different language, apply a local lang attribute to that tag.
Warning: Leaving out language tags can cause screen readers to read foreign text using default English pronunciation, making it unreadable.

Example: Accessibility and Language Codes

markup 
<p lang="fr">Bonjour tout le monde</p>

SEO and Translation Benefits

Search engines use your lang attribute to serve your pages to users in relevant countries. Browsers also use this tag to display translation banners automatically when users load pages in other languages.

Note: Declare language tags to help search engines index your pages for international search results.
Warning: Using incorrect language tags can confuse search bots and lower your page ranking.

Example: SEO and Translation Benefits

markup 
<html lang="de">
  <title>Willkommen</title>
</html>
Live Example
Related Topics

HTML URL Encode Reference · HTML HTTP Messages · HTML Events · HTML HTTP Methods

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the lang attribute inside your opening html tag.
  2. Using non-standard or misspelled language codes that browsers fail to parse.
  3. Writing country codes in lowercase letters or separating them with underscores instead of hyphens.
Chapter Summary
  • The lang attribute declares the primary language of your webpage inside your opening html tag.
  • Use standard two-letter ISO 639-1 language codes, appending a two-letter country code for regional variations.
  • Apply local lang attributes to specific tags to help screen readers pronounce foreign words correctly.
Browser Support

Standard language codes and attributes are natively supported by all modern web browsers.

🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson HTML URL Encode Reference Next Lesson → HTML HTTP Messages

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.