Skip to main content
Website translation

Excluding content from translation

Control precisely which parts of your website get translated using standard HTML attributes and specific configuration settings.

Using the translate="no" attribute​

To prevent specific HTML elements and their content from being translated, add the translate="no" attribute directly to the element.

 <p translate="no">This will not be translated</p>

Marking content in a different language​

If your page primarily uses one source language (e.g., English) but contains sections in another language (e.g., Japanese), mark those sections with the appropriate lang attribute.

  <p lang='ja'>これを訳して</p>

The Website Translator is designed to translate from a single designated source language per page. Content marked with a lang attribute that differs from the page's main source language will typically be skipped, preventing potential mistranslation. Failing to mark such content may lead to inaccurate results as the translator attempts to process it as the source language.

Translating only specific sections​

Instead of translating everything by default, you can configure the translator to only process elements explicitly marked for translation.

This requires two steps:

  • Add the translate="yes" attribute to the HTML elements you do want translated.
  • Enable the WebsiteTranslator.Options.translation.translateOnlyAllowedTags=true option in your configuration script.

When this option is enabled, only elements with translate="yes" (or elements inheriting it from an ancestor) will be translated. All other content will be ignored.

You can still use translate="no" on child elements within a translate="yes" block to exclude specific parts, providing fine-grained control.

/example.html
<html lang="en">
  <head>
  <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/website-translator/dist/widget.js"></script>
  </head>
    <body>
        <div class="website-translator"></div>
        <!-- This will be translated because it inherits document language "en"-->
        <p>This will be translated</p>
        <!-- This will not be translated because it has translate="no" attribute-->
        <p translate="no">This will not be translated</p>
        <!-- This will not be translated because it has different language from document source language -->
        <p lang='ja'>これを訳して</p>
        <ul translate="no">
            <!-- This will not be translated because it inherits translate="no" attribute-->
            <li>Coffee</li>
            <!-- This will be translated because it overrides inherited translate="no" with translate="yes"-->
            <li translate="yes">Tea</li>
            <!-- This will not be translated because it inherits translate="no" attribute-->
            <li>Milk</li>
        </ul>
    </body>
    <footer>
        <script>
            // Configure plugin
            // 👇 Change XXXXXXXXXXX to your Client-ID
            WebsiteTranslator.Options.api.clientId = "XXXXXXXXXXX";
            WebsiteTranslator.Options.api.url = "https://traduzzjoni.mt/service/website-translation";
            WebsiteTranslator.Options.ui.toolbarPosition = "top";
            WebsiteTranslator.Options.translation.translateOnlyAllowedTags=true;
            WebsiteTranslator.Initialize()
        </script>
    </footer>
</html>