A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore correct markup for mixed-language quotes using a short example that you can inspect and change.
The Idea in Plain English
The lang attribute tells browsers and assistive tools which language a passage is in. Use a valid BCP 47 language tag and switch it on smaller elements when the language changes.
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
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<html lang="en">
<body>
<p>Welcome to our book club.</p>
<p lang="fr">Bienvenue au club de lecture.</p>
</body>
</html>What Each Part Does
- A paragraph keeps one idea together as readable text.
- The html root contains the document, and lang identifies its main language.
- The body contains the material a visitor normally sees.
- lang identifies the natural language for text-to-speech and language tools.
Screen readers can choose the correct pronunciation, and language-sensitive tools have a better clue about the text.
Try It Yourself
Change one paragraph to another language, then update its lang code and inspect accessibility tools.
Common Beginner Mistakes
- Using a country name as a language code or applying lang="en" to a French passage.
- 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 lang attribute tells browsers and assistive tools which language a passage is in. Use a valid BCP 47 language tag and switch it on smaller elements when the language changes.
- Screen readers can choose the correct pronunciation, and language-sensitive tools have a better clue about the text.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.