وثائق HTML قابلة للتشغيل: سمة lang

Q: ماذا أضع في السمة lang لعنصر html؟

رمز لغة من معيار BCP 47: en للإنجليزية، وes للإسبانية، وfr للفرنسية، وja لليابانية. أضف منطقة فقط حين يكون ذلك مهمًا، كما في en-US أو en-GB أو pt-BR.

Q: هل أستخدم lang="en" أم lang="en-US"؟

كلاهما صالح. en تكفي لمعظم الصفحات الإنجليزية. استخدم en-US أو en-GB حين يكون التنوع الإقليمي مهمًا، مثلًا للإملاء أو التواريخ أو نطق بعض الكلمات.

Q: كيف أحدد نصًا بلغة أخرى؟

أضف lang إلى العنصر المحيط به: bon appétit . تغيّر قارئات الشاشة النطق لتلك العبارة، ويستطيع CSS تنسيقها بـ :lang(fr).

Q: ما الفرق بين lang وhreflang؟

lang تقول بأي لغة محتوى العنصر. أما hreflang فتوضع على رابط وتقول بأي لغة الصفحة المرتبطة، وهكذا توجّه المواقع محركات البحث إلى النسخ الأخرى من الصفحة بلغات مختلفة.

حدد لغة الصفحة

ضع السمة lang على العنصر <html>، مع رمز اللغة التي كُتبت بها صفحتك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

ليس للسمة أثر مرئي على هذه الفقرة، لكنها تغيّر طريقة التعامل مع الصفحة: يقرؤها قارئ الشاشة بصوت إنجليزي، ويستخدمها المتصفح حين يقرر هل يقترح ترجمة، ويستطيع المدقق الإملائي استخدامها لاختيار القاموس الإنجليزي. من دونها تضطر الأدوات إلى التخمين، وقد يقرأ قارئ شاشة مضبوط على لغة أخرى النص الإنجليزي بنطق خاطئ.

رموز اللغات

القيمة وسم لغة من معيار BCP 47. معظمها رمز لغة من حرفين، يتبعه اختياريًا رمز منطقة أو نظام كتابة:

الرمز	اللغة
`en`	الإنجليزية
`en-US`, `en-GB`	الإنجليزية كما تُستخدم في الولايات المتحدة، وفي المملكة المتحدة
`es`, `es-MX`	الإسبانية، والإسبانية كما تُستخدم في المكسيك
`pt-BR`	البرتغالية كما تُستخدم في البرازيل
`fr`, `de`, `it`	الفرنسية، الألمانية، الإيطالية
`ar`, `he`	العربية، العبرية (من اليمين إلى اليسار، انظر أدناه)
`ja`, `ko`	اليابانية، الكورية
`zh-Hans`, `zh-Hant`	الصينية بالحروف المبسطة، وبالحروف التقليدية

الرموز لا تتأثر بحالة الأحرف، لكن العرف أن تُكتب اللغة بأحرف صغيرة والمنطقة بأحرف كبيرة. أضف المنطقة فقط حين يكون التنوع مهمًا، فـ en قيمة كاملة وصحيحة.

أشياء تغيّرها lang ويمكنك رؤيتها

معظم آثار lang تخص البرمجيات، لكن بعضها يظهر على الشاشة. علامات التنصيص التي يضعها العنصر <q> تتبع اللغة، وكذلك قواعد حالة الأحرف:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

كل صف يحصل على نمط علامات التنصيص الخاص به. وفي العمود الأخير تعطي text-transform: uppercase نفسها «ISTANBUL» في الإنجليزية و«İSTANBUL» في التركية، لأن التركية تحتفظ بالنقطة على حرف i الكبير. غيّر lang في الصف التركي إلى en وستختفي النقطة. وتقسيم الكلمات التلقائي (hyphens: auto في CSS) يعتمد أيضًا على lang: يحتاج المتصفح إلى معرفة اللغة ليعرف أين يمكن كسر الكلمات.

حدد العبارات المكتوبة بلغة أخرى

lang تعمل على أي عنصر، لا على <html> وحده. حين تقتبس صفحة بلغة ما عبارة بلغة أخرى، أحط العبارة وأعطها رمزها الخاص. ويستطيع CSS استهداف اللغات بالمحدد :lang():

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

