टैग, एट्रिब्यूट या लिंक तोड़े बिना HTML फ़ाइल का अनुवाद कैसे करें

HTML फ़ाइल का अनुवाद करने के लिए, वह टेक्स्ट अनुवाद करें जो लोग पढ़ते हैं और वे एट्रिब्यूट जिनमें पाठक-केंद्रित शब्द होते हैं, जैसे alt, title, placeholder, aria-label, और पेज का मेटा विवरण। मार्कअप को अकेला छोड़ दें: टैग नाम, href, src, id, class, स्क्रिप्ट, स्टाइल, और translate="no" से चिह्नित कुछ भी। फिर एक ऐसा मान बदलें जिसे भूलना आसान है, <html> एलिमेंट पर lang एट्रिब्यूट, ताकि ब्राउज़र, स्क्रीन रीडर और सर्च इंजन जान सकें कि पेज अब किस भाषा में है।

टैग को सुरक्षित रखना आसान हिस्सा निकला। हमने एक स्थानीय मॉडल के साथ तीन तरीकों का उपयोग करके 59 पंक्तियों वाले HTML सहायता पेज का नौ बार सरलीकृत चीनी में अनुवाद किया, और हर आउटपुट को एक स्क्रिप्ट से जाँचा। हर रन ने हर टैग, लिंक और ID को सुरक्षित रखा। जो गलत हुआ वह अधिक शांत था: मॉडल ने उन सभी छह रनों में एक <pre> कोड ब्लॉक के अंदर की पंक्ति का अनुवाद कर दिया जिनमें पूरी फ़ाइल भेजी गई थी, इसने सभी छह में नेविगेशन के aria-label को अंग्रेज़ी में छोड़ दिया, और जो तरीका डिज़ाइन से मार्कअप को सबसे सुरक्षित रखता है, टेक्स्ट के टुकड़ों का एक-एक करके अनुवाद करना, उसने अपने सभी तीन रनों में एक ऐसा वाक्य बनाया जो पाठक को गलत काम करने के लिए कहता था।

संक्षिप्त उत्तर: क्या अनुवाद करें और क्या छोड़ दें

यह सूची हमारी खोज नहीं है। HTML मानक का translate विशेषता वाला अनुभाग "अनुवाद योग्य विशेषताओं" को परिभाषित करता है: हर तत्व पर title, छवियों पर alt, इनपुट पर placeholder, उन meta तत्वों पर content जिनका नाम अनुवाद योग्य माना जाता है, और lang, जिसे नई भाषा से मेल खाने के लिए बदला जाना चाहिए। यह ARIA के aria-label को भी अन्य विनिर्देशों द्वारा जोड़े जा सकने वाली विशेषता के उदाहरण के रूप में नामित करता है, और कहता है कि translate="no" तत्व में, पाठ और विशेषता मान "पृष्ठ के स्थानीयकृत होने पर जैसे हैं वैसे ही छोड़े जाने चाहिए।"

हमने क्या परखा

हमने sample-source.html लिखा, जो उसी काल्पनिक रीडिंग ऐप, Shelfmark, के लिए एक सहायता-केंद्र पृष्ठ है, जिसका उपयोग हमने अपने Markdown अनुवाद परीक्षण में किया था। इसमें ऊपर की तालिका की प्रत्येक पंक्ति का एक उदाहरण है, साथ ही कुछ जाल भी:

• इनलाइन टैग द्वारा विभाजित एक वाक्य: "निर्यात करने से पहले, अपने नोट्स का बैकअप लें। निर्यात आपकी पुस्तकों की प्रतिलिपि बनाता है, लेकिन Shelfmark से कुछ भी नहीं हटाता," जिसमें उत्पाद का नाम translate="no" के अंदर है;
• दो इनलाइन <code> तत्वों वाला एक वाक्य जिनका क्रम मायने रखता है: "--out के बाद <library> फ़ोल्डर का पथ टाइप करें";
• एक कमांड और नमूना आउटपुट की एक पंक्ति, # Export finished: 128 books, वाला एक <pre><code> ब्लॉक;
• एक CSS नियम जो किसी अनुच्छेद से पहले "Note:" शब्द डालता है;
• #choose-format के लिए एक इन-पेज लिंक, एक mailto: लिंक, एक खोज फ़ॉर्म, और एक JSON-LD ब्लॉक।

फिर हमने एक स्थानीय मॉडल से इसे तीन तरीकों से सरलीकृत चीनी में अनुवाद करने को कहा:

