-ق و -الصورة رغم ذلك ، كما ليس لديك لتخلي عنها تماما. فهي لا تزال الخيار الأفضل لتجميع المحتوى فقط لأغراض التصميم وفي حالات الملاذ الأخير.

دلالات النص في HTML5

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

ربما تكون العلامات الدلالية الأكثر شيوعًا على مستوى النص هي و , لكنها موجودة أيضا قبل HTML5. من بين العناصر الدلالية الجديدة المضمنة يمكننا أن نجد على سبيل المثال , علامة ل تاريخ البشرية المقروءة, و إلى عن على نص بارز.

راجع هذه القائمة لجميع العناصر الدلالية على مستوى النص المستخدمة حاليًا.

مخطط المستند في HTML5

مخطط المستند هو بنية مستند HTML. يوضح كيف ترتبط العناصر ببعضها البعض. تم إنشاء مخطط المستند فقط من خلال عناصر التعيين ، مثل العناوين وعناوين الجداول وعناوين النماذج وغيرها في الإصدارات السابقة من HTML مثل HTML4.01 و XHTML.

في HTML5 ، تم تحسين خوارزمية المخطط التفصيلي بعناصر مقطع جديدة ، وهي:

• إلى عن على أقسام مجمعة حول موضوع معين
• إلى عن على مؤلفات كاملة أو قائمة بذاتها مثل وظيفة بلوق أو القطعة
• إلى عن على كتل التنقل
• إلى عن على محتوى تكميلي مثل الشريط الجانبي.

هناك عنصر قسم خامس في HTML5 ، لكنه ليس جديدًا ، إنه العنصر العلامة. ال

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

نصائح للمحتوى الدلالي

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

1. عنصر التقسيم الأبعد هو دائما بطاقة.

2. أقسام في HTML5 يمكن أن تكون متداخلة.

3. كل قسم له التسلسل الهرمي الخاص به. كل منهم (حتى القسم المتداخل الأعمق) يمكن أن يكون H1 بطاقة.

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

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

6. المقاطع التي يحددها

, و ال لا تنتمي العلامات إلى المخطط الرئيسي لوثيقة HTML ، فعادة ما لا يتم تقديمها في البداية بواسطة التقنيات المساعدة.

7. كل قسم (نص ، قسم ، مقالة ، جانبا ، التنقل) يمكن أن يكون له قسم خاص به

و العلامات ، التي تحدد الرأس (مثل الشعار واسم المؤلف والتواريخ ومعلومات التعريف وما إلى ذلك) وتذييل الصفحة (حقوق الطبع والنشر والملاحظات والروابط ، إلخ) لهذا القسم.

مثال: مخطط الدلالي

دعونا نرى مثالًا على مخطط تفصيلي للمستند الدلالي لنرى كيف يعمل بشكل أوضح. سيؤدي رمز المثال الخاص بنا إلى بنية المستند التالية:

وهنا هو الكود مع التقسيم الدلالي السليم:

  
 
مرحبا بكم على موقعنا!
 
هنا شعارنا وشعارنا.
 
  
 
 
عنوان المقال
 
العنوان الفرعي للمادة
 
 
 
الجزء المنطقي الأول (مثل "النظرية")
 
الفقرة 1 في القسم الأول
 
بعض العناوين الفرعية الأخرى في القسم الأول
 
الفقرة 2 في القسم الأول
 
 
 
الجزء المنطقي الثاني (مثل "الممارسة")
 
الفقرة 1 في القسم الثاني
 
الفقرة 2 في القسم الثاني
 
  
    

إذا ألقيت نظرة على مقتطف الشفرة أعلاه ، فسترى أن الرؤوس والتذييلات اختيارية ، يمكننا أن نختار بحرية ما إذا كنا نريد استخدامها أم لا ، ولكن ينصح بشدة أن تشمل دائما عنوانا لكل قسم, وإلا فإن القسم سيكون “بدون عنوان” في مخطط المستند.

لحسن الحظ ، هناك العديد من الأدوات الرائعة في جميع أنحاء الإنترنت والتي تتيح لنا التحقق من مخطط المستند ، وهذه المرة سنستخدم أداة Outliner من html5.org.

إذا قمنا بإدراج مقتطف الشفرة الخاص بنا في النموذج الذي يوفره المخطط التفصيلي ، ثم انقر فوق “الخطوط العريضة لهذا!” زر ، سنرى النتيجة التالية:

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

إذا كنت تريد أن تبدو كيف يبدو قسم بلا عنوان في Outliner ، فما عليك سوى حذف بعض علامات العناوين في رمز المثال.

جوانب أخرى من دلالات الويب

لا تعد علامات HTML الدلالية ومخطوطات المستندات سوى جزءًا صغيرًا من دلالات الويب. يمكن جعل محتوى صفحة الويب أكثر جدوى بمساعدة بروتوكول الوصول إلى WAI-ARIA ، والبيانات المهيكلة التي يمكن استخدامها مع بروتوكول RDFa أو البيانات الجزئية أو ترميز JSON-LD.