How to obtain lang attribute in HTML using JavaScript?

javascript

prompt-engineering

event-listeners

accessibility

byNikita Barsukov·Nov 17, 2024

Quickly fetch the lang attribute applying document.documentElement.lang for the webpage's language, or use element.lang for an explicit element.

console.log(document.documentElement.lang); // Outputs the document's language, e.g., "en"
console.log(document.querySelector('selector').lang); // Outputs a specific element's language

Knowing the language settings of a document is a frequent requirement in web development. Let's dive deeper to understand the comprehensive usage, potential issues and practical solutions.

Detailed explanation

Accessing lang attribute various ways

Just another day in the DOM - here's an alternate way to fetch the language attribute using getElementsByTagName:

const htmlLang = document.getElementsByTagName('html')[0].getAttribute('lang');
console.log(htmlLang); // "Hello there, the DOM's saying it's 'en'!"

For an XML-fond document served as application/xhtml+xml, you could retrieve xml:lang:

const xhtmlLang = document.documentElement.getAttribute('xml:lang');
console.log(xhtmlLang); // Spits out the xml:lang attribute, if any

The trifecta: Accessibility, SEO, and Internationalization

The lang attribute is your passport to accessibility and SEO goodness. It guides screen readers while also helping search engines understand your document's intended audience.

Dynamic changes - because, why not?

Track or alter the lang attribute dynamically, either via JavaScript event listeners or frameworks like Angular, React, or Vue.js.

document.documentElement.addEventListener('change', function() {
  console.log("Whoa, something changed. Let's handle this!");
});

Common issues and their solutions

'Lang' attribute is pulling a Houdini on you? It might be incorrectly set or missing altogether:

if (!document.documentElement.hasAttribute('lang')) {
  console.error("'Lang' attribute skipped town. Can't find it on the <html> element.");
}

Received an 'invalid' error stamp? Ensure you adhere to the BCP 47 language code format.

Edge Case Intrigue and Their Solutions

In more complex scripts, specific elements may override the document setting with their own lang attribute. Get their language attribute like so:

const elementLang = document.querySelector('.example').getAttribute('lang');
console.log(elementLang); // "Gotcha' example, you're speaking 'fr'!"

Power to Real-World Applications

Tailor users' experiences, support task-based language setting, maintain multilingual functionality, and reach a broader audience - all powered by the simple lang attribute.

explain-codes / Javascript / How to obtain lang attribute in HTML using JavaScript?

Linked

How to get the `` tag HTML with JavaScript / jQuery?



Javascript for detecting browser language preference



Html Submit-button: Different value / button-text?



Converting HTML string into DOM elements?



Why does Chrome incorrectly determine page is in a different language and offer to translate?

