A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore translatable text and the translate attribute using a short example that you can inspect and change.
The Idea in Plain English
The translate attribute tells translation tools whether text content and certain attributes should be translated. translate="no" is useful for brand names, product identifiers or codes.
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.
<p>Meet the <span translate="no">SkyRunner X2</span> robot.</p>
<p translate="yes">This robot can follow a line.</p>What Each Part Does
- A paragraph keeps one idea together as readable text.
- A span groups a small inline piece of text.
A translation service may leave a marked name unchanged while translating surrounding sentences.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: display a mixed-language document and inspect its behavior focused on Translatable Text and the Translate Attribute, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Using translate="no" on a whole page that people actually need translated.
- 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 translate attribute tells translation tools whether text content and certain attributes should be translated. translate="no" is useful for brand names, product identifiers or codes.
- A translation service may leave a marked name unchanged while translating surrounding sentences.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.