📅 最后修改于: 2023-12-03 15:30:37.502000 🧑 作者: Mango
When developing a multilingual website, language translation is an essential component. In this guide, we will explore the basics of English-French translation in HTML.
To markup language content as French or English, we can use the lang attribute. This attribute should be placed inside the opening <html> tag.
<html lang="fr">
<!-- French content here -->
</html>
<html lang="en">
<!-- English content here -->
</html>
To translate static text on a website, we can use a combination of HTML and CSS to style the text based on the language.
<div class="en-fr">
<span lang="en">Hello</span>
<span lang="fr">Bonjour</span>
</div>
.en-fr span {
display: inline-block;
margin-right: 5px;
}
.en-fr [lang="en"] {
color: blue;
}
.en-fr [lang="fr"] {
color: red;
}
In this example, the text "Hello" and "Bonjour" is displayed side-by-side, with the English text styled in blue and French text in red.
When translating attributes, we can use the dir attribute to indicate the direction of text. For example, to translate the placeholder attribute of an input field:
<input type="text" placeholder="First name" dir="auto" />
In this case, the dir attribute is set to "auto", which means the direction of the text will depend on the language. This way, the placeholder text will be displayed correctly in both English and French languages.
In this guide, we explored the basics of English-French translation in HTML. By following these tips, you can make your multilingual websites more accessible to users of different languages.