ينتقل قارئ الشاشة إلى النطق الفرنسي لعبارة «bon appétit» ثم يعود إلى الإنجليزية بعدها. و:lang(fr) تطابق أيضًا fr-CA وأي تنوع فرنسي آخر، وتطابق العناصر التي ترث اللغة من عنصر أعلى، وهذا ما يفوت محدد سمة مثل [lang="fr"].

اللغات المكتوبة من اليمين إلى اليسار: dir

العربية والعبرية والفارسية والأردية تُكتب من اليمين إلى اليسار. lang تسمّي اللغة، والسمة dir تحدد الاتجاه. الصفحة الكاملة بالعربية تستخدم الاثنتين على <html>:

<html lang="ar" dir="rtl">

ولعبارة قصيرة من اليمين إلى اليسار داخل صفحة من اليسار إلى اليمين، ضع الاثنتين على العنصر المحيط بها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

يصطف الاقتباس على اليمين وينتقل شريطه الأخضر إلى اليمين أيضًا، لأن border-inline-start تتبع الاتجاه. استخدام الخصائص المنطقية مثل margin-inline-start بدلًا من margin-left يُبقي التخطيطات صحيحة في الاتجاهين.

الفرق بين lang وhreflang

lang تصف محتوى العنصر. أما hreflang فتوضع على رابط وتصف الصفحة التي يشير إليها. المواقع التي لها ترجمات تسرد كل نسخة في <head> كي توجّه محركات البحث كل قارئ إلى النسخة المناسبة:

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

كل صفحة مترجمة تضبط مع ذلك lang الخاصة بها على <html>: lang="de" على الصفحة الألمانية.

أخطاء شائعة

ترك lang. قوالب كثيرة تنساها، فاضبطها بجانب doctype في كل صفحة.
نسخ lang="en" إلى الصفحات المترجمة. الصفحة الألمانية المعلّمة كإنجليزية تُقرأ بنطق إنجليزي. طابق المحتوى.
استخدام رمز دولة كلغة. lang="jp" وlang="gr" ليستا اليابانية واليونانية، فرمزاهما ja وel.
استخدام lang لتحديد الاتجاه. lang="ar" وحدها لا تجعل النص يسير من اليمين إلى اليسار. أضف dir="rtl".
كتابة lang="en_US". الفاصل شرطة: en-US.

الأسئلة الشائعة

ما وظيفة السمة lang في HTML؟

تعلن لغة محتوى العنصر. تستخدمها قارئات الشاشة لاختيار الصوت والنطق الصحيحين، وتستخدمها المتصفحات لاقتراح الترجمة واختيار علامات التنصيص وتقسيم الكلمات، وتستخدمها بعض أدوات التدقيق الإملائي لاختيار القاموس.

ماذا أضع في السمة lang لعنصر html؟

رمز لغة من معيار BCP 47: en للإنجليزية، وes للإسبانية، وfr للفرنسية، وja لليابانية. أضف منطقة فقط حين يكون ذلك مهمًا، كما في en-US أو en-GB أو pt-BR.

هل أستخدم lang="en" أم lang="en-US"؟

كلاهما صالح. en تكفي لمعظم الصفحات الإنجليزية. استخدم en-US أو en-GB حين يكون التنوع الإقليمي مهمًا، مثلًا للإملاء أو التواريخ أو نطق بعض الكلمات.

هل تؤثر السمة lang في تحسين محركات البحث؟

صرّح Google بأنه يكتشف اللغة من النص نفسه ولا يعتمد على السمة lang. اضبطها بشكل صحيح مع ذلك: محركات البحث الأخرى وأدوات الترجمة وقارئات الشاشة تستخدمها. ولربط النسخ المترجمة من الصفحة، استخدم روابط hreflang.

كيف أحدد نصًا بلغة أخرى؟

أضف lang إلى العنصر المحيط به: <span lang="fr">bon appétit</span>. تغيّر قارئات الشاشة النطق لتلك العبارة، ويستطيع CSS تنسيقها بـ :lang(fr).

ما الفرق بين lang وhreflang؟

lang تقول بأي لغة محتوى العنصر. أما hreflang فتوضع على رابط وتقول بأي لغة الصفحة المرتبطة، وهكذا توجّه المواقع محركات البحث إلى النسخ الأخرى من الصفحة بلغات مختلفة.

مفاهيم ذات صلة