lang
Defines the language of the document or a specific piece of content.
Platform under construction
HTML Language and Direction Attributes
Learn lang, dir, translate as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.
Language
Language attributes tell software how text should be understood.
The lang attribute tells browsers, search engines, spellcheckers, translation tools and assistive technology what language the content uses. The dir attribute controls writing direction for languages that read left-to-right or right-to-left.
These attributes are easy to forget because they are not visually dramatic. Still, they are part of professional HTML because they help machines read the page correctly.
Attribute group:
lang, dir, translate. Language and writing direction for browsers, translation tools and assistive technology. What belongs here
Learn attributes by purpose, not by memorizing random names.
dir
Defines text direction: ltr, rtl or auto.
translate
Hints whether text should be translated by translation tools.
hreflang
Describes the language of a linked resource.
Syntax in context
Set the main language on the html element.
Use a short language code such as en or nl. When a small fragment uses another language, set lang on that fragment.
<html lang="en">
<body>
<p>Learn HTML in clear English.</p>
<p lang="nl">Deze zin is Nederlands.</p>
<p dir="rtl" lang="ar">مثال قصير لاتجاه النص من اليمين إلى اليسار.</p>
</body>
</html>
Good versus weak
Small attribute choices can change behavior, accessibility and security.
Good
<html lang="en">
<body>
<p>Learn HTML in clear English.</p>
<p lang="nl">Deze zin is Nederlands.</p>
<p dir="rtl" lang="ar">مثال قصير لاتجاه النص من اليمين إلى اليسار.</p>
</body>
</html>
Weak
<html>
<body>
<p>English, Nederlands and Deutsch mixed without language hints.</p>
</body>
</html>
Rules that matter
Use these rules before publishing real HTML.
Set lang once
Every real document should start with a correct language on html.
Mark language changes
Use lang on a sentence or phrase when it changes language.
Use dir only when needed
Do not force direction unless the language or content needs it.
Use rtl deliberately
For right-to-left text, dir="rtl" or dir="auto" can prevent punctuation and layout confusion.
Keep codes valid
Use normal language tags such as en, nl, de or en-GB.
Production thinking
Attributes are tiny pieces of HTML with real product impact.
Why does this matter?
Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.
Accessibility
Screen readers use language information to choose pronunciation rules. Wrong or missing lang can make text sound broken.
Production note
International websites need language attributes for SEO, translation, accessibility and content quality.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Language inside one document
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?