1. पूरी फ़ाइल। पूरी फ़ाइल पेस्ट करें और अनुवादित फ़ाइल वापस माँगें।
2. निर्देशित। वही, साथ में आठ नियम: हर टैग और विशेषता नाम रखें, href, src, id, class और समान मानों को न बदलें, सूचीबद्ध पाठ विशेषताओं और मेटा टैग का अनुवाद करें, <code>, <pre>, <script>, और <style> को JSON-LD name और description के अलावा अकेला छोड़ दें, translate="no" का सम्मान करें, वर्ण संदर्भ और टिप्पणियाँ रखें, और lang को zh-Hans पर सेट करें।
3. खंड। HTML से पाठ निकालने वाले उपकरणों का दृष्टिकोण: एक स्क्रिप्ट फ़ाइल को टैग और पाठ में विभाजित करती है, <code>, <pre>, <script>, <style>, और translate="no" तत्वों को छोड़ देती है, शेष पाठ अंशों और पाठ विशेषताओं को एक क्रमांकित JSON सूची के रूप में मॉडल को भेजती है, और अनुवादों को अछूते मार्कअप में वापस लिखती है। यह स्वयं lang="zh-Hans" भी सेट करती है।

मॉडल LM Studio में Qwen 3.6 27B (Q4_K_M) था, सोच बंद और तापमान 0.3, 64 GB मेमोरी वाले Apple M4 Max पर। हमने प्रत्येक विधि को तीन बार, कुल नौ रन, 27 अक्टूबर 2026 को चलाया। स्क्रिप्ट run_llm_html_test.py है, और सभी नौ आउटपुट बिना संपादन के प्रकाशित हैं; README में हर फ़ाइल सूचीबद्ध है। यदि आपने पहले स्थानीय मॉडल सेट नहीं किया है, तो हमारी स्थानीय LLM अनुवाद मार्गदर्शिका सेटिंग्स को कवर करती है।

यह एक मॉडल, एक भाषा युग्म और एक पृष्ठ का छोटा परीक्षण था। यह दिखाता है कि कौन सी समस्याएँ होती हैं और उन्हें कैसे पकड़ा जाए। यह मॉडलों या उपकरणों को रैंक नहीं करता।

परिणाम: मार्कअप बच गया; तीन निर्णय नहीं बचे

हमने प्रत्येक आउटपुट को check_html_translation.py से जाँचा, जो केवल Python की मानक लाइब्रेरी का उपयोग करने वाला चेकर है। पूरा आउटपुट check-results.txt में है, और results.csv में प्रत्येक रन के लिए एक पंक्ति है।

नौ में से हर रन ने वही 58 टैग उसी क्रम में रखे, हर href, src, id, और class, इन-पेज लिंक लक्ष्य, टिप्पणी, एस्केप्ड <library>, और translate="no" के अंदर उत्पाद का नाम। अगर आपको चिंता थी कि कोई मॉडल एक साधारण पेज के मार्कअप को बिगाड़ देगा, तो उसने नहीं बिगाड़ा। समस्याएँ सब इस बात में थीं कि क्या अनुवाद करना है।

1. <pre> के अंदर नमूना आउटपुट का अनुवाद हो गया

हमारे नमूने में कोड ब्लॉक प्रोग्राम आउटपुट की एक पंक्ति के साथ समाप्त होता है:

<pre><code>shelfmark export --format epub --covers --out ~/Books/export
# Export finished: 128 books</code></pre>

सभी छह पूरी-फ़ाइल और निर्देशित रन में, मॉडल ने उस पंक्ति पर # 导出完成：128 本书 लौटाया, जिनमें वे तीन रन भी शामिल हैं जहाँ प्रॉम्प्ट ने कहा था कि <pre> के अंदर कुछ भी न बदलें। कमांड को कभी छुआ नहीं गया। मॉडल ने उस पंक्ति को टिप्पणी माना, और ट्यूटोरियल में टिप्पणियों का अनुवाद करना एक उचित विकल्प है। लेकिन यह पंक्ति वह है जो प्रोग्राम प्रिंट करता है, और जो पाठक इसे अपने टर्मिनल से मिलाएगा उसे अंग्रेज़ी दिखेगी। अनुवाद करने से पहले तय करें कि नमूना आउटपुट और कोड टिप्पणियों का अनुवाद होगा या नहीं, और टूल को बताएं, या <pre> ब्लॉकों को पूरी तरह सुरक्षित रखें।

