How to properly design a page where content can be…

The lang attribute on the <html> element is used for multilingual pages to specify the main language of the page. For individual elements with content in another language, the lang attribute can be used directly on those elements.

It is also important to use the <meta charset="UTF-8"> meta tag for proper support of characters from different languages.

For search engines and ease of navigation, <link rel="alternate" hreflang="<language_code>" href="<URL_of_page_in_that_language>"> tags can be used in the <head> section to indicate alternative versions of the page in other languages.

Example:

<!DOCTYPE html>
<html lang="ru"> // Main language - Russian
<head>
  <meta charset="UTF-8">
  <title>Multilingual Page</title>
  <link rel="alternate" hreflang="en" href="https://example.com/en/"> // Link to English version
  <link rel="alternate" hreflang="es" href="https://example.com/es/"> // Link to Spanish version
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is an example text in Russian.</p>
  <p lang="en">This is an example text in English.</p> // Part of the text in English
</body>
</html>

Client-side language switching can include:

JavaScript: Dynamic loading of translations or redirecting the user to the appropriate version of the page.
Libraries: Using specialized internationalization libraries, such as react-i18next for React.

Server-side implementation can include:

Routing: Configuring the web server to handle URLs with language indicators (/en/page, /es/page).
Templating engines: Using server-side templating engines with internationalization support to render content in the required language.

It is important to ensure consistency of information across all language versions and to use understandable URLs.

How to properly design a page where content can be presented in different languages?