A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: missing document language. This guide shows you what to look for, a concrete fix, and how to check that it worked.
The Idea in Plain English
The html lang attribute identifies the language of the page so speech tools can pronounce its content more accurately.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.
<!-- Problem -->
<html><head><title>Hello</title></head><body><h1>Hello</h1></body></html>
<!-- Corrected example -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Hello</title></head>
<body><h1>Hello</h1></body>
</html>What Each Part Does
- The title gives the document a name in tabs and other browser surfaces.
- The h1 identifies the principal page heading.
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- lang identifies the natural language for text-to-speech and language tools.
- charset identifies the character encoding used by the document.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Try It Yourself
Inspect the html element and test pronunciation in a screen reader.
Common Beginner Mistakes
- Check the underlying cause before changing unrelated tags.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- The html lang attribute identifies the language of the page so speech tools can pronounce its content more accurately.
- Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.