पूरी-फ़ाइल रन ने <style> ब्लॉक में CSS content: "Note: " का भी अनुवाद किया, जबकि निर्देशित रन, जिन्हें <style> को अकेला छोड़ने के लिए कहा गया था, ने इसे अंग्रेज़ी में ही रखा। अपने आप में कोई भी गलत नहीं है। स्टाइलशीट का अनुवाद उस पेज के लिए सही है जहाँ CSS इनलाइन है, और उस साइट के लिए गलत है जहाँ एक साझा स्टाइलशीट हर भाषा को सेवा देती है। किसी भी तरह, यह एक निर्णय है जो किसी को लेना है, ऐसा विवरण नहीं जिसका अनुमान मॉडल लगाए।

2. एक्सेसिबिलिटी लेबल छोड़ दिए गए

ब्रेडक्रंब नेविगेशन <nav aria-label="Breadcrumb"> है। स्क्रीन रीडर उस लेबल की घोषणा करता है; देखने वाले पाठक इसे कभी नहीं देखते। सभी छह पूरी-फ़ाइल और निर्देशित रन में, यह अंग्रेज़ी में ही रहा, भले ही निर्देशित प्रॉम्प्ट ने अनुवाद करने के लिए विशेषताओं में aria-label को सूचीबद्ध किया था। एक निर्देशित रन में, खोज बटन का aria-label="Search" भी अंग्रेज़ी में ही रहा।

सेगमेंट विधि ने हर बार इसका अनुवाद किया, क्योंकि इसकी स्क्रिप्ट ने हर aria-label, alt, title, और placeholder मान एकत्र किया और प्रत्येक के लिए स्पष्ट रूप से पूछा। यह इस बात का सबसे मजबूत तर्क है कि टेक्स्ट विशेषताओं को जानबूझकर निकाला जाए, बजाय इस उम्मीद के कि मॉडल उन्हें नोटिस कर लेगा।

3. टुकड़ों में अनुवाद करने से टैग सुरक्षित रहे पर वाक्य टूट गया

सेगमेंट विधि मार्कअप के लिए संरचनात्मक रूप से सुरक्षित है: मॉडल कभी टैग नहीं देखता, इसलिए वह उसे नुकसान नहीं पहुँचा सकता। इसने तीनों रन में हर संरचनात्मक जाँच पास की। इसने परीक्षण में एकमात्र ऐसा अनुवाद भी दिया जिसने पाठक को गलत निर्देश दिए।

अंग्रेज़ी वाक्य है "Type the path to the <library> folder after --out." इनलाइन <code> इसे तीन टुकड़ों में बाँटता है: "Type the path to the", "folder after", और एक पूर्णविराम। चीनी में ये शब्द अलग क्रम में आते हैं, इसलिए अनुवादक को दो कोड तत्वों को स्थानांतरित करना होता है। सेगमेंट विधि उन्हें स्थानांतरित नहीं कर सकती। तीनों रन ने निर्देश को उलट दिया। रन 2 ने यह उत्पन्न किया (रन 1 और 3 में 之后 के बजाय 后 है, अर्थ समान है):

在 <code>&lt;library&gt;</code> 之后输入 <code>--out</code>文件夹的路径。

यह पढ़ता है "<library> के बाद, --out फ़ोल्डर का पथ टाइप करें," जो निर्देश का उल्टा है। सभी छह पूर्ण-फ़ाइल और निर्देशित रन ने कोड तत्वों को स्थानांतरित किया और सही किया:

在 <code>--out</code> 后面输入 <code>&lt;library&gt;</code> 文件夹的路径。

उसी विभाजन ने जहाँ टैग चीनी पाठ से मिलता है वहाँ अनावश्यक स्थान छोड़े, जैसे 前往 <b>设置</b> और <b>书库</b> ，, तीनों सेगमेंट रन में, प्रति रन छह स्थान। ब्राउज़र उन्हें दृश्य अंतराल के रूप में दिखाता है, जिसमें चीनी विराम चिह्न से पहले भी शामिल है। पूर्ण-फ़ाइल रन में कोई नहीं था; तीन निर्देशित रन में से दो में चार या पाँच थे।

एक संरचनात्मक जाँचकर्ता उलटे वाक्य को नहीं पकड़ सकता, क्योंकि हर टैग ठीक वहीं है जहाँ था। हमारा जाँचकर्ता तब रिपोर्ट करता है जब इनलाइन कोड क्रम बदलता है, जो कई भाषाओं के लिए सामान्य है, लेकिन वह चेतावनी सही और गलत में अंतर नहीं बता सकती। इस परीक्षण में यह सभी छह सही अनुवादों पर सक्रिय हुई और तीन गलत पर शांत रही, क्योंकि गलत वालों ने अंग्रेज़ी क्रम रखा था। केवल वाक्य पढ़ने वाला व्यक्ति ही बता सकता है। समाधान है अनुवादक को पूरे वाक्य, उनके इनलाइन टैग के साथ, भेजना, जो पूर्ण-फ़ाइल रन ने किया, और बाद में संरचना की जाँच करना।

