Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
Server-Side Tutorials

Server-Side Tutorials

CC++C#JavaPHPPythonNode.jsExpress
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML language Attribute

Posted in HTML Tutorial
Updated on Oct 29, 2024
By Mari Selvan
👁️ 36 - Views
⏳ 4 mins
💬 1 Comment
HTML language Attribute

Photo Credit to CodeToFun

🙋 Introduction

The language attribute is used in HTML to specify the primary language of the content within the <html> tag.

This attribute aids in web accessibility and search engine optimization by indicating the language of the text to browsers and other software.

🎯 Purpose of language

The primary purpose of the language attribute is to declare the language of the document's content. Search engines use this information to properly index and rank web pages, and it also helps assistive technologies provide better accessibility features, such as text-to-speech conversion.

💎 Values

The language attribute accepts language codes as values, which conform to the ISO 639-1 standard. Common values include:

  • en: English
  • fr: French
  • de: German
  • es: Spanish
  • ja: Japanese
  • zh: Chinese
  • and many more...

📄 Implementation Example:

Here's a simple example of how to use the language attribute in an HTML document:

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample paragraph.</p>
</body>
</html>

🧠 How it Works

In this example, the language attribute is set to "en" (English) in the opening <html> tag, indicating that the content of the document is primarily in English.

🔄 Dynamic Values with JavaScript

While the language attribute is typically static and set in the HTML, you can also dynamically change it using JavaScript if needed. Here's a basic example:

index.html
Copied
Copy To Clipboard
<script>
  // Dynamically set the language attribute
  document.documentElement.lang = "fr";
</script>

🧠 How it Works

In this script, the lang property of the <html> element is set to "fr" (French). This could be useful in situations where the language of the content changes based on user interactions or other dynamic factors.

🏆 Best Practices

  • Always include the language attribute in your HTML documents to specify the primary language of the content.
  • Use the appropriate language code that corresponds to the language used in your content. This helps ensure accurate interpretation by browsers and assistive technologies.
  • Consider using the lang attribute on specific elements within the document to denote language changes within the content, especially in multilingual documents.

🎉 Conclusion

The language attribute is a valuable tool for indicating the primary language of HTML documents.

By using this attribute correctly, you can improve the accessibility and search engine optimization of your web pages, ultimately enhancing the user experience for all visitors.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Author
Mari Selvan
3 months ago

If you have any doubts regarding this article (HTML language Attribute), please comment here. I will help you immediately.

0
Reply
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy