---
title: Lingo.dev + .html (الويب)
---

تقوم **واجهة سطر أوامر Lingo.dev** بترجمة ملفات HTML مع الحفاظ على بنية الترميز والسمات والعناصر الدلالية للمواقع الإلكترونية والوثائق. تحافظ واجهة سطر الأوامر على جميع ترميزات HTML وتداخلها، وتعالج فقط السمات القابلة للترجمة بذكاء، وتحمي JavaScript وCSS من الترجمة، وتتعامل مع العناصر الدلالية في HTML5 بشكل صحيح، وتضمن إخراج HTML صالح.

## الإعداد السريع

قم بالتكوين لملفات HTML مع التنظيم القائم على اللغة المحلية:

```json
{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "html": {
      "include": ["content/[locale]/*.html"]
    }
  }
}
```

**تذكير**: `[locale]` هو عنصر نائب يجب أن يبقى في التكوين حرفيًا، حيث يتم استبداله باللغة المحلية الفعلية أثناء تشغيل واجهة سطر الأوامر.

## ترجمة ملفات HTML

```bash
npx lingo.dev@latest i18n
```

تترجم محتوى النص مع الحفاظ على بنية HTML والعلامات والسمات والترميز الدلالي.

## معالجة HTML الذكية

### ترجمة المحتوى

```html
<!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>
```

تتم ترجمة محتوى النص بينما تبقى بنية HTML والعلامات سليمة.

### معالجة السمات

```html
<img src="/images/hero.jpg" alt="Welcome banner" title="Our platform" />
<input type="text" placeholder="Enter your name" />
<button aria-label="Close dialog">×</button>
```

تتم ترجمة السمات القابلة للترجمة مثل `alt` و`title` و`placeholder` و`aria-label`.

### الحفاظ على الدلالة

```html
<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>
```

يتم الحفاظ على عناصر HTML5 الدلالية وبنيتها.

## الميزات المتقدمة

### حماية السكريبت والستايل

```html
<script>
  function greeting() {
    console.log("This stays untranslated");
  }
</script>

<style>
  .header {
    color: blue;
  }
</style>
```

يظل محتوى جافا سكريبت و CSS دون تغيير.

### سمات البيانات

```html
<div data-message="User friendly message" data-id="widget-123">
  <span>يتم ترجمة المحتوى المرئي</span>
</div>
```

تتم معالجة سمات البيانات ذات المحتوى القابل للترجمة بذكاء.

## الإعدادات المتقدمة

### مجلدات HTML متعددة

```json
"html": {
  "include": [
    "content/[locale]/*.html",
    "pages/[locale]/**/*.html"
  ]
}
```

### قفل السمات التقنية

```json
"html": {
  "include": ["content/[locale]/*.html"],
  "lockedKeys": ["id", "class", "data-id", "href"]
}
```
