في الجزء الأول من هذه السلسلة نظرنا في أوجه القصور التي أدت إلى العناصر الهيكلية الجديدة في HTML5 ؛ في الجزء الثاني من السلسلة نظرنا بالتفصيل في عواقب تلك الإخفاقات ؛ في هذا الجزء الأخير سنبحث عن طريقة للمضي قدمًا ، واستخلاص بعض النتائج حول الوضع الحالي للعب.

هذه ليست مشكلة مجردة: يجب على الناس تعليم هذه الأشياء. سيتم تعليم الجيل التالي من مصممي ومطوري الويب باستخدام HTML5 كنقطة بداية. أشعر بالأسف لكل من حاول وشرح الخطوط العريضة والتقسيم إلى مجموعة الطلاب الحالية والمستقبلية. ربما سوف يلتزمون بحكمة بالنسق البسيط الذي لدينا والذي لا يزال يعمل بشكل جيد: استخدم divs مع إما معرف أو class / es.

من المنطقي أن نقترح أن وكلاء المستخدم ربما في المستقبل ، مثل المتصفحات وقارئات الشاشة ، سيعملون أكثر مع العناصر الهيكلية لـ HTML5 ، وهذا سيجعلهم أكثر قبولا لنا كمؤلفين.

اقترح اوبرا بروس لوسون فقط هذا على قائمة بريدية WHATWG في عام 2009 :

بعد كل شيء ، لا أعرف أي وكلاء مستخدم يمكنهم استخدام الوقت ، القسم ، التذييل ، الخ ، لكننا نتوقع غالبًا أن يكون هناك قريبًا.

وإليكم ما قاله Hickson ، محرر HTML5 ، ردا:

انا لا. الغرض من معظم العناصر الجديدة هو تسهيل عملية التصميم ، حتى لا نضطر لاستخدام الفصول الدراسية.

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

هل نحتاج إلى المزيد من الدلالات في HTML؟

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

من ناحية ، أنا أوافق. من حيث تنظيم صفحة ويب أساسية ، أود أن أقول أننا سنكون أفضل حالاً بدون عناصر تقسيم HTML كليًا. ما كان مرة واحدة تمارس عملية مباشرة في استخدام divs فوضى معقدة في HTML5 من دون مكسب صافي.

ومع ذلك ، من حيث الدلالات بشكل عام ، هناك حالات يمكن فيها إضافة المزيد من المعاني إلى أعلى بنية صفحة الويب الخاصة بنا (سواء أكانت HTML4 أو 5 أو أي مما يأتي لاحقًا) باستخدام سمات إضافية على العناصر الموجودة لدينا.

ARIA للوصول

واحدة من أسهل الأشياء للتنفيذ على موقع موجود أو جديد هي معالم ARIA. (تمثل ARIA تطبيقات الإنترنت الغنية التي يسهل الوصول إليها وهي عبارة عن مواصفات تحدد طريقة لجعل تطبيقات الويب وصفحات الويب أكثر سهولة.)

تمثل معالم ARIA مجموعة فرعية من مواصفات ARIA الشاملة ، ونوعًا بسيطًا من البيانات الوصفية التي تسمح للمستخدمين المكفوفين وضعاف البصر مع قارئات الشاشة بالانتقال إلى الأجزاء المهمة من الصفحة ، أي "المعالم". نضيف ببساطة role = "landmark-name" إلى عنصر موجود ، بنفس الطريقة التي نضيف بها class = "class-name" إلى عنصر. معالم AIRA هي تمت مناقشتها مقارنة بـ HTML5 هنا .

تمثل معالم ARIA تطابقًا أفضل بكثير لما نفعله حاليًا. التسمية هي غير مجدية ، ولكن على الأقل أنها تعكس ممارسة التأليف الفعلي على الويب. على سبيل المثال ، يمكننا استخدام:

  • لافتة لرأس الصفحة الكلي.
  • الملاحة للتنقل.
  • مكمل للقضبان الجانبية.
  • contentinfo للتذييل.
  • الرئيسية لمنطقة المحتوى الرئيسية.

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

تمثل معالم ARIA حلًا بسيطًا يعمل على تحسين خيارات التنقل لمستخدمي قارئ الشاشة ، دون الخوض في المنطقة الغامضة لوثيقة HTML التي يتم تحديدها. فهي سريعة وسهلة التنفيذ ، ويجب أن تكون جزءًا من نموذج مشروع HTML الأساسي.

محركات البحث

لذلك لدينا المزيد من الدلالات للوصول ، ولكن لدينا أيضًا المزيد من الدلالات المتاحة لمحركات البحث أيضًا.

أولاً ، اسمحوا لي أن أكون واضحًا تمامًا أن عناصر HTML5 ليس لها أي فائدة لكبار المسئولين الاقتصاديين على الإطلاق. إنها خرافة ، ونحن بحاجة لوضعها في السرير. إن استخدام علامة المقالة لن يساعدك أو يزيد من مرتبة العميل الخاص بك أعلى من الرجل التالي. يمكنك الوثوق في فهم Google لكيفية العثور على المحتوى الخاص بك وترتيبه الآن.

ومع ذلك ، تحرص محركات البحث على فهم أفضل طريقة لعرض محتوى الويب (ملاحظة: ليس مرتبة ) بطريقة أكثر تنظيمًا.

