فهم عنصر HTML5 SECTION
عندما تعمد HTML5 إلى تصوير المشهد قبل عدة سنوات ، فإنها تضيف مجموعة من عناصر التقسيم الجديدة إلى اللغة ، بما في ذلك عنصر SECTION. معظم العناصر الجديدة التي يقدمها HTML5 لها استخدامات واضحة. على سبيل المثال ، يتم استخدام العنصر لتعريف المقالات والأجزاء الرئيسية لصفحة ويب ، يتم استخدام العنصر لتعريف المحتوى ذي الصلة الذي لا يمثل أهمية بالغة لباقي الصفحة ، كما أن الرأس ، والتنقل ، والتذييل توضيحي إلى حد كبير. ومع ذلك ، فإن عنصر SECTION المضافة حديثًا أقل وضوحًا.
يعتقد الكثير من الناس أن عناصر HTML SECTION هي في الواقع نفس الشيء - عناصر الحاوية العامة المستخدمة لاحتواء المحتوى على صفحة الويب. غير أن الواقع هو أن هذين العنصرين ، رغم كونهما عنصرين حاويتين ، إلا أنهما شيءان عامان. هناك أسباب محددة لاستخدام كل من عنصر SECTION وعنصر DIV - وستوضح هذه المقالة هذه الاختلافات.
الأقسام و Divs
يتم تعريف عنصر SECTION على أنه مقطع دلالية من صفحة ويب أو موقع ليس نوعًا آخرًا أكثر تحديدًا (مثل المقالة أو جانبًا). أميل إلى استخدام هذا العنصر عندما أضع علامة على قسم متميز من الصفحة - وهو مقطع يمكن أن يتم نقله بالجملة واستخدامه على صفحات أو أجزاء أخرى من الموقع. إنه جزء متميز من المحتوى ، أو "قسم" من المحتوى ، إذا شئت.
في المقابل ، يمكنك استخدام عنصر DIV لأجزاء من الصفحة التي تريد تقسيمها ، ولكن لأغراض أخرى غير الدلالات . أود أن أقوم بتغليف مساحة من المحتوى في قسم ما إذا كنت أفعل ذلك فقط لأعطي نفسي "خطافًا" لاستخدامه مع CSS. قد لا يكون مقطعًا مميزًا من المحتوى يعتمد على دلالات الألفاظ ، ولكنه أمر أقوم به من أجل تحقيق التنسيق الذي أريده في صفحتي.
كل شيء عن علم الدلالة
هذا مفهوم يصعب فهمه ، لكن الفرق الوحيد بين عنصر DIV وعنصر SECTION هو semantics. بمعنى آخر ، هو معنى المقطع الذي تقوم بفصله.
أي محتوى محتواة داخل عنصر DIV ليس له أي معنى متأصل. من الأفضل استخدامه لأشياء مثل:
- أنماط CSS وخطافات أنماط CSS
- حاويات تخطيط
- خطاف جافا سكريبت
- أقسام HTML لتسهل قراءتها
تم استخدام عنصر DIV ليكون العنصر الوحيد الذي كان لدينا لإضافة خطافات لأسلوب مستنداتنا وإنشاء أعمدة وتخطيطات خيالية. وبسبب ذلك ، انتهى بنا الأمر إلى HTML التي كانت مليئة بعناصر DIV - ما قد يسميه مصممو الويب "divitis". كان هناك حتى محررات WYSIWYG التي استخدمت عنصر DIV حصريًا. لقد قمت بالفعل بتشغيل HTML الذي يستخدم عنصر DIV بدلاً من الفقرات!
باستخدام HTML5 ، يمكننا البدء في استخدام عناصر التقسيم لإنشاء مستندات وصفية أكثر وضوحًا (باستخدام الملاحة وللأرقام الوصفية وما إلى ذلك) وكذلك تحديد الأنماط على هذه العناصر.
ماذا عن عنصر SPAN؟
العنصر الآخر الذي يفكر فيه معظم الناس عندما يفكرون في عنصر DIV هو العنصر. هذا العنصر ، مثل DIV ، ليس عنصرًا دلاليًا. هو عنصر مضمّن يمكنك استخدامه لإضافة hooks للأنماط والبرامج النصية حول كتل مضمّنة للمحتوى (عادةً نص). وبهذا المعنى ، يشبه تمامًا عنصر DIV ، وهو مضمّن فقط وليس عنصر كتلة . في بعض الطرق ، قد يكون من الأسهل التفكير في DIV كعنصر SPAN على مستوى الكتلة واستخدامه بنفس الطريقة التي تستخدمها SPAN فقط للمجموعات الكاملة من محتوى HTML.
لا يوجد عنصر مقارن مقارن في HTML5.
للحصول على الإصدارات القديمة من Internet Explorer
حتى إذا كنت تدعم إصدارات أقدم من IE (مثل IE 8 وأقل) التي لا تتعرف على HTML5 بشكل موثوق ، يجب ألا تخشى استخدام علامات HTML صحيحة دلاليًا. ستساعدك الدلالات اللغوية على إدارة الفريق وفريقك في المستقبل (لأنك ستعرف أن هذا القسم هو المقال إذا كان محاطًا بعنصر ARTICLE). بالإضافة إلى ذلك ، ستدعمهم المتصفحات التي تتعرف على هذه العلامات بشكل أفضل.
لا يزال بإمكانك استخدام عناصر تقسيم HTML الدلالية باستخدام Internet Explorer ، فأنت تحتاج فقط إلى إضافة البرمجة النصية وربما بعض عناصر DIV المحيطة لجعلها تتعرف على العلامات بتنسيق HTML.
باستخدام DIV وعناصر القسم
إذا كنت تستخدمها بشكل صحيح ، فيمكنك استخدام كل من عناصر DIV و SECTION معًا في مستند HTML5 صالح. كما شاهدت هنا في هذه المقالة ، يمكنك استخدام عنصر SECTION لتحديد أجزاء منفصلة لغوياً من المحتوى ، واستخدام عنصر DIV كخطافات لـ CSS وجافا سكريبت بالإضافة إلى تحديد تخطيط لا يحتوي على معنى لغوي.
المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 15/15/17