छोटे अंतर

• lang: पूर्ण-फ़ाइल रन ने इसे स्वयं zh-CN में बदल दिया। निर्देशित रन ने zh-Hans का उपयोग किया, जैसा कहा गया था। दोनों वैध भाषा टैग हैं; zh-Hans लिपि (सरलीकृत चीनी) का नाम देता है, zh-CN क्षेत्र का। W3C की भाषा घोषणाओं पर मार्गदर्शन <html> तत्व पर भाषा घोषित करने की सलाह देती है, न कि Content-Language मेटा टैग से।
• JSON-LD: पूर्ण-फ़ाइल और निर्देशित रन ने name और description मानों का अनुवाद किया और JSON को वैध रखा। हमारी सेगमेंट स्क्रिप्ट ने <script> सामग्री को छोड़ दिया, इसलिए इसका संरचित डेटा अंग्रेज़ी में रहा, जो कि स्क्रिप्ट को अनदेखा करने वाला उपकरण भी ऐसा ही व्यवहार करेगा।
• वर्ण संदर्भ: पूर्ण-फ़ाइल और निर्देशित रन ने ›,  , ©, और इमोजी संदर्भ को लिखित रूप में रखा। उन छह में से पाँच रन ने 2–5 रेंज को चीनी शब्दों में फिर से लिखा (2 到 5 या 2 至 5); एक निर्देशित रन ने संदर्भ के बजाय सादा डैश लिखा, हालाँकि उसके प्रॉम्प्ट में संदर्भ रखने को कहा गया था। हमारी सेगमेंट स्क्रिप्ट ने उन सभी को डिकोड किया और वर्ण वापस लिखे, जो समान दिखाता है। महत्वपूर्ण वाला, <code> के अंदर <library>, सभी नौ रन में एस्केप्ड रहा।

अनुवाद से पहले: फ़ाइल तैयार करें

1. जो नहीं बदलना चाहिए उसे चिह्नित करें। उत्पाद नामों, मॉडल नंबरों, गद्य में कोड-जैसी स्ट्रिंग्स, और किसी भी अन्य चीज़ पर जो वैसी ही रहनी चाहिए, translate="no" लगाएँ। यह HTML का हिस्सा है, इसकी कोई कीमत नहीं है, और मॉडल ने उन सभी छह रन में इसका सम्मान किया जिन्होंने इसे पूरी फ़ाइल भेजी। इसे पढ़ने वाले सेगमेंट उपकरण, जैसे हमारी स्क्रिप्ट, उन तत्वों को पूरी तरह छोड़ देते हैं। हमारी अनुवाद न करने की मार्गदर्शिका बताती है कि उस सूची में क्या रखना है।
2. कोड नीति तय करें। क्या कोड टिप्पणियों का अनुवाद होता है? क्या नमूना आउटपुट का? क्या स्टाइलशीट भाषाओं में साझा है? उत्तर को उन नामों के साथ लिखें जो नहीं बदलने चाहिए, एक अनुवाद शब्दावली में, और इसे उस व्यक्ति या उपकरण को दें जो अनुवाद करता है।
3. ID स्रोत भाषा में रखें। इन-पेज लिंक id मानों की ओर इंगित करते हैं। यदि कोई id का अनुवाद करता है, तो उसके सभी लिंक टूट जाते हैं। हमारे किसी भी रन ने ऐसा नहीं किया, लेकिन जो अनुवादक "मदद के इरादे से" एंकरों को स्थानीयकृत करेगा, वह करेगा।
4. छिपे हुए पाठ को इकट्ठा करें। उन विशेषताओं की सूची बनाएँ जिनमें शब्द हैं, alt, title, placeholder, aria-label, बटन पर value, मेटा टैग, और JSON-LD, ताकि उन्हें जाँचा जाए और भुलाया न जाए।
5. JavaScript स्ट्रिंग्स का यथास्थान अनुवाद न करें। स्क्रिप्ट द्वारा सेट किए गए संदेश, जैसे अलर्ट या कोड में बनाया गया बटन लेबल, कोड में एक अलग स्थानीयकरण चरण की आवश्यकता होती है। छह पूर्ण-फ़ाइल या निर्देशित रन में से किसी ने हमारे स्क्रिप्ट ब्लॉक को नहीं बदला, जो सही है, लेकिन इसका मतलब है कि वे स्ट्रिंग्स अंग्रेज़ी में रहती हैं।

अनुवाद के बाद: इसकी जाँच करें

1. संरचनात्मक जाँच चलाएँ।

   python3 check_html_translation.py source.html translated.html --lang zh-Hans --keep Shelfmark
   

   यह टैग और उनके क्रम, हर विशेषता जो पाठक-सम्मुख पाठ नहीं है, <pre>, <script>, और <style> की सामग्री, इनलाइन कोड, JSON-LD कुंजियाँ, translate="no" पाठ, टिप्पणियाँ, और इन-पेज लिंक की तुलना करता है। यह अंग्रेज़ी में अभी भी मौजूद पाठ विशेषताओं, अपेक्षा से भिन्न lang मान, अनुवादित न दिखने वाले दृश्य पाठ, क्रम बदलने वाले इनलाइन कोड, और इनलाइन टैग के आर-पार चीनी, जापानी, या कोरियाई पाठ के बीच रिक्त स्थान के बारे में चेतावनी देता है। यह अनुवाद गुणवत्ता का निर्णय नहीं करता।

2. हर उस वाक्य को पढ़ें जिसमें इनलाइन टैग है। यहीं हमारे परीक्षण में अर्थ टूटा। इन वाक्यों को खोजने के लिए जाँचकर्ता की "इनलाइन कोड पुनःक्रमित" चेतावनी पर निर्भर न रहें: हमारे परीक्षण में, गलत अनुवाद वही थे जिन्होंने मूल क्रम रखा था।

3. पृष्ठ को ब्राउज़र में खोलें। इन-पेज लिंक पर क्लिक करें, यदि संभव हो तो स्क्रीन रीडर के साथ फ़ॉर्म में टैब करें, और बोल्ड और लिंक किए गए पाठ के आसपास अंतराल देखें।

4. दाएँ-से-बाएँ भाषाओं के लिए, <html> तत्व पर dir="rtl" भी सेट करें। हमारी RTL पुस्तक अनुवाद मार्गदर्शिका बताती है कि और क्या बदलता है।

5. XHTML के लिए, जैसे EPUB के अंदर अध्याय फ़ाइलें, यह भी पुष्टि करें कि फ़ाइल अभी भी सुगठित XML है, उदाहरण के लिए xmllint --noout chapter.xhtml से। ब्राउज़र बिना बंद किए गए टैग को माफ कर देता है; ई-रीडर शायद न करे। हमारी EPUB अनुवाद QA चेकलिस्ट ईबुक के बाकी हिस्से को कवर करती है।

BookTranslator कहाँ फिट बैठता है

BookTranslator का अपलोड पेज किताबों और दस्तावेज़ों के साथ-साथ .html, .htm, और .xhtml फ़ाइलें भी स्वीकार करता है, इसलिए आप किसी सहेजे गए पेज या स्थिर सहायता लेख को पूरी फ़ाइल के रूप में अपलोड कर सकते हैं। हमने इस लेख के लिए इस नमूने को BookTranslator के माध्यम से नहीं चलाया है, और हमने यह परीक्षण नहीं किया है कि यह इनलाइन कोड क्रम, CSS सामग्री, या JSON-LD को कैसे संभालता है, इसलिए इसके आउटपुट की जाँच उसी तरह करें जैसे आप किसी अन्य टूल के आउटपुट की करते हैं। भुगतान से पहले आपको कीमत दिखाई देती है।

आप जो भी उपयोग करें, अनुवाद से पहले तैयारी के चरण और बाद में जाँच करें। सभी टैग बरकरार रखने वाला पेज भी पाठक को गलत चीज़ टाइप करने का निर्देश दे सकता है। यदि आपका HTML वास्तव में Markdown में लिखा गया दस्तावेज़ है, तो हमारी Markdown अनुवाद मार्गदर्शिका स्रोत प्रारूप को कवर करती है।

परीक्षण फ़ाइलें प्राप्त करें

इस परीक्षण की सभी चीज़ें मुफ़्त में पुनः उपयोग के लिए उपलब्ध हैं:

• sample-source.html: 59 पंक्तियों वाला अंग्रेज़ी नमूना;
• check_html_translation.py: संरचनात्मक जाँचकर्ता (केवल Python मानक लाइब्रेरी);
• run_llm_html_test.py: तीन विधियाँ, किसी भी OpenAI-संगत स्थानीय सर्वर के लिए;
• outputs फ़ोल्डर में नौ आउटपुट, साथ में check-results.txt और results.csv।