How to localize a simple HTML website page in my case?

Question

I am NOT developing any web service application which contain client side and backend server side (like java EE application or Ruby on Rai

Answer 1

Nowadays I would do it without jQuery. First I would hide all nodes with a lang attribute and show only the default language. This can be done in CSS:

[lang] {
  display: none;
}
[lang=en] {
  display: unset;
}

Without JavaScript enabled the document is not localized but at least readable in the default language.

Next I would use some JavaScript to show the correct language, if it is in the list of supported languages.

function localize (language)
{
  if (['de'].includes(language)) {
    let lang = ':lang(' + language + ')';
    let hide = '[lang]:not(' + lang + ')';
    document.querySelectorAll(hide).forEach(function (node) {
      node.style.display = 'none';
    });
    let show = '[lang]' + lang;
    document.querySelectorAll(show).forEach(function (node) {
      node.style.display = 'unset';
    });
  }
}

You can either use a select box or the browser language.

localize(window.navigator.language);