The language of every page needs to be set programmatically as an attribute of the HTML element in your code. For a page that is primarily in English, that would look like this:
<html lang="en">
There are numerous other language codes that could be used there instead if the primary language of the page is different than English. These codes are defined by the ISO 639-1 standard and are the two-digit codes listed on the Codes for the Representation of Names of Languages from the Library of Congress. For example, Spanish is "es" and Chinese is "zh".
In addition to the language set at the page level, anytime the page language changes in the content, you also need to specify the language change. You do this by placing that same lang attribute on an element that contains the new text. For example, the following is a language change in the middle of a sentence:
<p>Pablo Picasso said <span lang="es">"La acción es la clave fundamental para todo éxito"</span> which translates to "Action is the foundational key to all success."</p>
Listen to these audio examples to hear the difference between elements without and with a set language:
It's important to remember that this only applies to the content inside that element, so if you have multiple paragraphs in a row that are in a different language, each paragraph would need to have the lang element added to it, or you could put all of the paragraphs inside a container and apply the language attribute to that. So you could do this:
<p lang="en">Paragraph 1</p>
<p lang="en">Paragraph 2</p>
Or you could do this:
<div lang="en">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Also, it is possible to add a regional extension to the language code, such as "en-uk" to specify British English as opposed to American English (en-us). Unless you have a specific reason to do so, do not set the regional dialect as this can interfere with screen reader users.
