'How to change a HTML page into a different language?

My website is currently in English, and I would like to offer a possibility to read it in Dutch. So I'm translating my website and there will be 2 different languages available.

It's built with HTML, CSS and JS (those are my languages right now, JS is not that strong yet). The website doesn't change often, and I'm not writing a blog or anything similar for now.

  • What would be the best approach in translating them?
  • Will there be problems with SEO and duplicated content if I upload
    the same page + content in a different language?
  • How do I write it in HTML?
  • Is there a way to automatically detect the right language?

Thanks!

html


Solution 1:[1]

There are many ways to do that. One of these is to keep both text contents inside the HTML tag with data-something then later pick it using Javascript+CSS when necessary.

var currentlanguage = 'en'
function changelang(){
if (currentlanguage == 'en'){
document.head.insertAdjacentHTML('beforeend', '<style>.bilanguage::after {content: attr(data-du);}</style>');
currentlanguage = 'du'
} else {
document.head.insertAdjacentHTML('beforeend', '<style>.bilanguage::after {content: attr(data-en);}</style>');
currentlanguage = 'en'
}
}
.bilanguage::after {
  content: attr(data-en);
}
<h1 class='bilanguage' data-en='Title' data-du='Titel'></h1>
<p class='bilanguage' data-en='The quick brown fox jumps over the lazy dog.' data-du='De snelle bruine vos springt over de luie hond heen.'></p>
<button type="button" class='bilanguage' onclick='changelang()' data-en='Change Language' data-du='Taal wijzigen '></button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions