With your DOCTYPE declaration in place, everything else in your document is going to be parsed as that version of HTML. So everything else can be contained in the aptly named <html> tag. The <html> tag is known as the root element and serves as the signal to your browser to start expecting the HTML code. Additionally, the <html> tag can handle another useful task! It can declare what language a webpage is written in.
Setting the language improves the effectiveness of browser translators and screen readers and can help dictate different styling rules that may be required for the language (such as a different font for different alphabets). The language attribute also comes in handy for search engines looking for content. For instance, if you type in a word or phrase in English, your search results will typically be websites that are also in English.
Here are some examples of setting languages in your HTML document:
English
<!DOCTYPE html>
<html lang="en">
</html>
Spanish
<!DOCTYPE html>
<html lang="es">
</html>
French
<!DOCTYPE html>
<html lang="fr">
</html>
In addition to defining the language your page content will be in, you can also specify the country. For example, Spanish in Spain versus Spanish in Mexico.
The Spanish language spoken in Spain is called Castilian Spanish and is commonly spoken in Northern and Central Spain.
<!DOCTYPE html>
<html lang="es-ES">
</html>
The Spanish heard in Mexico is referred to as Latin American Spanish and is commonly spoken in Central and South America.
<!DOCTYPE html>
<html lang="es-MX">
</html>
Telling your browser which version of Spanish to expect will help it distinguish between the vocabulary and syntax differences in each form of Spanish.
The lists of language codes and country codes is quite extensive. You can find a complete list on the web by searching for "html lang codes" or "html country codes".
Question
Why is adding a language attribute to your HTML tag important?
Adding a language tag improves your site's searchability on the web and assists screen readers in knowing what language to translate your page to.
