Lingo.dev + .html (Web)
Lingo.dev CLI translates HTML files while preserving markup structure, attributes, and semantic elements for websites and documentation. The CLI keeps all HTML markup and nesting intact, processes only translatable attributes intelligently, protects JavaScript and CSS from translation, handles HTML5 semantic elements correctly, and guarantees valid HTML output.
Quick Setup
Configure for HTML files with locale-based organization:
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de"]
},
"buckets": {
"html": {
"include": ["content/[locale]/*.html"]
}
}
}
Reminder: [locale] is a placeholder that should remain in the config literally, as it's replaced with the actual locale during CLI run.
Translate HTML Files
npx lingo.dev@latest i18n
Translates text content while preserving HTML structure, tags, attributes, and semantic markup.
Smart HTML Processing
Content Translation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Our Platform</title>
<meta name="description" content="The best platform for productivity" />
</head>
<body>
<h1>Getting Started</h1>
<p>
This guide will help you <strong>learn quickly</strong> and efficiently.
</p>
<a href="/help">Need help?</a>
</body>
</html>
Text content gets translated while HTML structure and tags remain intact.
Attribute Handling
<img src="/images/hero.jpg" alt="Welcome banner" title="Our platform" />
<input type="text" placeholder="Enter your name" />
<button aria-label="Close dialog">×</button>
Translatable attributes like alt, title, placeholder, and aria-label get localized.
Semantic Preservation
<article>
<header>
<h2>Article Title</h2>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<section>
<p>Article content goes here...</p>
</section>
</article>
Semantic HTML5 elements and their structure are preserved.
Advanced Features
Script and Style Protection
<script>
function greeting() {
console.log("This stays untranslated");
}
</script>
<style>
.header {
color: blue;
}
</style>
JavaScript and CSS content remains untouched.
Data Attributes
<div data-message="User friendly message" data-id="widget-123">
<span>Visible content gets translated</span>
</div>
Data attributes with translatable content are processed intelligently.
Advanced Configuration
Multiple HTML Directories
"html": {
"include": [
"content/[locale]/*.html",
"pages/[locale]/**/*.html"
]
}
Lock Technical Attributes
"html": {
"include": ["content/[locale]/*.html"],
"lockedKeys": ["id", "class", "data-id", "href"]
}