HTML Academy · درس

السمة lang وقارئات الشاشة

تحديد لغة الصفحة والعنصر لضمان النطق الصحيح

السمة lang وقارئات الشاشة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

وظيفة السمة lang

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

تعيينها على عنصر html

يجب أن تعلن كل صفحة لغتها الأساسية على العنصر الجذر: <html lang="en"> للإنجليزية، و<html lang="tr"> للتركية، و<html lang="ja"> لليابانية. من دون ذلك، تعود قارئات الشاشة إلى الإعداد الافتراضي لنظام المستخدم، فتنطق غالبًا كل كلمة نطقًا خاطئًا.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>

وسوم BCP-47

تتبع الوسوم معيار BCP-47: رمز اللغة (en أو tr أو ja)، مع إمكانية إضافة منطقة (en-US أو en-GB أو zh-Hant أو zh-Hans)، ونادرًا ما يُضاف رمز نظام الكتابة. استخدم الوسم الأكثر تحديدًا ودقة؛ ويكفي استخدام "en" وحده عندما لا يهم اختلاف التهجئة الإقليمية.

تغييرات اللغة في منتصف الصفحة

بالنسبة إلى قسم مكتوب بلغة مختلفة، حدّده باستخدام سمة lang الخاصة به: <blockquote lang="fr">Bonjour</blockquote>. تبدّل قارئة الشاشة الصوت لذلك القسم، فتنتج نطقًا دقيقًا حتى في الصفحات متعددة اللغات.

<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>

محددات اللغة في CSS

يمكن لـ CSS استهداف اللغة باستخدام :lang(en): blockquote:lang(fr)::before { content: "« "; }. يطابق المحدد سمة lang لأقرب عنصر سلف. استخدمه لتطبيق القواعد الطباعية التي تختلف حسب اللغة، مثل علامات الاقتباس والمسافات.

أهمية ذلك للنطق

يختلف نطق كلمة "Live" بين الإنجليزية والفرنسية. أما "Wir" في الألمانية فتُنطق "veer" لا "wear". ستنطق قارئة الشاشة المضبوطة على الإنجليزية الكلمتين نطقًا خاطئًا ما لم تُبلَّغ بأن القسم المحيط مكتوب بالألمانية أو الفرنسية.

استخدام hreflang للغات المرتبطة

تُخبر سمة hreflang الموجودة على الروابط (<a href="/fr/" hreflang="fr">Français</a>) محركات البحث والتقنيات المساعدة بلغة الصفحة المرتبطة. ادمجها مع وسوم روابط hreflang على مستوى الموقع لتغطية SEO الدولية بالكامل.

اكتشاف لغة المستخدم

يمكن لـ JavaScript قراءة اللغات التي يفضّلها المستخدم من navigator.languages، وهي مصفوفة من وسوم BCP-47 مرتبة حسب الأولوية. استخدمها لاختيار إعداد محلي افتراضي أو لاقتراح تبديل اللغة، لكن احترم دائمًا اختيار المستخدم الصريح قبل إعداد المتصفح الافتراضي.

الاكتشاف من جانب الخادم

يسرد رأس طلب HTTP Accept-Language تفضيلات لغة المستخدم المأخوذة من إعداد المتصفح. استخدمه على الخادم لإرسال HTML المترجم المناسب عند الطلب الأول، حتى يرى المستخدم لغته قبل تنفيذ أي JavaScript.

لغات متعددة في صفحة واحدة

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

الأخطاء الشائعة

من الأخطاء الشائعة جدًا غياب lang عن <html>، أو استخدام رمز لغة غير صحيح (lang="english" بدلًا من lang="en")، أو استخدام رموز المناطق عندما تكفي اللغة وحدها. استخدم أداة التحقق من W3C وتدقيق إمكانية الوصول في Lighthouse لاكتشاف هذه الأخطاء في CI.

اختبار المعرفة

لماذا تُعد سمة lang على مهمة بصفة خاصة لمستخدمي قارئات الشاشة؟

الملخص

أعلن لغة الصفحة على <html> باستخدام وسم BCP-47 (en أو tr أو ja أو zh-Hant). حدّد تغييرات اللغة في منتصف الصفحة باستخدام سمات lang على span أو section، كي تبدّل قارئات الشاشة أصواتها. يمكن لـ CSS :lang() تطبيق قواعد طباعية خاصة باللغة. عيّن lang دائمًا؛ فهو لا يكلّف شيئًا ويحسّن بدرجة كبيرة نطق قارئات الشاشة وSEO والاستهداف في CSS.

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

هل درس «السمة lang وقارئات الشاشة» مجاني؟

نعم — نص درس «السمة lang وقارئات الشاشة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «السمة lang وقارئات الشاشة»؟

تحديد لغة الصفحة والعنصر لضمان النطق الصحيح تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «السمة lang وقارئات الشاشة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy