رموز البلدان في HTML

رموز البلدان في HTML

أهلاً بك يا مهندس! اليوم بنتكلم عن موضوع بسيط لكنه مهم جداً في عالم HTML: رموز البلدان واللغات. يمكن تشوفها شي ثانوي، لكنها أساسية لتجربة مستخدم أفضل، تحسين محركات البحث (SEO)، وحتى لدعم إمكانية الوصول.

ليش نحتاج رموز البلدان واللغات؟

بكل بساطة، عشان المتصفحات ومحركات البحث والتقنيات المساعدة تفهم المحتوى اللي بتقدمه. هل المحتوى بالعربي؟ بالإنجليزية؟ هل هو موجه لجمهور معين في بلد معين؟ تحديد اللغة والمنطقة يساعد في:

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

سمة lang هي صديقك

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

أو

) لو عندك جزء معين من الصفحة بلغة مختلفة.

ملاحظة مهمة: استخدام lang مش بس للغة، ممكن تحدد فيها اللغة مع المنطقة. مثلاً، en للإنجليزية بشكل عام، لكن en-US للإنجليزية الأمريكية و en-GB للإنجليزية البريطانية. بالنسبة للعربية، ar للعربية بشكل عام، و ar-SA للعربية السعودية، ar-EG للعربية المصرية، وهكذا.

أمثلة على استخدام lang

لصفحة عربية بشكل عام:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحتي العربية</title>
</head>
<body>
    <p>هذا محتوى عربي.</p>
</body>
</html>

لاحظ هنا استخدمنا dir="rtl" كمان عشان نحدد اتجاه النص من اليمين لليسار، وهذا مهم جداً للغات اللي زي العربية.

لو عندك جزء معين بلغة مختلفة داخل صفحة أساسية:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحتي المتعددة اللغات</title>
</head>
<body>
    <p>هذا جزء من المحتوى الأساسي باللغة العربية.</p>
    <div lang="en" dir="ltr">
        <p>This part is in English.</p>
        <p>It has its own directionality set to LTR.</p>
    </div>
    <p>ونعود للمحتوى العربي مرة أخرى.</p>
</body>
</html>

من وين نجيب رموز البلدان واللغات؟

الرموز دي مش أي حاجة وخلاص، دي رموز قياسية عالمية. فيه معيارين أساسيين لازم تعرفهم:

  • ISO 639-1: لرموز اللغات (مثل en، ar، fr). دي رموز مكونة من حرفين.
  • ISO 3166-1 Alpha-2: لرموز البلدان/المناطق (مثل US، GB، SA). دي كمان رموز مكونة من حرفين.

لما تجمعهم مع بعض بتفصل بينهم بشرطة (-). مثلاً: en-US، ar-SA.

نصيحة سريعة: لو ما أنت متأكد من الرمز، فيه مواقع كتير بتوفر قوائم كاملة لرموز ISO. ابحث عن "ISO 639-1 codes list" أو "ISO 3166-1 alpha-2 codes list" وبتلاقي اللي تحتاجه.

استخدامات أخرى لرموز البلدان واللغات

مش بس سمة lang، فيه أماكن تانية بتستفيد من الرموز دي:

1. روابط اللغات البديلة (hreflang)

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

<head>
    <!-- الصفحة الأساسية بالإنجليزية الأمريكية -->
    <link rel="alternate" href="https://example.com/en-us/page.html" hreflang="en-US" />
    <!-- نفس الصفحة بالإنجليزية البريطانية -->
    <link rel="alternate" href="https://example.com/en-gb/page.html" hreflang="en-GB" />
    <!-- نفس الصفحة بالعربية السعودية -->
    <link rel="alternate" href="https://example.com/ar-sa/page.html" hreflang="ar-SA" />
    <!-- لغة افتراضية لأي لغة تانية (x-default) -->
    <link rel="alternate" href="https://example.com/" hreflang="x-default" />
</head>

2. في وسم meta

ممكن تحدد اللغة في وسم meta، لكن lang على وسم هو الأفضل والأكثر شيوعاً.

<head>
    <meta http-equiv="Content-Language" content="ar-SA" />
</head>

لكن زي ما قلنا، الأفضل والأكثر فعالية هو استخدام السمة lang مباشرة على وسم .

خلاصة الكلام

تحديد رموز البلدان واللغات في HTML هو ممارسة جيدة جداً، مش بس عشان تلتزم بالمعايير، لكن عشان تقدم تجربة مستخدم أفضل، وتساعد محركات البحث إنها تفهم محتواك بشكل أدق. لا تهملها في مشاريعك!

أتمنى يكون الدرس ده مفيد وسريع ومباشر زي ما طلبت. بالتوفيق في رحلتك مع HTML!