للوسوم دلالات: لماذا يفشل حساء div

عندما تُبنى الصفحة من علامات div وspan فقط، نسمي ذلك حساء div. تبدو الشيفرة سليمة على الشاشة، لكنها بلا معنى في الخلفية.

تحمل معظم علامات HTML دلالات مضمّنة: فالزر زر، والعنوان عنوان. ويعرف المتصفح مسبقًا الغرض من كل واحدة.

إن div صندوق عام بلا أي معنى. فهو يجمع العناصر بصريًا، لكنه لا يخبر المتصفح أو تقنيات المساعدة بأي شيء عن دوره.

اختر العلامة الصحيحة، وستحصل على السلوك تلقائيًا. فالbutton الحقيقي قابل للتركيز والنقر باستخدام لوحة المفاتيح، ويُعلن عنه كزر. أما div المنسّق فلا يمتلك أيًا من ذلك.

يقرأ قارئ الشاشة الصفحة انطلاقًا من دلالاتها، لا من وحدات البكسل. ولا يمنحه حساء div شيئًا ليعلنه، فيسمع المستخدمون صوتًا مسطحًا ومربكًا.

تنضم العلامات التفاعلية الأصلية مثل button وa تلقائيًا إلى ترتيب التنقل باستخدام مفتاح Tab. أما div القابل للنقر فهو غير مرئي لمستخدمي لوحة المفاتيح فقط.

يمكنك تحويل div إلى زر شكليًا باستخدام أدوار ARIA ومعالجات المفاتيح، لكن ذلك يضيف شيفرة هشة تعيد اختراع ما تمنحه HTML أصلًا.

تعني العلامات الدلالية شيفرة أقل للكتابة والصيانة. إذ تتولى المنصة التركيز والنقر والإعلانات، فيقل ما يمكن أن تفسده.

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

قبل أن تكتب div، اسأل: هل توجد علامة ذات معنى لهذا؟ هل هي nav أو header أو button أو قائمة؟ اخترها أولًا، واجعل div خيارك الأخير.

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

لنختبر تكلفة حساء div.

للعلامات معنى، أما div فلا معنى له. اختر العناصر الحقيقية أولًا لتحصل مجانًا على دعم التركيز ولوحة المفاتيح وقارئ الشاشة. واترك div للتخطيط. 🎉