الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

القسم 1. هيكلة المحتوى مع علامات HTML5 الدلالية

1.1. بناء

  • يسمح لنا HTML بهيكل المستند وفقًا لمعنى المحتوى
  • div ، يتم استخدام علامات الجدول لإنشاء بنية ، تخطيط ولكنها ليست دلالية
  • علامات HTML الدلالية - بنية صفحة الويب لإظهار المعنى ، وليس فقط التخطيط
  • تساعد العناصر الهيكلية/المقاطع الدلالية HTML على إنشاء صفحات أكثر قابلية للقراءة ، ويمكن الوصول إليها ، ومحرك بحث أفضل ، وسهلة التعديل/التحديث
  • يصف عنصر الدلالي بوضوح معناها لكل من المتصفح والمطور

ملاحظة : يتم دعم العناصر الدلالية HTML5 في جميع المتصفحات الحديثة.

HTML العناصر عناصر التقسيم

H1 إلى H6

HTML5 العناصر الهيكلية/المقاطع الدلالية

علامة يستخدم
<main> يحدد المحتوى الرئيسي لمستند
<header> يحدد رأسًا لمستند أو قسم
<nav> يحدد روابط التنقل
<section> يحدد قسم في وثيقة
<article> يحدد مقال.
<aside> يحدد المحتوى بصرف النظر عن محتوى الصفحة
<footer> يحدد تذييل توثيق أو قسم

لماذا تم تقديم HTML5 العناصر الهيكلية/المقسمة الدلالية؟

  • في وقت سابق مع HTML ، استخدم المطورون/قاموا بإنشاء أسماء المعرف/الفصول الدراسية الخاصة بهم لأسلوب النمط مثل الرأس ، تذييل ، قمة قناة ، قاع ، القائمة الرئيسية ، NAV - التنقل ، حاوية أسفل اليسار اليسرى اليسرى ، المحتوى ، المقالة اليسرى ، الشريط الجانبي الأيمن ، إلخ.
  • هذا جعل من الصعب ومن المستحيل على محركات البحث تحديد محتوى صفحة الويب الصحيح أيضًا مطور للمتصفح وتحرير محتوى
  • مع العناصر الدلالية/ذات معنى HTML5 الجديدة مثل ( <header> <footer> <nav> <section> <article> <aside> ) ، سيصبح هذا أسهل
  • العناصر الدلالية/ذات معنى HTML5 تجعل الصفحات أكثر قابلية للقراءة للآلات بالإضافة

  • وفقًا لـ W3C ، شبكة دلالية: "يسمح بمشاركة البيانات وإعادة استخدامها عبر التطبيقات والمؤسسات والمجتمعات"

تنفيذ التسلسل الهرمي الهيكلي

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

  • من الأفضل أن use a single <h1> per page - هذا هو العنوان الأعلى ، وجميع الآخرين يجلسون تحت هذا في التسلسل الهرمي
  • تأكد من استخدام العناوين بالترتيب الصحيح في التسلسل الهرمي. لا تستخدم <h3>s لتمثيل العناوين الفرعية ، تليها <h2>s لتمثيل العناصر الفرعية-هذا لا معنى له وسيؤدي إلى نتائج غريبة

لماذا نحتاج بنية؟

  • يميل المستخدمون الذين ينظرون إلى صفحة ويب إلى البحث بسرعة للعثور على المحتوى ذي الصلة. إذا لم يتمكنوا من رؤية أي شيء مفيد في غضون بضع ثوان ، فمن المحتمل أن يشعروا بالإحباط والذهاب إلى مكان آخر.
  • محركات البحث فهرسة صفحتك ضع في اعتبارك أن محتويات العناوين كلمات رئيسية مهمة للتأثير على تصنيفات البحث في الصفحة. بدون عناوين ، ستؤدي صفحتك بشكل سيئ من حيث SEO (Search Engine Optimization)
  • غالبًا ما لا يقرأ الأشخاص الذين يعانون من ضعف الأشخاص صفحات الويب ؛ يستمعون إليهم بدلاً من ذلك. إذا لم تكن العناوين متوفرة ، فسيتم إجبارها على الاستماع إلى المستند بأكمله.

1.2. الخطوط العريضة

  • يستخدم HTML العناصر الدلالية والعناوين والعلامات الدلالية لإنشاء/وصف مخطط المستند لمحتوى الصفحة (مخطط المستند = الموضوعات ، جدول المحتويات ، الفهرس)
  • يتم استخدام مخطط المستند من قبل الأجهزة/المتصفحات لمسح محتوى وبحث ، انتقل إلى قسم معين/محدد ، أيضًا لتحديد كيفية ارتباط المحتويات ببعضها البعض
  • يتم استخدام HTML5 Outliner لفهم ومعرفة الخطوط التفصيلية الدقيقة IE بنية صفحة/مستند HTML
  • استخدام الأداة المساعدة Outliner: https://gsnedders.html1.org/outliner/
  • يستخدم محرر النصوص مثل Brackets Document Outliner Plugin/extension لإظهار مخطط/جدول محتويات/مواضيع/فهرسة صحيح للوثيقة
  • قوسين -> عرض القائمة -> عرض مخطط المستند

1.3. نافعة

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

