×

html · level 3 · unit 7 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

lang works on any element, and translate="no" protects names.

lang on <html> sets the language for the whole page. When a few words come from another language, put lang on the element around them, like <span lang="fr">bon appétit</span>. Screen readers then switch voice and say them properly.

Browsers offer : one click and the page appears in another language. That is handy, until it turns your café, Bread and Butter, into Pain et Beurre.

Add translate="no" to anything that must stay as written, such as names, product codes and code samples. Everything else still translates.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bread and Butter Café</title>
  </head>
  <body>
    <h1 translate="no">Bread and Butter</h1>
    <p>Our motto is <span lang="fr">bon appétit</span>, which means enjoy your meal.</p>
    <p>Ask for the <span translate="no">Big Breakfast</span>, our best seller.</p>
  </body>
</html>

Press show my page to see it here.

Use the same language codes as on <html>, like fr, cy or es.