HTML

HTML and web template localization.

Translate the visible text of HTML pages and ASP, ASPX, PHP, or eRuby templates, with inline tags kept in the sentence and code protected, preview the translated page, and write de\index.html for each language. Your site keeps its layout, scripts, and language switch.

Download free trial How it works

HTML localization: Professional and higher

Input: .html, .xhtml, .asp, .aspx, .php, .erb
Output: The same page for each language, such as de\index.html
Runtime: Your site links or redirects to the language folder
Preview: The page, rendered, with the translation in place

On this page

Tutorial
How it works
What Lingobit reads
Attribute rules
Do and don't
Troubleshooting
The HTML sample

Tutorial

Localize HTML pages with Lingobit, step by step.

Four steps from your pages to a translated copy for each language.

Translation assistance Translation workflow

Localization QA

Release workflow

A sentence stays whole, its tags stay protected.

Lingobit reads the text of the page, not the markup. A sentence with <b> or <i> inside is one string, with the tags shown as protected parts the translator can move but not break. Visible attributes, such as alt and title, are translated too; scripts, styles, and server code are not offered.

Lingobit does

Translates visible text, whole sentences with their inline tags, and the attributes your rules select.
Shows the page in the preview, with the translation in place.
Checks HTML tags, entities, placeholders, and more.
Writes the same page for each language, markup and code unchanged.

Your site keeps

Layout, styles, and scripts.
Server code in ASP, PHP, or eRuby, and the text it prints.
The language switch and the links between language folders.
Deployment and the final test in the browser.

Reference

What Lingobit reads in a page.

The settings are on the Parser page of each file: Do not break text on following tags, Parse attributes, Parse comments, and Parse named entities.

Parts of an HTML page and how Lingobit treats them
In the page	In Lingobit
Text of elements	Translated, one sentence at a time
`<b>`, `<i>`, `<strong>`, `<sub>` and similar	Kept inside the sentence as protected tags
`<em>`, `<a>`, `<span>`	Kept inside the sentence too in a new project; a project from an earlier version keeps its list in Do not break text on following tags
Attributes	Those the attribute rules select; `alt`, `title`, `placeholder`, `aria-label`, and META description by default in a new project
`lang`	Offered, so each language can set its own code
Scripts, styles, server code	Not offered; text that code prints is not translated
Comments	Not offered, unless Parse comments is on

Attribute rules.

Each rule in Parse attributes is a condition on the tag, the attribute, and other attributes of the element. The defaults cover alt, title, META title, description, and keywords, input and button values, and option labels; links and image paths are there but off. A new project also has rules for placeholder and aria-label; a project from an earlier version needs them added:

Attribute rules and what they translate
Rule	Translates
`Tag="IMG" and Attr="Alt"`	Image alternative text (on by default)
`Tag="META" and Attr="content" and @Name="description"`	The page description (on by default)
`Attr="placeholder"`	Placeholder text in fields (on in a new project)
`Attr="aria-label"`	Labels for screen readers (on in a new project)
`Tag="IMG" and Attr="Src"`	Image paths, for images with text in them (off by default)

Do and don't.

Do

In a project from an earlier version, add EM, A, and SPAN to Do not break text on following tags, and rules for placeholder and aria-label: a new project has them.
Keep text out of scripts and server code, or move it into the page.
Check translated pages in the preview, then in the browser.

Don't

Build sentences in code from translated pieces.
Edit de\index.html by hand: the next Create overwrites it.
Turn on rules for links and image paths unless each language has its own.
Send page source or templates to translators: they work in Lingobit.

Troubleshooting.

Symptoms, causes, and what to do
Symptom	Likely cause	What to do
A sentence arrives in pieces	It contains server code, or a tag that is not in Do not break text on following tags, as in a project from an earlier version	Add the tag to Do not break text on following tags; move code out of the sentence
Placeholders and screen reader labels stay in English	The project was created with an earlier version, without these rules	Add `Attr="placeholder"` and `Attr="aria-label"` to Parse attributes
Some text stays in English on the page	A script or server code prints it	Move the text into the page, or into a resource your code reads
A translated page looks broken	A translation changed or dropped an inline tag	Run Validation: it reports HTML tags that differ from the source

The HTML sample.

Localizer installs an HTML website sample with its project, so you can try the steps above without your own site.

Five pages in the en folder, with styles, images, and a script menu, in German and French.
Create Localized Files writes the de and fr folders next to en; the start page links to all three.

More about HTML and template localization.

PHP, ASP, ASPX, and ERB templates

HTML-based application files often contain server-side code. Lingobit filters the code out and offers only the page text: in this PHP file translators get Welcome to your account. and Change settings, not <?php echo $pageTitle; ?>.

<h1><?php echo $pageTitle; ?></h1>
<p>Welcome to your account.</p>
<a href="../../settings">Change settings</a>

In ERB, <%= @title %> and the control flow stay protected the same way. Template localization suits file-based and legacy workflows; it does not replace the internationalization of a modern web framework.

Where the translated pages go

By default de\index.html is written in the language folder next to each page. The output pattern of the format, for the project or one file, sets another layout:

$(OutputDir)\$(CultureName)\$(SrcFileName)$(SrcFileExt)    de\index.html   (default)
$(OutputDir)\$(SrcFileName).$(CultureName)$(SrcFileExt)    index.de.html

To keep the structure of a whole site, add its folder to the project (Add Folder, Enterprise) and set the output folder to $(ProjectDir)\out\$(CultureName) with the pattern $(OutputDir)\$(SrcFileName)$(SrcFileExt): about\index.html becomes out\de\sitebout\index.html. Pages of the same name added as separate files share one output folder and overwrite each other.

JavaScript and modern frameworks

Do not give whole JavaScript files to translators: they mix text with logic, framework code, and build output. Bundled or minified files, React, Vue, Angular, or Svelte components, and runtime-generated text are not a good localization source. When an application already uses i18n resource files, localize those files instead of the components.

Protected attributes

Attributes that define structure and behavior stay out of translation unless a project deliberately adds a rule:

id  class  style  href  src  data-*  onclick  onchange  name  for  role  type

Which files fit

Good candidates are static HTML files, help pages, legacy ASP, PHP, or ERB templates with clear text, and files that keep stable relative paths between releases. Take care with files that mix heavy code and visible text, generated files that will be overwritten, and HTML assembled from many runtime fragments.

Help (CHM) — Compiled HTML Help, with the same HTML handling.
XML — XML files with XPath rules.
Localization QA — Validation of tags, entities, and placeholders.
Release workflow — Scan for Changes and translated pages for every release.