ملاحظة : إنها ليست قاعدة يجب أن تكون جميع روابط المستند داخل

العنصر المقصود العنصر فقط لكتلة رئيسية من روابط التنقل

1.4. قسم

  • يمثل قسم وثيقة أو تطبيق عام
  • ال
    يعرّف العنصر قسمًا في وثيقة
  • HTML
    يمثل العنصر قسمًا مستقلًا

  • وفقًا لوثائق HTML5 من W3C: "قسم هو مجموعة موضوعية للمحتوى ، عادةً مع عنوان"

  • يمكن عادةً تقسيم صفحة ويب إلى أقسام للمقدمة والمحتوى والقسم الأوسط مع الأقسام اليمنى واليسرى ، إلخ.

1.5. شرط

  • يمثل جزءًا مستقلًا من محتوى المستند ، مثل إدخال المدونة أو مقالة صحيفة
  • يحدد العنصر محتوى مستقلًا مستقلاً ذاتيًا
  • يمثل عنصر HTML تكوينًا مكتفيًا في وثيقة
  • يتم استخدام علامة HTML في منشور مدونة/منتدى ، مقالة صحيفة ، إدخال المدونة وما إلى ذلك.

1.6. جانبا

  • يمثل قطعة من المحتوى مرتبطًا قليلاً فقط ببقية الصفحة
  • يحدد العنصر بعض المحتوى بصرف النظر عن المحتوى الذي يتم وضعه فيه (مثل الشريط الجانبي)
  • في كثير من الأحيان يتم تقديمها كأشرطة جانبية أو صناديق استدعاء

1.7. رأس

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

1.8. تذييل

  • يمثل تذييل لقسم
  • يحدد العنصر تذييلًا لمستند أو قسم
  • يمثل عنصر HTML تذييلًا لأقرب محتوى تقسيم أو عنصر جذر التقسيم
  • عادةً ما يحتوي تذييل على معلومات حول مؤلف القسم أو بيانات حقوق الطبع والنشر أو الروابط إلى المستندات ذات الصلة
  • قد يكون لديك عدة عناصر في وثيقة واحدة

1.9. ديف

  • تُعرف علامة DIV باسم Division, Divider tag
  • عنصر قسم محتوى HTML (
    ) هي الحاوية العامة لمحتوى التدفق
  • قبل علامات HTML5 الدلالية ، يتم استخدام علامة DIV في HTML لعمل أقسام من المحتوى في صفحة الويب مثل (النص ، الصور ، الرأس ، تذييل ، شريط التنقل ، إلخ)
  • ال
    العلامة هي علامة حاوية فارغة ، والتي تحدد التقسيم أو القسم من خلال تحديد عناصر الطفل
  • مع علامات HTML5 الدلالية ، DIV علامة قوية تستخدم أيضًا للهيكلة أو التقسيم أو التصميم أو صفحة المقاطع/المحتوى مع CSS أو معالجتها باستخدام البرامج النصية
  • ال
    العلامة عنصر على مستوى الكتلة ، لذلك يتم وضع كسر في الأسطر قبل وبعد ذلك
  • DIV هي العلامة الأكثر قابلية للاستخدام في تطوير الويب لأنها تساعدنا على فصل البيانات في صفحة الويب ويمكننا إنشاء قسم معين
  • يتم استخدامه لمجموعة من علامات HTML المختلفة بحيث يمكن إنشاء الأقسام ويمكن تطبيق الأسلوب عليها

1.10. واي أريا

  • تطبيق إمكانية الوصول إلى الويب-تطبيق إنترنت غني يمكن الوصول إليه
  • إنها مجموعة من السمات للمساعدة في تعزيز دلالات موقع الويب أو تطبيق الويب للمساعدة في التقنيات المساعدة ، مثل قراء الشاشة للمكفوفين ، فهم بعض الأشياء التي ليست أصلية لـ HTML
  • Aria (Wai-Aria) هي مجموعة من السمات التي يمكنك إضافتها إلى عناصر HTML. هذه السمات تواصل الدورات والدولة والممتلكات إلى التقنيات المساعدة من خلال واجهات برمجة التطبيقات القابلية للوصول التي تم تنفيذها في المتصفحات
  • توفر ARIA (WAI-ARIA) للمستخدم طريقة جيدة للتنقل والتفاعل مع موقعك. اجعل رمز HTML الخاص بك دلالات قدر الإمكان ، بحيث يسهل فهم الرمز للزوار وقراء الشاشة
  • تعد Wai-Aria تقنية قوية بشكل لا يصدق تتيح للمطورين وصف الغرض من الواجهات المستخدمة بصريًا وحالتها وغيرها
  • أدوار تاريخية (قراء الشاشة والأجهزة الأخرى مسح والقفز إلى الدور المطلوب) 
    - <header role="banner">
    - <nav role="navigation">
    - <main role="main">
    - <article role="article">
    - <footer role="footer">
    - <aside role="complementary">
    - <footer role="contentinfo">

1.11. مواقع الويب / المدونات

  • https://www.w3schools.com/html/html_accessibility.asp
  • https://www.w3.org/wai/standards-guidelines/aria/
  • https://www.w3.org/tr/wai-aria/
  • https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل