Guides, Tutorials

Translate HTML: step-by-step guide

In the previous articles we have seen how to internationalize pure JavaScript, Angular, and Vue applications. However, one might still ask: “How...

Written by Ilya Bodrov-Krukowski · 6 min read >

In the previous articles we have seen how to internationalize pure JavaScript, Angular, and Vue applications. However, one might still ask: “How can I translate HTML?”, “Is there an HTML translator application?” and the answer is yes!

So, in this article, I will explain how to get started on translating HTML code using Lokalise: a simple yet very powerful service. You will learn how to get started with Lokalise, how to create a new project, upload your HTML files, perform translations, and download translated HTML files. By the end of this tutorial you will be able to translate HTML like a pro!

Sample HTML Page to Translate

So, suppose we have the following HTML page me.en.html with English content:

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>About Me</title>
</head>

<body>
  <h1>Hi, my name is John Doe!</h1>

  <img src="my_photo.png" alt="That's me, John!">

  <p>
    I am a Ruby/Python/Node developer with 8 years' experience.<br> I've graduated <abbr title="Massachusetts Institute of Technology">MIT</abbr> in 2007 and since that have worked with the following companies:
  </p>

  <ul>
    <li>Macrosoft</li>
    <li>Pineapple</li>
    <li>Facelook</li>
  </ul>

</body>

</html>

This is a simple markup for a typical “About Me” page found on many personal sites. We need to translate the following:

  • title of the page.
  • Header, paragraph, and all list items.
  • alt attribute for the img tag.
  • title attribute for the abbr tag.

However, while this does not seem like a complex task, consider the following:

  • First, it is important to make sure all tags and their attributes have translations. The longer your HTML document is, the harder it becomes to check all the nodes.
  • Also, you’ll probably have multiple HTML pages and every document requires internationalization.
  • Finally, you might not be familiar with all the languages into which the document has to be translated. This means you’ll likely need help from a professional translator and it’s unlikely that s/he will be an HTML expert.

Therefore, using the right translation management system is your best bet. Meet Lokalise: a very popular and the most advanced TMS and localization software out there, with the below core features:

  • Ability to translate various types of content with a powerful graphical editor.
  • Simple file and translation project management.
  • Collaborative translation.
  • Quality assurance.
  • Localization process automation.

“But it’s too expensive for me!” you might think. Actually, it’s not: pricing starts from $90 per month for small teams. However, as a matter of fact, there is also a free plan which will come in handy for customers who need to translate content for their personal sites and applications. No hidden commissions, no shady schemes. Finally, open source projects can also request free access, while non-profit organizations are eligible for special discounts. Sounds good, right?

Using Lokalise to Translate HTML

Getting Set Up

So, first things first: we need to set up our HTML translator application. If you don’t have a Lokalise account yet, get your free 14 day trial here. Once the trial ends, you will be switched to a free plan automatically. Of course, it is possible to upgrade your subscription any time.

After signing up, you will see your projects dashboard. Simply speaking, a project is a collection of translations or files to be translated (related to a single app or service), contributors who have access to these translations, and some other settings and features (like integrations with third-party services).

  • Create a new project by clicking the corresponding button in the top menu.
  • Give your project a name, for example “Personal Site”.
  • Optionally, provide a project description.
  • Choose a base language — that’s the original language of your content.
  • Make sure to choose Documents as the Project type — this will allow us to translate HTML files.

Next, you will be redirected to the project page.

Empty project editor

Uploading an HTML File to Translate

As the next step, we need to upload (import) our HTML file. Click on the Upload link shown in the screenshot above. You will see the uploading interface as follows:

Upload HTML files to translate them

First, click the Select a file link and choose the HTML document from your PC. You don’t need to tweak any uploading options to get started with HTML translation. However, if you are interested in learning about the purpose of the uploading options, refer to our “Uploading files” documentation. Also make sure the language was detected properly as shown here:

Uploading HTML file

If the language is incorrect, use the dropdown and choose a different option. Also, you may rename the file by clicking on its name:

Rename file

Also you will notice that the %LANG_ISO% part is added automatically. Basically, it says that the locale code will be placed in this position. When downloading translation files for different languages, the %LANG_ISO will be replaced with the proper language code, for example: me.ru.html or me.fr.html. Having a language code in the file name is beneficial because you can easily understand what language version the document contains.

When you are ready, click the Import the files button. The uploading process will happen in the background. Use the Activity page to see the progress of the job:

Activity page

