HTML / رموز اللغات
تحديد لغة الصفحة
تحديد لغة الصفحة يعني الإشارة إلى اللغة الأساسية التي تم كتابة محتوى الصفحة بها. على الرغم من أنه أمر اختياري، إلا أنه يُفضل القيام بذلك لتحسين تجربة المستخدم وضمان عرض المحتوى بشكل صحيح، خاصة بالنسبة لمحركات البحث.
لتحديد لغة الصفحة، نقوم بإضافة خاصية lang
إلى وسم الصفحة الأساسي <html>
، مع تمرير الأحرف المخصصة للإشارة إلى اللغة.
الأحرف التي تستخدم للإشارة إلى اللغات
تستخدم رموز مكونة من حرفين للإشارة إلى اللغات، وهذه الرموز تعتمد على نظام المعايير العالمي ISO 639-1. إليك بعض الأمثلة:
اللغة |
الرمز |
شرح |
---|---|---|
العربية | ar | تستخدم للإشارة إلى اللغة العربية، وهي لغة رسمية في العديد من الدول العربية. |
الفرنسية | fr | تستخدم للإشارة إلى اللغة الفرنسية، وهي لغة رسمية في العديد من الدول، بما في ذلك فرنسا وكندا. |
الإنجليزية |
en | تستخدم للإشارة إلى اللغة الإنجليزية، وهي واحدة من أكثر اللغات استخدامًا في العالم. |
الألمانية | de | تستخدم للإشارة إلى اللغة الألمانية، وهي لغة رسمية في ألمانيا وبلدان أخرى. |
الإسبانية | es | تستخدم للإشارة إلى اللغة الإسبانية، وهي لغة رسمية في العديد من الدول الناطقة بالإسبانية. |
الإيطالية | it | تستخدم للإشارة إلى اللغة الإيطالية، وهي اللغة الرسمية في إيطاليا. |
البرتغالية | pt | تستخدم للإشارة إلى اللغة البرتغالية، وهي لغة رسمية في البرتغال والبرازيل. |
الروسية | ru | تستخدم للإشارة إلى اللغة الروسية، وهي لغة رسمية في روسيا ودول أخرى. |
الصينية | zh | تستخدم للإشارة إلى اللغة الصينية، وهي واحدة من أكثر اللغات تحدثًا في العالم. |
المثال الأول: صفحة باللغة الفرنسية
في هذا المثال، نقوم بإعلام المتصفح بأن اتجاه الصفحة هو من اليسار إلى اليمين، وأن محتواها باللغة الفرنسية:
خد الكواد نسخ واضغط هنا جرب الكود<!DOCTYPE html> <!-- في المثال التالي قمنا بتحديد أن إتجاه محتوى الصفحة هو من اليسار إلى اليمين و أن لغة الصفحة الأساسية هي الفرنسية --> <html dir="ltr" lang="fr"> <body> <p>Nos amis au Maroc et en Algérie parlent le français.</p> </body> </html>
المثال الثاني: صفحة باللغة العربية
في هذا المثال، نقوم بإعلام المتصفح بأن اتجاه الصفحة هو من اليمين إلى اليسار، وأن محتواها باللغة العربية:
<!DOCTYPE html> <!-- في المثال التالي قمنا بتحديد أن إتجاه محتوى الصفحة هو من اليمين إلى اليسار و أن لغة الصفحة الأساسية هي العربية --> <html dir="rtl" lang="ar"> <body> <p>تصميم المواقع ممتع جداً, كلما تعمقت به كلما أحببته أكثر.</p> </body> </html>
المثال الثالث: صفحة تحتوي على محتوى عربي وإنجليزي
في هذا المثال، نعرض صفحة تحتوي على محتوى باللغة العربية وبعض الجمل باللغة الإنجليزية. سنحدد اتجاه الصفحة إلى rtl
، مع تحديد الاتجاه للجمل الإنجليزية بشكل منفصل:
<!DOCTYPE html> <html dir="rtl" lang="ar"> <body> <h2>دورة تعلم الإنجليزية للمبتدئين</h2> <p>فيما يلي بعض الجمل التي نستخدمها في الحياة اليومية:</p> <p dir="ltr">Good morning, how are you today?</p> <p>صباح الخير، كيف حالك اليوم؟</p> </body> </html>
المثال الرابع: صفحة متعددة اللغات
في هذا المثال، نعرض صفحة تحتوي على نصوص بأكثر من لغة. سنستخدم خاصية lang
لتحديد اللغة المناسبة لكل قسم من النصوص:
<!DOCTYPE html> <html lang="en"> <body> <h2>Welcome to the Language Page</h2> <p>This page contains text in multiple languages.</p> <p lang="fr">Bonjour, comment ça va?</p> <p lang="ar">مرحباً، كيف حالك؟</p> </body> </html>