As someone who recently returned to the US after living in Germany for a year and a half, and spent the majority of my time there learning German, I was immediately interested in a particular line I saw consistently in the head section of HTML.
That would be:
<html lang ="en">
Thoughts immediately popped into my brain. Could I write in another language? Which languages? How would this affect syntax and other HTML functionality?
I knew I had to know more.
After some simple googling, MDN Web Docs came to the rescue with this information,
"The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47)"[1].
Okay, but how does that help us?
We now know which language this HTML code is in. As indicated in the above example, the language is English.
There is also the option for language subclasses, for example the below code would be considered British English and read in a British accent by a screen reader, if supported [2].
<html lang="en-GB">
But this extends far beyond English. Many languages are supported!
Language is indicated by the language subtag, which is a 2 or 3 character code. This code only indicates the basic language[1]. But as seen from [2] there are also options for subclasses such as British English ("en-GB") or US English ("en-US").
Another interesting piece that I discovered is that the 2 or 3 character code for each language is not the language as we would write it in English, but rather the language as it would be written in that language itself. IE., German's language subtag is "de" for Deutsch, which is the word German written in German. Spanish's language subtag is "es" for Español. And it goes on and on!
Furthermore, languages can be changed throughout the document, allowing the user to indicate a portion of text written in another language. In this case the lang tag can be embedded in other tags [2]. This could be especially helpful in a website with a portion in another language, or even a single word in another language contained within a larger text.
These language tags do not just help the initial software developer who writes the code, and all others who read it; it also helps accessibility, allowing a screen reader to know what language the webpage is written in and provide the best possible experience for someone using a screen reader [2].
Additionally, as indicated in [3] language identification allows a number of things to happen automatically. These include, "changing the look and behavior of a page, to extracting information, to changing the way that an application works" [3]. This in turn gives the user the best possible experience.
This post contains a basic overview of some of the benefits of using the language tag, as well as some of its functionality. There is still a wealth of information and details regarding the lang tag out there, and it is my hope in the future to continue to delve into this topic.
(Cross posted on Medium at: A brief introduction to the lang tag and its importance).
References:
[1] Author unknown. "HTML : lang." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang (accessed June 11, 2023).
[2] Author unknown. "Language Tags in HTML." PennState Accessibility: Accessibility and Usability at Penn State. https://accessibility.psu.edu/foreignlanguages/langtaghtml/#:~:text=The%20LANG%20tag%20(i.e.%20the,WCAG%202.0%20Guideline%203.1 (accessed June 11, 2023).
[3] Author unknown. "Why use the language attribute?" W3C Internationalization: Making the World Wide Web worldwide. https://www.w3.org/International/questions/qa-lang-why. (accessed June 11, 2023).
Top comments (0)