Using HTML Syntax to Prepare Phrases

Easy steps to improve your integration.

Save time by prepping your content for localization and translations. This guide explains how you can use HTML syntax to better prepare your content to quickly approve phrases and translate them.


Variables are a means of wrapping dynamic content for deduplication purposes. For example, you might consider using this for usernames or numeric amounts (like dates & currency). To create a variable, wrap the text in <var> tags.

Welcome back, <var>theC00lkid</var>.

If you don't use a <var> tag for something like the example above, then you could potentially get many similar copies of the same phrase, with a different name in each phrase, like:

Welcome back, theC00lkid.
Welcome back, Billy.
Welcome back, Edward.
Welcome back, Miriam.

Naming Variables

Naming variables helps translators to better understand the context of your phrases, so provide a name in the <var> tag.

Welcome back, <var username>theC00lkid</var>. 


  • <var> is a valid HTML5 tag that behaves similarly to a <span> tag.
  • Since HTML attributes are case-insensitive, a variable name of userName and username are the same, and Localize will use the all lowercase version of the variable name.


Adding a pluralize attribute to the variable indicates to our system whether the phrase should be singular or plural. This is especially important for languages like Arabic.

You have <var count pluralize="1">one</var> notification. 

The value of the pluralize attribute must be set to an integer denoting the number of items represented by the variable. To improve the accuracy of pluralization, we recommend manually inputting the singular and plural versions of your phrases on your Localize dashboard. You'll be prompted to do this if you use plural phrases in your app, as seen here:

When you click the "Click here" link you'll be presented with the following dialog, in which you can enter the singular and plural versions of the source phrase.

Attribute: isolate

Localize will intelligently group together adjacent text in your app. If you notice an inaccurate grouping, you may define one yourself by adding an empty isolate attribute to the parent element.

For example, Localize will group adjacent text nodes and link elements together to form one text segment. In the example below, we can add an isolate attribute to ensure each link is parsed as its own phrase.

Please Note: The isolate tags will not work when attempting to group entire pages. The isolate tags are for grouping smaller paragraph length amounts of content.

Website navigation: 
<a href="/" isolate>Home</a>
<a href="/about" isolate>About</a>

Attribute: notranslate or translate="no"

Adding an empty notranslate (or translate="no") attribute to an element prevents it and all of its child elements from being brought into the Localize dashboard, so it will not appear as a pending phrase. It also prevents the element from being grouped with adjacent text.

<div notranslate>This phrase won't be brought into the dashboard, and it won't be a pending phrase.</div>
<div translate="no">Neither will this.</div>

Won't work in the HTML Element

Note that adding notranslate to the <html> element in the page will NOT stop Localize from bringing in content from the page.

Attribute: ignore

Adding an empty ignore attribute to an element will ignore the content of the element while allowing it to be grouped with adjacent text. This can be useful to prevent translating names, or words such as "Tweet".

For example:

This website is called <span ignore>Localize</span>.

The above phrase will be detected and available to translate as: This website is called {1}{/1}.

Note: <code>, <var>, and <kbd> elements are automatically ignored.

Attribute: aria-label

Localize supports the aria-label attribute for improved accessibility. The aria-label attribute is used to define a string for HTML elements which don't have visible text on the screen. This allows screen readers (or other assistive technology) to give context to HTML elements. Localize will pull these strings into your dashboard so that they may be translated.

For example:

<button onclick="modalDialog.close()" aria-label="Close the Dialog">X</button>

A screen reader would read the text "Close the dialog" (or the translated version if in a target language) when it encountered this button element.

Attribute: title

Localize supports the title attribute. You can use the title attribute to specify extra information about any HTML element. This extra information is most often shown as a tooltip when hovering over the element, but is also used by screen readers and other assistive technologies to improve accessibility. Localize will pull these strings into your dashboard so that they may be translated.

For example:

<p title="Great localization tools"></p>

The text "Great localization tools" would appear as a tooltip when the user hovers over the HTML element, and a screen reader would read the text "Great localization tools" (or the translated version if in a target language) when it encountered this button element.

Variable with Data prefix

We support implementation with the “data-“ prefix. For example: “data-var” and “data-pluralize”.

I have <var data-var="num" data-pluralize="2">2</var> dogs.

Naming variables with “data-var” is optional. The variable name can provide more context to translators.

Updated 3 months ago

Using HTML Syntax to Prepare Phrases

Easy steps to improve your integration.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.