HTML <html> Element and the lang Attribute

The html element wraps the document. Its lang attribute tells browsers and assistive tools which language the page mainly uses.

What You Need to Know

Use a real language tag such as en, en-US, or fr. If one paragraph switches language, put lang on that paragraph rather than changing the entire document.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

<!doctype html>
<html lang="en">
    <head><title>Language Example</title>
    </head>
    <body>
        <p>Good morning!</p>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• The title names the page in the browser tab. It is different from the heading shown on the page.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “Language Example”.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Change lang to another real language code and explain when that would be appropriate.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Leaving lang unset on a page or using a made-up language code.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• The html element wraps the document.
• The html element holds the complete page and usually names its language.
• Use a real language tag such as en, en-US, or fr. If one paragraph switches language, put lang on that paragraph rather than changing the entire document.