ولذلك ، فإن محركات البحث الرئيسية ، على مر السنين ، وضعت أو اعتمدت الطرق القياسية الحالية لترميز البيانات المنظمة في صفحة الويب حتى يتمكنوا من استخراج المعلومات المناسبة. على سبيل المثال ، عند البحث عن التعليقات ، ربما لاحظت أن تقييمات النجوم تظهر في أهم نتائج Google. هذه حالة من محركات البحث التي تكون قادرة على استخراج درجة المراجعة بطريقة موحدة ، وتحسين عرض نتائجها. وصفات الطعام هي مثال آخر ، حيث يتم سرد وقت الطهي لكل نتيجة. على الرغم من أن هذه البيانات لا تحسن من رتبة الموقع ، إلا أن النتيجة الأكثر تفصيلاً قد تشجع المزيد من المستخدمين على النقر ، لذا هناك فائدة محتملة في الموقع ، وغالبًا ما يكون ذلك ضروريًا في حالة سباق التسلح حيث يقوم جميع منافسيك بذلك على أي حال.

في حين أن هذا النوع من البيانات الغنية كانت موجودة لفترة من الوقت في مظاهر متنوعة ، فقط في العام الماضي محركات البحث الرئيسية أطلقت مجموعة واسعة جديدة من المعايير لهذا النوع من البيانات المنظمة. إنهم يطلقون عليهم "مخططات" ، ويسكنون فيها Schema.org . وهي تستخدم معيار microdata لـ HTML ، وقد تم تنفيذها بالفعل من قِبل أمثال eBay و IMDB و Rotten Tomatoes وغيرها.

هذا هو أكبر قفزة نحو شبكة أكثر الدلالي منذ سنوات ، ومع ذلك تم القيام به وراء أبواب مغلقة مع ضجة صغيرة ودون أي عملية معايير على الإطلاق. لقد تم إسقاطها علينا دون سابق إنذار ، ومنذ ذلك الحين تم نقلها في الغالب تحت رادار مجتمع تصميم الويب. هناك الكثير من التداخل مع دلالات HTML5 أيضًا ، على سبيل المثال ، هناك مخططات لـ مقالات على الويب صفحات والويب عناصر الصفحة ، من بين المزيد من المخططات التي تتضمن كل شيء من حلقات تلفزيونية إلى حالات طبيه . انها ايضا الطريقة الموصى بها لوصف مقاطع الفيديو على الويب.

بعد كل الجدل حول دلالات لغة تأشير النص الفائق (وغيابها) ، أوضحت محركات البحث أنها تريد بيانات أكثر دلالة في ترميزنا ، ولكن سيحدث ذلك فوق الهياكل القائمة ، وليس مع عناصر جديدة.

ولكن من المؤكد أنه بالنسبة لنا كمجتمع يهتم بمعايير الدلالة والمعايير الشبكية ، فإن أسلوب HTML المعيّن ، المعيب إلى الدلالات اللغوية ، أو المقاربة المغلقة والمغلقة في أي مكان من محركات البحث الرئيسية هو أفضل طريق إلى الأمام.

في بعض الحواس ، تم سحب خيال HTML1 الدلالي ؛ الأمر متروك لنا لاحتواء الضرر. أما بالنسبة إلى schema.org ، فهو عالم جديد تمامًا ، وواحد يجب أن نتحقق منه عن كثب ، أو أن مجموعة صغيرة أخرى ستحدد ما لدينا - ولشبكة الويب - أفضل مصالح لنا. في الواقع ، ربما حدث بالفعل.

الاستنتاجات

دعونا نختتم ببعض الاستنتاجات.

  • العناوين مهمة: أولاً ، يجب أن نهتم ببنية عنوان صفحاتنا لمساعدة المستخدمين المكفوفين وضعاف البصر الذين يحاولون الالتفاف على قارئات الشاشة. قد تكون عناصر h1-h6 الموقرة محدودة ، لكنها تعتمد بشكل كبير على مستخدمي قارئ الشاشة.
  • بنية HTML5 عبارة عن فوضى: يجب علينا تجاهل عناصر بنية HTML تمامًا. لقد كانت كارثة إلى حد ما - لقد قمنا بتشتيت المواصفات الأساسية ، وخلقنا الكثير من الخطوط العريضة المكسورة ، وأهدروا الكثير من الوقت بالفعل في محاولة للحصول على رؤوسنا حول نظام متكسر جوهريًا. تحيا divs
  • ضع في الاعتبار معالم ARIA: إن إضافة معالم ARIA إلى موقعك هي طريقة أخرى بسيطة وفعالة لمساعدة مستخدمي قارئ الشاشة.
  • ضع في اعتبارك schema.org ومستقبل الدلالات: يحتوي موقع schema.org على دعم محركات البحث الرئيسية ، وعلى الرغم من أنه بالتأكيد حقيبة مختلطة في الوقت الحالي ، يبدو أنه مستقبلي للبيانات المنظمة على الويب.

هناك الكثير من الأجزاء الجيدة في مواصفات HTML5 ، بدءًا من ميزات النماذج الجديدة إلى واجهة برمجة تطبيقات History و Canvas. في الواقع ، بدون WHATWG ، الذين كانوا القوة الدافعة وراء HTML5 ، ما زلنا عالقين مع HTML4 / XHTML 1.0 بينما انتظرنا W3C للحصول على عملهم معا. ومع ذلك ، لمجرد أن HTML5 وجميع التقنيات ذات الصلة من حوله جديدة ومثيرة ، لا يعني ذلك أنه يجب علينا قبول كل شيء نقدمه.

في بعض الأحيان ، من المفيد رؤية كيفية صنع سجق HTML ، لذلك نعرف ما نأكله. وفي حالة الدلالات الهيكلية لـ HTML ، فأنا أفضل.

متعطش للمزيد؟ يتوفر كتاب Luke's "Truth About HTML5" لفترة محدودة من خلال الموقع الشقيق MightyDeals.com بسعر مذهل 50 ٪.

هل استخدمت معالم ARIA أو Schema.org؟ هل ترى مستقبلًا لعناصر HTML5 البنيوية؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، الاستخدامات صورة الهيكل عبر Shutterstock.