في الجزء الأول من هذه السلسلة غطينا الإخفاقات التي أدت إلى العناصر الهيكلية لـ HTML5 ، في هذا الجزء الثاني سنبحث بالتفصيل في عواقب تلك الإخفاقات.
لقد قلت عدة مرات أن HTML5 يقدم طريقة جديدة لتنظيم صفحة ويب ، وأنك ربما تتساءل عن ذلك في الواقع. هناك حق في المواصفات ، والتي يقدم مفهوم "تقسيم المحتوى ': محتوى الفصل هو محتوى يحدد نطاق العناوين والتذييلات. من المحتمل أن يكون لكل عنصر محتوى مقسم عنوانًا ومخططًا.
والمواصفات الوثائق نهجها ل العناوين والأقسام والمخططات التفصيلية لجعل هذا المفهوم واضحًا. حسنا ، واضحة لأولئك الذين لديهم لتنفيذ وظائف في المتصفحات. بالنسبة لنا لفهم العناصر الهيكلية لـ HTML (القسم ، المقالة ، الملاحة ، جانبًا ، والعناصر المرتبطة بها ، رأس الصفحة وتذييلها) ، وهذا المفهوم الغامض "تقسيم المحتوى" أو "الخطوط العريضة" ، نحتاج إلى القيام برحلة صغيرة عبر تاريخ HTML.
يمكن تتبع مفهوم الخطوط العريضة التي تم تقديمها في HTML5 حتى عام 1991 وتم تضمينها في مواصفات XHTML 2.0 غير الصالحة ، والنتيجة النهائية في HTML5 ... فقط حتى يتم توصيلها بطريقة سيئة للغاية ميت كثيرًا عند الوصول.
قبل HTML5 ، تم تحديد البنية الهرمية للصفحة بواسطة عناصر العنوان - أصدقائنا القدامى h1 حتى h6. يمكننا إنشاء صفحة بالقول أن عنوان الصفحة هو h1 ، وقد يكون عنوان المقالة h2 ، وربما تكون العناوين الفرعية في المقالة قد تكون h3 و h4 ، وهكذا.
هذا أمر جيد بالنسبة لمستند بسيط ، ولكن استخدام علامات العنوان لإنشاء تسلسل هرمي منطقي ، أو "مخطط المستند" ، لصفحة ويب معقدة ومعاصرة أمر صعب للغاية. جزء من المشكلة هو عدم وجود طريقة لتحديد المكان الذي يبدأ فيه قسم الصفحة ويتوقف. على سبيل المثال ، لنفترض أن لدينا مستندنا الذي تم ذكره سابقًا مع h1 لعنوان الصفحة ، h2 لعنوان المقالة ، h3 للعناوين الفرعية ، ولكن أراد بعد ذلك ترميز عنوان أقسام الشريط الجانبي لدينا مع عناوين h3 أيضًا.
ستوضح الوثيقة التي سيخلقها مثل هذا الهيكل شيئًا كالتالي:
My Old Blog
My Latest Blog Post
My Blog Post Sub Heading
My Blog Post Sub Heading
About Me
Archives
Social Links
وهنا ، فإن عناصر h3 "مملوكة" من خلال h2 فوقها ، حتى لو لم يكن ذلك منطقيًا. بالطبع ، سنقوم بتفصيل هذه الأشياء بشيء مثل div للمقالة ، و div للجانب الجانبي ، ولكن يتم تجاهلها من قبل وكلاء المستخدم (مثل قارئي الشاشة) الذين يحددون مخطط الصفحة من خلال عنوان البند وحده.
من خلال ربط التسلسل الهرمي للصفحة مباشرةً إلى مستويات العناوين العرضية في كثير من الأحيان ، فإننا نقتصر على كيفية تنظيم الصفحة.
في محاولة لحل هذه المشكلة ، يقدم HTML5 مفهوم "عناصر التقسيم" ، أي العناصر الخاصة التي تقسم الصفحة إلى أقسام - أنت تفكر بها - وتلك الأقسام تحدد مستوى التعشيش للرؤوس ، وفي الواقع التسلسل الهرمي أو "مخطط" للصفحة.
وهذا يعني أن التسلسل الهرمي للصفحة غير مفصول من عناصر العنوان ، وبدلاً من ذلك تحدد هذه العناصر الجديدة للعنصر مستوى عنصر العنوان بالفعل.
في المسودة الأولى مواصفات XHTML 2.0 ، يعمل المقطع مع عنصر قسم ، وعنصر h عام في العنوان. عند كتابة HTML ، فإننا لن نحدد مستوى العنوان الذي أردنا استخدامه ، بل سنسمح للمتصفح ببساطة بتحديد مستوى التداخل لعنوان معين. يمكننا أن نضع عناصر القسم في عمق 99 عنصرًا ، وسيعادل عنصر h في المستوى 99 عنصر h99. وبهذه الطريقة ، يمكننا تنظيم مستنداتنا منطقيًا ، دون القلق بشأن كيفية استخدام عناصر h1-h6 المحدودة.
(هذه الفكرة تعود بالفعل إلى عام 1991 ، بالمناسبة: كما جيريمي كيث مشيرا إلى أن تيم بيرنرز لي قام بنشر فكرة قسم و عنصر h في بناء صفحة في نهاية هذا البريد الإلكتروني أكتوبر 1991 .)
حاول Hickson تقديم هذا المفهوم نفسه في HTML5 ، ولكن مع درجة إضافية من الصعوبة: أراد الحفاظ على التوافق العكسي ، وإدخال بعض الدلالات الجديدة "لتبسيط التأليف" للتمهيد. لذلك ، بدلاً من مجرد وجود عنصر قسم في HTML5 ، لدينا أيضًا مقالة ، و nav ، وعنصر جانبي يعمل كل شيء بنفس القسم مثل القسم ، ولكن بأسماء مختلفة ، لاستخدامها بطرق مختلفة.
ماذا يقول المواصفات عن هذه العناصر؟ أنا أشجعك على قراءة المواصفات لنفسك ، ولكن هنا طعم:
عنصر القسم هو أساس التقسيم لإنشاء مخطط المستند.
يمثل عنصر القسم مقطعًا عامًا من مستند أو تطبيق. القسم ، في هذا السياق ، هو مجموعة مواضيعية للمحتوى ، وعادة ما يكون العنوان.
ومن أمثلة الأقسام الفصول ، أو الصفحات المتنوعة المبوبة في مربع الحوار المبوب ، أو الأقسام المرقمة بأطروحة. يمكن تقسيم الصفحة الرئيسية لموقع الويب إلى أقسام لمقدمة وأخبار ومعلومات جهة الاتصال.
تشير ملاحظة في المواصفات إلى أنه لا ينبغي استخدام العنصر لأغراض التصميم البحتة - فالأفضل أن يكون div أفضل هناك ، وهذا أمر مفهوم ، حيث أن إنشاء أقسام في التصميم للتمييز قد يؤدي إلى إنشاء مخطط مستند متقطع جدًا.
تنتقل الملاحظة لتقول "القاعدة العامة هي أن عنصر القسم مناسب فقط إذا كانت محتويات العنصر سيتم سردها بوضوح في مخطط المستند" وهذا هو أوضح بيان حول عنصر القسم في المواصفات.
عندما نفهم مفهوم التجزيء والتلخيص ، يكون إدراج عنصر القسم منطقيًا. لم تظهر في بحث قيم الصف المشترك ، لكنها ظهرت في XHTML 2.0 ، وتعود إلى المفهوم إلى عام 1991.
إن العناصر الهيكلية الأخرى التي يقدمها HTML5 - وهي العناصر التي يُفترض أنها تنعكس في البحث - تقوم بنفس الشيء كعنصر القسم ، بقدر ما يتعلق الأمر بمخطط المستند. كما أنها تنشئ التسلسل الهرمي للصفحة ، وبالتالي مخطط المستند.
خذ عنصر المقالة على سبيل المثال. يفترض الكثير من الناس أنه ببساطة لمقالات كهذه. لكن هذا ليس على الإطلاق. إنها "مقالة" بمعنى "مقال من الملابس". من الأفضل التفكير في "البند" كما في "عنصر من الملابس" ، حيث أن تعريفها واسع.
عندما تكون عناصر المقالة متداخلة ، فإن عناصر المقالة الداخلية تمثل مقالات من حيث المبدأ تتعلق بمحتويات المادة الخارجية. على سبيل المثال ، يمكن أن يمثل إدخال مدونة على موقع يقبل التعليقات التي أرسلها المستخدم التعليقات كجزء من عناصر المقالة المتداخلة في عنصر المقالة لإدخال المدونة.
في HTML5 ، تعليقات المستخدمين ، المقالة المناسبة ، مشاركات المنتدى ، وحتى "الأدوات الذكية والأدوات التفاعلية" كلها مقالات. التعريف واسع جدا بحيث يكون عديم الفائدة - من المفترض أن يعنى الدلالة معنى ، ولكن استخدام مصطلح جماعي لمثل هذه المجموعة الواسعة من العناصر يجعل العنصر بلا معنى.
هذا مثال واحد حيث قمنا بتقطيع المواصفات - عدد قليل من الناس يتبعون المواصفات بشكل صحيح ويصنعون كل شيء تقريبًا مقالة (ملخصات المدونات ، منشورات المدونات ، التعليقات ، الأدوات ، منشورات المنتدى ، إلخ) ، بينما يحتفظ بها الآخرون فقط للمادة الرئيسية في الصفحة ، والتي هي جزء واحد فقط من تعريفها الواسع. قد تعتقد أنه لا يهم في كلتا الحالتين ، وإلى حد كبير ستكون على حق. لكن فكر في جميع خدمات القراءة التي تهدف فقط إلى تحليل المحتوى الرئيسي للصفحة. ما تنفيذ المواصفات التي يجب أن يتبعوها؟ هل يجب أن يتبعوا ما تقوله المواصفات بالفعل ، أم يجب أن يتبعوا تطبيق المجتمع العام حيث عادة ما يكون هناك "مقال" واحد فقط على الصفحة؟
هذه فرصة ضائعة ، وما يحدث عندما تفشل المواصفات في التحديد بالفعل ، ويفشل المحرر ولكي يكون منصفًا ، المجتمع ، في توصيل ما تقوله المواصفات بالفعل.
تخيل لو لم يكن المقال يستخدم أيضا للتعليقات. تخيل لو أن التعليقات حصلت على عنصر خاص بها ، على سبيل المثال ، وأصبح التبني واسع الانتشار. يمكن لصانعي المستعرض إضافة وظيفة "تعليقات كتم الصوت" التي يمكن أن تخفي بسهولة (أو تحلل بطريقة أخرى) التعليقات على صفحات الويب. لكن Hickson رفض على وجه التحديد طلبًا لعنصر تعليق . في HTML5 ، يتم وضع المقالات على طول الطريق.
جانبًا ، هناك عنصر آخر لا يظهر في أي مكان في بحث اسم الفصل في Hickson ، ويحصل على تعريف غريب جدًا للتمهيد:
يمثل العنصر المضاف جزءًا من صفحة تتكون من محتوى يرتبط بشكل متناسب بالمحتوى حول عنصر جانبي ، ويمكن اعتباره منفصلاً عن ذلك المحتوى. يتم تمثيل هذه المقاطع في كثير من الأحيان على شكل أشرطة جانبية في الطباعة المطبوعة.
يمكن استخدام العنصر للتأثيرات المطبعية مثل علامات اقتباس أو أشرطة جانبية ، للإعلان ، لمجموعات عناصر التنقل ، وللمحتوى الآخر الذي يعتبر منفصلاً عن المحتوى الرئيسي للصفحة.
من يدري لماذا يجب أن يغطي جانباً كل من علامات الاقتباس ، والشرائط الجانبية ، والإعلان ، ومجموعات عناصر الملاحة ، ولكنه يخلق أيضاً أقساماً جديدة في مخطط المستند. هذا يعني أن عروض التسعير تحصل على نقطتها الخاصة في مخطط المستند ، والذي يبدو ، على سبيل المثال ، "غريب". ومرة أخرى ، فإن استخدام مصممي الويب ذوي النوايا الحسنة واستخدامه بشكل عشوائي ، سيخلق الكثير من الخطوط العريضة للوثائق المكسورة.
يبدو عنصر الملاحة الأكثر تميزًا في عناصر التقسيم ، ولله الحمد لم يمتد التعريف إلى ما بعد التكسر.
يمثل عنصر التنقل جزءًا من الصفحة يرتبط بصفحات أخرى أو بأجزاء داخل الصفحة: قسم يحتوي على ارتباطات تنقل.
وهو أمر جيد ، ويمكن أن يكون له مزايا إمكانية الوصول النظري (يمكن لوكيل المستخدم أن يتخطى روابط التنقل أو ينتقل إليها ، ولا يمكنه ذلك ، ولكن يمكنه ذلك).
تكمن المشكلة في أنه بروح "تبسيط التأليف" واستبدال div بعنصر التنقل ، فإننا نفجر تصميم التنقل لمجموعة فرعية أخرى من المستخدمين. مستخدمي IE6-8 مع جافا سكريبت إيقاف (تقترح أبحاث ياهو 1-2 ٪ من جميع المستخدمين لديهم جافا سكريبت ) هم ضحايا هذه المشكلة. مع إيقاف تشغيل جافا سكريبت ، لا تعمل رقاقة HTML5 المستندة إلى جافا سكريبت والتي تساعد IE6-8 على فهم عناصر HTML5 ، لذلك لا يقوم المتصفح بتصميم عناصر HTML5. هذا قد يؤثر فقط على عدد قليل من المستخدمين ، ولكن لماذا يؤثر عليهم على الإطلاق؟
تعتبر عناصر الرأس والتذييل حالة كلاسيكية تأخذ المصطلحات الشائعة وتعطيها استخدامات مختلفة جدًا.
وتنص المواصفات على عدم إنشاء أي من هذه العناصر أقسامًا جديدة في مخطط المستند ، على الرغم من حقيقة أنها غالباً ما يتم تصويرها على أنها متساوية مع القسم ، والتنقل ، والمقال ، وبصرف النظر. في الواقع ، لا يفعلون شيئًا على الإطلاق. يتم تضمينها فقط لترسيم المناطق في قسم محدد في مخطط المستند.
إليك ما تقوله المواصفات حول العنوان: يمثل عنصر العنوان مجموعة من المساعدات التمهيديّة أو الملاحية.
ملاحظة: من المفترض أن يحتوي عنصر الرأس عادة على عنوان القسم (عنصر h1 – h6 أو عنصر hgroup) ، ولكن هذا ليس مطلوبًا. يمكن أيضًا استخدام عنصر الرأس لملء جدول محتويات أحد الأقسام أو نموذج بحث أو أي شعارات ذات صلة.
وتذييل الصفحة: يمثل عنصر الذيل تذييلًا لمحتوى أقرب جزء من الجد أو جزء الجذر. يحتوي التذييل عادةً على معلومات حول قسمه مثل من قام بكتابته وروابط إلى المستندات ذات الصلة وبيانات حقوق النشر وما إلى ذلك.
في HTML5 ، يكون عنصر النص هو في الواقع عنصر قسم الجذر ، لذلك المقصود من رأس وتذييل عام لوصف قسم نص الجذر. يمكن أن يحتوي أي قسم على رأس و / أو تذييل - لا يقصد به فقط الرؤوس والتذييلات العامة ، كما قد نفترض. يمكن لكل تعليق فردي أن يكون له رأس وتذييل ، على سبيل المثال. في الواقع ، كما لمسنا سابقًا ، تعطي المواصفات في الواقع مثالًا للتذييل المستخدم في تعليق أعلى محتوى التعليق الفعلي. هذا صحيح ، في تعليقات HTML5 هي المقالات ، ويمكن أن يكون لها تذييل لرأس ، وهذا في المواصفات الفعلية. هل تريد عنصر تذييل لرأس تعليقاتك؟ لا؟ حسنا ، لديك واحدة.
مرة أخرى ، هذا هو المكان الذي تستخدم فيه HTML5 المصطلحات الشائعة ، ويستخدمها بطرق لا يمكن التعرف عليها لمؤلف الويب المشترك.
ولكن هناك شيء لم ننظر إليه في تنفيذ HTML للتقسيم. هل لاحظتها؟ لدينا عناصر التقسيم ، ولكن ليس لدينا عنصر h عام. لا داعي للقلق ، الحل هو في المواصفات :
قد تحتوي الأقسام على عناوين لأي رتبة ، ولكن يتم تشجيع المؤلفين بشدة إما على استخدام عناصر h1 فقط ، أو لاستخدام عناصر من الترتيب المناسب لمستوى تداخل القسم.
HTML5 تريد أن تكون متوافقة مع الإصدارات السابقة ، لذا قرر WHATWG عدم إدخال عنصر h (على الرغم من إدخال مجموعة من عناصر التقسيم الجديدة) ، وبدلاً من ذلك يريد إعادة توظيف عنصر h1 ليكون العنصر h العام. استخدم h1 في كل مكان ، ودع خوارزمية تحديد HTML5 تحدد مستواه الحقيقي ... أو هكذا تذهب النظرية.
هذه فكرة رهيبة لعدة أسباب ، أهمها إمكانية الوصول والتصميم.
استخدام h1 في كل مكان سيء للغاية للوصول. يعتمد المستخدمون الأعمى بشكل كبير على بنية عنوان الموقع. من المهم أن يتم تذكيرنا جميعًا بمدى أهمية بنية العنوان لأغراض الوصول. على سبيل المثال ، في ديسمبر مسح عام 2008 لأكثر من 1000 مستخدم قارئ الشاشة من خلال WebAIM ، وجد 76٪ من المستخدمين المكفوفين وضعاف البصر دائمًا أو غالبًا ما يتصفحون العناوين عند توفرها. ووجد مسح مايو 2012 أن مستويات العنوان 82.1٪ كانت "مفيدة جدًا" أو "مفيدة إلى حد ما" عند التنقل في صفحة الويب. (هذا جيد ، بحث عملي ، لذا خذ ملاحظة).
سيجعل استخدام h1s في كل مكان المواقع أكثر صعوبة في التنقل للمستخدمين المكفوفين. نظريًا ، يستخدم قارئو الشاشات خوارزمية مخطط HTML بدلاً من ذلك ويتنقلون باستخدام مخطط المستند ، ولكن بالنظر إلى الطريقة التي تم بها إخبار المؤلفين بتنفيذ عناصر التقسيم ، فإن الخطوط العريضة عبارة عن فوضى ، ومحاولة التنقل في الخطوط العريضة للوثيقة التي لم يتم التفكير فيها على الإطلاق سيكون أسوأ بالنسبة للمستخدمين المكفوفين.
توفر مواصفات HTML5 طريقة للخروج: استمر في استخدام مستويات h1-h6 المناسبة للحفاظ على التوافق مع الإصدارات السابقة. لكننا الآن نحتفظ بموجزين للوثيقة في الوثيقة الواحدة ، وبالنظر إلى المشكلات التي واجهها المؤلفون حتى في اعتبار مخطط المستند في المقام الأول ، احتمال وجود أي شخص يحتفظ بمنظور منطقي h1-h6 منطقيًا ، ومنطقيًا ، مخطط HTML5 -sectioned يبدو بعيدًا ، في أحسن الأحوال.
لكن الأمر يزداد سوءًا. دعونا نقول أننا نريد تشغيل مع مخطط HTML5 نقية ، ونحن نستخدم h1s في كل مكان. تذكر ، في مواصفات HTML5 ، h1 هو مجرد عنصر h عام ؛ يتم تحديد المستوى الحقيقي من خلال مدى عمقها المتداخلة في عناصر التقسيم.
إذن كيف نصممها؟ حسنًا ، يمكننا إضافة أسماء فئات إلى جميع عناصر h1 حتى نتمكن من اختيارها ، ولكن هذا يتعارض مع هدف HTML5 المحدد في تبسيط التأليف ؛ ويمكننا أيضًا الالتزام بـ h1-h6 (وجميعها تُعامل كعناصر h عامة في مخطط HTML5).
يمكننا محاولة ونمط لهم من خلال سلسلة ، ولكن هذا سرعان ما يصبح سخيفا ، كما وقد أشارت نيكول سوليفان . في الحقيقة ، "العبثية" تبدأ فقط في وصفها. عندما تفكر في التوليفات الممكنة للقسم ، والمقالة ، والتنقل ، والجانب ، وتريد إنشاء نمط عام لعنوان ، على سبيل المثال ، خمس مستويات عميقة (أي ما يعادل h5) ، سيكون عليك كتابة الأنماط للجميع تركيبات ممكنة ، والتي تحصل سخيفة تماما . إليك النمط العام لعنصر h3:
article aside nav h1, article aside section h1,article nav aside h1, article nav section h1,article section aside h1, article section nav h1, article section section h1,aside article nav h1, aside article section h1,aside nav article h1, aside nav section h1,aside section article h1, aside section nav h1, aside section section h1,nav article aside h1, nav article section h1,nav aside article h1, nav aside section h1,nav section article h1, nav section aside h1, nav section section h1,section article aside h1, section article nav h1, section article section h1,section aside article h1, section aside nav h1, section aside section h1,section nav article h1, section nav aside h1, section nav section h1,section section article h1, section section aside h1, section section nav h1, section section section h1 {font-size: 1.00em;}ومع ذلك ، فإن ما تقدمه لنا العناصر الهيكلية لـ HTML. ما هذه الفوضى.
متعطش للمزيد؟ الجزء الثالث من هذه المادة متاح الآن ، ويتوفر كتاب Luke's "The Truth About HTML5" لفترة محدودة من خلال الموقع الشقيق MightyDeals.com بسعر مذهل 50 ٪.
هل تستخدم عناصر المقالة عدة مرات في مستند؟ هل الأقسام مفيدة أم ينبغي لنا الالتزام بعناوين div؟ دعنا نعرف أفكارك في التعليقات.
صورة مميزة / صورة مصغرة ، الاستخدامات صورة الهيكل عبر Shutterstock.