Modern browsers can detect content written in different languages and will offer to translate the page into that language. To prevent the browser from guessing the language of your page, it is best practice to specify the language of your content.
In this tutorial:
Required knowledge:
Latin, anyone?
The following code is an excerpt from your average web page:
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p> </body> </html>
If you copy the above code into an HTML document and then open it in Chrome, Chrome will offer to translate the Latin into English.
Not today, Brutus
To prevent that, you can tell the browser to continue displaying the page in English by adding the language attribute to the <html> tag:
<html lang="en">
Parlez-vous français?
You can declare the language of a word or phrase in a document as follows:
<p>A font that has no ligatures is known as a <span lang="fr">sans serif</span> font.</p>
And now for some fancy CSS
We can use the language attribute as a selector, making all the French words and phrases stand out; see the Advanced CSS selectors tutorial for more.
References:
- Ishida, R. (2021). Declaring language in HTML. [online] w3.org. Available at: https://www.w3.org/International/questions/qa-html-language-declarations (Accessed: 16 August 2023).
- Ishida, R. (2016). Why use the language attribute? [online] w3.org. Available at: https://www.w3.org/International/questions/qa-lang-why (Accessed: 16 August 2023).
- Cunningham, A. and Ishida, R. (no date) Styling using language attributes. Available at: https://www.w3.org/International/questions/qa-css-lang (Accessed: 30 August 2023).