How to translate HTML without breaking layout

Translating a web page is not the same as translating a Word document. Browsers care about tags, nesting, and attributes. A small mistake in HTML can break CSS or JavaScript that relies on specific class names or IDs.

1. Separate content from chrome

Before you translate:

• Identify repeated chrome: navigation, footers, cookie banners.
• Decide whether each block is shared across locales or copied per language.

Keeping a single source for chrome often reduces drift between languages.

2. Watch inline elements

Text is often split by inline tags:

<p>Try <strong>HTML Translate</strong> today.</p>

Your translation process must keep those tags around the right words. Tools that strip HTML or re-wrap lines blindly tend to break this.

3. Be careful with attributes

Not every attribute should be translated:

Usually translate	Usually do not translate
title, alt when they describe UI	id, class, data-*, href paths
Visible placeholder text	JSON in data-*, tracking IDs

If you localize alt text, keep it concise and accurate for screen readers.

4. Test with real browsers

After translation:

1. Open the file in Chrome and Firefox.
2. Resize the viewport and check overflow and wrapping.
3. Confirm RTL languages if you support them—layout may need extra CSS.

5. Use the right tool for HTML

Generic machine translation boxes are fine for plain text. For HTML files, use a workflow designed to parse elements and only replace text nodes—like HTML Translate.

---

Summary: protect structure, translate only what users should see, and validate in a browser. If you follow this checklist, you will avoid most “it looked fine in the editor” surprises.