The HTML lang attribute tells browsers and tools what language the page uses. It helps users and search engines understand the content better.
Table of Content
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:
enmeans Englishfrmeans Frenchesmeans Spanisharmeans Arabiczhmeans 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
langattribute 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, oren-US. - Wrong codes can harm the search and the access tools.
FAQs
What is the purpose of the <html lang> attribute in HTML?
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>Content here</body>
</html>
How do I add the <lang> attribute to an HTML document?
<html lang="fr">Why is the <lang> attribute important for SEO and screen readers?
<html lang="es">Can I use <lang> on other tags besides <html>?
<p lang="ar">مرحبا بك</p>Similar Reads
The HTML ARIA attributes help users with disabilities use websites. These attributes describe roles and states for tools. Understand the…
HTML link attributes tell the browser how a link works. They set where the link goes, how it opens, and…
HTML is the main content for every web page. It helps you structure text, links, and media. You can build…
The HTML blockquote tag defines a long quote from another source. It sets the quoted text apart from other content.…
The <ins> tag in HTML shows text that the author added after the original content. This helps readers know what…
HTML select tag and option tags let users pick values in a form. You use them to create dropdowns. The…
The <footer> tag defines a footer section in HTML. It creates a clear endpoint for a page or section. Browsers…
The HTML button tag creates interactive controls on a web page. You can use this element to trigger actions or…
The HTML textarea tag gives users space to enter longer messages. This element helps build forms that accept feedback, comments,…
The HTML input tag lets you add fields for user data in forms. You use this tag to collect text,…