The upload will be completed within a few moments:

Upload finished

Now, click on the Personal Site link in the top menu. You should see the contents of your HTML document separated by tags:

Adding Languages for Translation

So, we have loaded the HTML file and can proceed to the actual translation. However, what languages do we want to translate? To choose a language, click on the English dropdown to the right, and click Add language…

Add language

Next, choose one or more languages from the dropdown. I’ll pick Russian and Polish for the below:

Add languages

Click Add once you are ready.

Now simply choose one of the languages from the dropdown to the right. This is the language that we will be translating into (target language). The left dropdown shows the language that you are translating from (source language):

Add language

Finally, once you’ve chosen a target language, the values to the right will contain Empty values:

Untranslated empty values

So, these are the values for the target language (set to Russian in the example above). They are empty because we have not yet translated anything. The values to the left belong to the source language (English). Remember that initially the HTML page was in English, so that’s also the base language of our project.

Performing HTML Translations

So, at this point you can go ahead and translate your content. To do that, simply click on one of the Empty values:

Edit HTML translation

Enter the translation in the text box or choose one of the suggestions below. These suggestions are machine translations from Google, DeepL, and Bing. Once you are ready, click on the OK button with the checkmark icon. Your translation is now saved:

Saved translation

To edit the translation, simply click on its value.

Placeholders

Now, what about the image tag? Currently its value looks like this:

Image placeholder

This is a block shown in a user-friendly way. However, if you would rather see the actual markup, disable the Display placeholders as blocks option:

Disable blocks as placeholders

Now let’s provide a translation for the img tag:

Translate image

You will notice that the editor reminds you that the current value has a missing element (the img tag). Click on the missing element to add it to the text box. Also, disable displaying placeholders as blocks while editing, for instance:

Disable placeholders while ediring

Next, translate the alt attribute:

Edit alt attribute

After that, proceed to translating the paragraph:

Translating paragraph

It shows two placeholders:

  1. First, our br tag, that we should leave intact.
  2. Second, the abbr tag. We need to translate its title attribute.

So, click the Insert source button and perform the translation in the same way as before:

Insert source

Next, simply translate all other elements:

Translation finished

Downloading Translated HTML Files

So, once you’ve translated your HTML files, it’s high time you downloaded them! Start by clicking Download, as shown here:

Download icon

Next, choose HTML from the Format dropdown, and select the languages that you would like to download:

Download options

Also, you will be able to see the translation progress for each language. It is possible to tweak the language codes by clicking on them:

Change language code

Remember that these language codes will form part of the filename (if the name has the %LANG_ISO% part). So, for the Russian language you would see me.ru.html.

After that, click the Preview button to see how your translation files will look:

Preview

Here’s the result:

Preview files

For each language, you will see the filenames and the translated content.

Now return to the Download page and click Build and download. You will get an archive named after your project. The archive will contain translation files for each chosen language, which are separated into folders:

As a result, you have just translated your HTML page. Congratulations!

Missing Translations

Now, what if you have not yet translated some of the values? During the download, it is possible to choose what to do a with such values:

  • Export as empty strings — tags that have no translations will be empty.
  • Don’t export — the corresponding translations won’t be exported. For HTML documents it works in a slightly different way: if the language has no translations at all, it won’t be exported. If the language has a handful of untranslated values, they will be replaced with the original text (which is English in our case).
  • Replace with base language — replaces all untranslated strings with the values from the base language.

You can control this on the Download page using the Empty translations dropdown, like so:

Export with no translation

Now, what if you would like to find all the values missing translations and deal with them? To achieve this, use the Filter dropdown on the project page and choose Untranslated:

Filter

This way you will see only the untranslated values for the chosen language!

Conclusion

So, in this tutorial we have seen how to translate HTML using the Lokalise graphical user interface. Remember that you are able to upload multiple translation files into a single project and can add as many languages as needed. While we have covered quite a lot of material, Lokalise provides many other features. Here are a few suggestions that may interest you:

Feel free to contact us if you have any further questions or if you would like to learn more about the platform. Thank you for stopping by today, and until next time!

Written by Ilya Bodrov-Krukowski
Ilya is a head of content at Lokalise, an IT tutor and author, web developer, and ex-Microsoft/Cisco specialist. His primary programming languages are Ruby, JavaScript, Python, and Elixir. He enjoys coding, teaching people and learning new things. In his free time he writes educational posts, participates in OpenSource projects, goes in for sports and plays music. Profile