HTML Lang Codes

🌍 What are Language Codes?

HTML language codes specify the language of web content. They help browsers, search engines, and screen readers understand and properly handle your content.


<!-- English page -->
<html lang="en">

<!-- Spanish content -->
<p lang="es">Hola mundo</p>

<!-- French section -->
<div lang="fr">Bonjour le monde</div>

Common Language Codes

🇺🇸

English

Most common web language

lang="en"
lang="en-US" (American)
lang="en-GB" (British)

🇪🇸

Spanish

Second most used language

lang="es"
lang="es-ES" (Spain)
lang="es-MX" (Mexico)

🇫🇷

French

International language

lang="fr"
lang="fr-FR" (France)
lang="fr-CA" (Canada)

🇩🇪

German

European business language

lang="de"
lang="de-DE" (Germany)
lang="de-AT" (Austria)

🔹 Language Code Format

Language codes follow the ISO 639-1 standard:

Format: language-country

language: 2-letter language code (required)
country: 2-letter country code (optional)

<!-- Basic language -->
<html lang="en">

<!-- Language with region -->
<html lang="en-US">

<!-- Multiple languages in one page -->
<html lang="en">
<body>
    <h1>Welcome</h1>
    <p lang="es">Bienvenidos</p>
    <p lang="fr">Bienvenue</p>
</body>
</html>

🔹 Complete Language Code Reference

Here are the most commonly used language codes:

Language	Code	Example
English	en	Hello World
Spanish	es	Hola Mundo
French	fr	Bonjour le Monde
German	de	Hallo Welt
Italian	it	Ciao Mondo
Portuguese	pt	Olá Mundo
Chinese	zh	你好世界
Japanese	ja	こんにちは世界

🔹 Regional Variations

Use country codes for regional language differences:

🔸 English Variations

<!-- American English -->
<html lang="en-US">
<p>Color, center, organize</p>

<!-- British English -->
<html lang="en-GB">
<p>Colour, centre, organise</p>

<!-- Australian English -->
<html lang="en-AU">
<p>G'day mate!</p>

🔸 Spanish Variations

<!-- Spain Spanish -->
<p lang="es-ES">Ordenador</p>

<!-- Mexican Spanish -->
<p lang="es-MX">Computadora</p>

<!-- Argentinian Spanish -->
<p lang="es-AR">¡Che, qué tal!</p>

🔹 Accessibility Benefits

Language codes improve accessibility and SEO:

Benefits:

Screen Readers: Pronounce text correctly
Translation: Browser auto-translate features
SEO: Search engines understand content language
Spell Check: Use correct dictionary

<!-- Multilingual page example -->
<html lang="en">
<head>
    <title>Multilingual Website</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    
    <section lang="es">
        <h2>Sección en Español</h2>
        <p>Este contenido está en español.</p>
    </section>
    
    <section lang="fr">
        <h2>Section Française</h2>
        <p>Ce contenu est en français.</p>
    </section>
</body>
</html>