رموز اللغات في HTML

رموز اللغات في HTML

أهلاً بك يا مهندس! اليوم سنتكلم عن شيء بسيط لكنه مهم جداً في عالم الويب: رموز اللغات في HTML.

إيش هي رموز اللغات؟

بكل بساطة، هي أكواد تعريفية تحدد اللغة المستخدمة في جزء معين من صفحة الويب. زي لما تقول: "هذا النص مكتوب بالعربي"، أو "هذا الجزء بالإنجليزي".

ليش نحتاجها؟

  • لتحسين تجربة المستخدم (UX): المتصفحات ممكن تعرض الخطوط بشكل أفضل، أو تساعد في الترجمة الآلية.
  • لتحسين الوصولية (Accessibility): قارئات الشاشة (Screen Readers) بتعرف أي لغة تقرأ بها النص، وهذا ضروري جداً للمستخدمين ذوي الاحتياجات الخاصة. تخيل قارئ شاشة بيحاول يقرأ نص عربي بلكنة إنجليزية! كارثة.
  • لتحسين محركات البحث (SEO): محركات البحث زي جوجل بتفهم محتوى صفحتك بشكل أفضل، وبالتالي بتحسن ترتيبها في نتائج البحث للغات المستهدفة.
  • لتطبيق قواعد CSS: أحياناً تحتاج تطبق ستايلات معينة بناءً على اللغة.

كيف نستخدمها؟ (خاصية lang)

نستخدم خاصية lang (اختصار لـ language) في وسم <html> أو في أي وسم آخر داخل الصفحة.

ملاحظة: أفضل مكان لوضع خاصية lang هو في وسم <html> نفسه، لأنه يحدد اللغة الافتراضية لكل الصفحة.

مثال على وسم <html>

لو صفحتك كلها بالعربي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة عربية</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه صفحة ويب مكتوبة باللغة العربية.</p>
</body>
</html>

ولو كانت صفحتك بالإنجليزي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a web page written in English.</p>
</body>
</html>

تحديد اللغة لأجزاء معينة

لو عندك صفحة باللغة العربية، لكن فيها فقرة أو كلمة باللغة الإنجليزية، تقدر تحدد لغة هذا الجزء فقط.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة متعددة اللغات</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه صفحة ويب مكتوبة باللغة العربية. وفيها جملة باللغة الإنجليزية: <span lang="en">Hello, how are you?</span></p>
    <p lang="fr">Bonjour le monde!</p>
</body>
</html>

أمثلة على رموز اللغات الشائعة

  • en: الإنجليزية
  • ar: العربية
  • fr: الفرنسية
  • es: الإسبانية
  • de: الألمانية
  • zh: الصينية
  • ja: اليابانية
  • ru: الروسية

اللغات الفرعية (Subtags)

أحياناً تحتاج تحدد لهجة معينة أو منطقة جغرافية للغة. هنا نستخدم اللغات الفرعية.

  • en-US: الإنجليزية (الولايات المتحدة)
  • en-GB: الإنجليزية (المملكة المتحدة)
  • ar-SA: العربية (السعودية)
  • ar-EG: العربية (مصر)
  • es-MX: الإسبانية (المكسيك)
تذكر: الجزء الأول (مثل en) هو رمز اللغة الأساسي، والجزء الثاني (مثل US) هو رمز البلد.

أفضل الممارسات

  • دائماً استخدم lang في وسم <html>: هذا يحدد اللغة الافتراضية للصفحة بأكملها.
  • كن دقيقاً: إذا كان لديك محتوى بلغات مختلفة، حدد اللغة لكل جزء على حدة.
  • استخدم رموز ISO: الرموز المكونة من حرفين (مثل en, ar) هي رموز ISO 639-1. أما الرموز المكونة من أربعة أحرف (مثل en-US) فتتبع معيار ISO 3166-1 alpha-2 لرموز البلدان.

وبس يا صاحبي! موضوع بسيط لكنه بيفرق كثير في جودة صفحتك وتجربة مستخدميها. لا تهمله أبداً!