HTML lang Attribute: How it Works with Examples

The HTML lang attribute tells browsers and tools what language the page uses. It helps users and search engines understand the content better.

What Is the HTML lang Attribute?

The lang attribute tells the browser which language the page or element uses. It helps screen readers and search engines know the language in use. You can add it to the <html> tag or to any other tag when needed.

Search engines use it to index the page. Screen readers use it to choose the right voice. Some browsers also pick the right fonts.

You can use it with the <html> tag and set the attribute with the language code. You can also set it on other elements if they use a different language. The code must match a known language code format.

Here are some basic language codes you can use:

• en means English
• fr means French
• es means Spanish
• ar means Arabic
• zh means Chinese

Some codes have two parts. en-US means English in the US. fr-CA means French in Canada.

You do not need to set the lang on every element. But you must set it when a section uses a different language from the rest of the page.

For example, a quote in Arabic on an English page must use lang="ar" on that element.

If your page does not use the lang attribute, screen readers may guess the wrong language. That can confuse users. Search engines may also miss the correct region or language of your site. The wrong language code can break voice settings and font styles.

Examples

Set Language on Whole Page

<!DOCTYPE html>
<html lang="en">
  <head><title>My Site</title></head>
  <body><p>This is a full English page.</p></body>
</html>

This example sets English for the full page. The browser and screen readers know that the full page uses English.

Use Arabic in One Element

<p>This is English text. <span lang="ar">هذه جملة عربية.</span></p>

The page uses English, but one part uses Arabic. The lang="ar" tells the browser and tools to switch language just for that part.

Use Regional Language Code:

<html lang="en-GB">
  <body><p>This page follows British English rules and not American spelling.</p></body>
</html>

This code uses en-GB to set British English. The tools now expect British grammar and spelling for the full page.

Wrong Language Code:

<html lang="xx">
  <body><p>This language code is not valid.</p></body>
</html>

The code xx is not a known language. Screen readers cannot pick the right voice, and search engines may skip this page.

Wrapping Up

In this article, you learned what the lang attribute means and how it helps your page. You also understood where to place it with examples.

Here is a quick recap:

• Use the lang attribute to tell the page language.
• Set it on the <html> tag or on parts with other languages.
• Always use correct codes like en, fr, ar, or en-US.
• Wrong codes can harm the search and the access tools.

FAQs

<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
  <body>Content here</body>
</html>

<html lang="fr">

<html lang="es">

<p lang="ar">مرحبا بك</p>

Similar Reads