التعليق: HTML5 يجلب سلسلة من العناصر الجديدة ، العنصرين التاليين التاليين: المقالة والقسم مربكة للغاية. غالبًا ما نذكر الظروف التي يجب أن نستخدم هذه العناصر. بعد ذلك ، سنقدم تطبيقات الاثنين. يمكن للمهتمين الرجوع إليها.
يجلب HTML5 سلسلة من العناصر الجديدة وسيتم استخدامها على نطاق واسع في المستقبل. ومع ذلك ، يتم الخلط بين بعض العناصر بسهولة عند استخدامها ، بما في ذلك العنصرين التاليين التاليين: <article> و <section>.
السؤال الأكثر شيوعًا هو: في أي ظروف يجب أن نستخدم هذه العناصر؟ وكيف يجب أن نستخدم هذه العناصر بشكل صحيح؟
عنصر القسم
هذا هو العنصر الأكثر غموضا. ما هو الفرق بينه وبين عنصر <viv>؟ لقد استخدمنا <viv> لتقسيم الفقرات ، لذلك باستثناء <div> ، متى نستخدم هذا العنصر؟ نذكر الوثائق الرسمية لتوضيح ذلك. وفقًا لوثائق Whatwg ، يتم تقديم الوصف التالي للعنصر <section>:
يمثل العنصر <section> فقرة مشتركة في مستند أو تطبيق - Whatwg
من الوصف ، يمكننا أن نرى أن وظيفة العنصر <section> هي تجزئة ، أكثر أو أقل تشبه <div>. ولكن لا يزال لديه قضية خاصة. في المستند ، تتم إضافة بيان خاص:
عندما يتم استخدام عنصر فقط للأناقة أو للراحة البرمجة النصية ، فإننا نشجع المؤلفين على استخدام <viv>. <section> العنصر مناسب عندما يحتاج محتوى العنصر بشكل صريح. - Whatwg
بناءً على هذه النقطة ، يمكننا تلخيص النقطتين التاليتين:
أولاً ، على الرغم من أن عناصر الأقسام هي تصميم تقنيًا ، إلا أننا ما زلنا نوصي باستخدام عناصر Div عندما تكون هناك أنماط أو نصوص معقدة.
ثانياً ، على غرار عنصر <li> ، يتم استخدام عنصر القسم لتعداد المحتوى.
لذلك في مثال واقعي ، فإن سبب استخدام العنصر <section> هو تنظيم محتوى المدونة ، فإن الكود كما يلي:
<viv>
<section>
<H2> عنوان منشور المدونة </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cookie Halvah Tiramisu Jelly-O. </p>
</القسم>
<section>
<H2> عنوان منشور المدونة </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cookie Halvah Tiramisu Jelly-O. </p>
</القسم>
<section>
<H2> عنوان منشور المدونة </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cookie Halvah Tiramisu Jelly-O. </p>
</القسم>
</div>
هذا مجرد مثال ، ويمكن أيضًا استخدام عنصر <section> لأغراض أخرى.
عناصر المادة
من الاسم ، لقد فسر نفسه بالفعل بشكل جيد ، لكن لا يزال يتعين علينا أن نرى كيف يتم وصفه في الوثائق الرسمية:
يمكن تخصيص أو إعادة استخدام قسم منفصل على مستند أو صفحة أو تطبيق أو موقع وبشكل عام بشكل مستقل ، على سبيل المثال في النشر. يمكن أن يكون هذا منشورًا للمنتدى أو المجلة أو الأخبار أو إدخالات المدونة أو التعليقات المقدمة من المستخدمين أو عناصر واجهة المستخدم التفاعلية أو عناصر واجهة المستخدم أو المحتوى لأي مشروع مستقل آخر.
من الوصف أعلاه ، يمكننا تلخيص أن العنصر <article> مخصص للمقالات المهيكلة ، وخاصة تلك التي نريد نشرها ، مثل المدونات أو محتوى الصفحة أو منشورات المنتدى.
يوضح المثال التالي كيفية إنشاء منشور مدونة باستخدام <article>.
<article>
<header>
<h1> هذا هو عنوان منشور المدونة </h1>
<viv>
<ul>
<li> اسم المؤلف </li>
<li> حفظ في الفئات </li>
</ul>
</div>
</header>
<viv>
حلوة لفة هالفه بسكويت توفي سرق تورت بودنغ سمسم.
مسحوق البسكويت جيلي-أو فاكهة فاكهي فاوركي الشوكولاتة. الشوفان الحلوى
كعكة Tootsie رول السمسم تستقر Lollipop Gingerbread Bonbon. غومينز
Halvah Gummies Biscuit الدنماركي تطبيق المعجنات الهلامية.
</div>
</article>
بالإضافة إلى ذلك ، يمكن أيضًا دمج عنصر <article> مع عنصر القسم. عند الحاجة ، يمكنك استخدام عنصر <section> لتقسيم المقالة إلى عدة فقرات ، كما هو موضح في المثال التالي.
<article>
<header>
<h1> هذا هو عنوان منشور المدونة </h1>
<viv>
<ul>
<li> اسم المؤلف </li>
<li> حفظ في الفئات </li>
</ul>
</div>
</header>
<viv>
<section>
<h2> هذا هو العنوان الفرعي </h2>
حلوة لفة هالفه بسكويت توفي سرق تورت بودنغ سمسم.
مسحوق البسكويت جيلي-أو فاكهة فاكهي فاوركي الشوكولاتة. كعكة الشوفان بودنغ
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies Halvah
Gummies Biscuit Danish تطبيق معجنات Gingerbread Jelly-O.
</القسم>
<section>
<h3> هذا هو الرأي الفرعي آخر </h3>
تتصدر كعكة تشيز كيك حلوة كعكة الجزر الحلوة. غومي بيرز قطرات الليمون
Toffee Sesame يستقر تورتة تتصدر تشوبا تشوبس أبل فطيرة صمغ. رقاقة الشوكولاته
كعكة. السكر البرقوق الشوكولاتة بار تتصدر كيس آيس كريم كعكة الدنماركية.
Cheesecake Gummi Bears Dragée Jujubes Dragée Brownie Jelly Biscuit. مسحوق كرواسان الهلام فول المعجنات.
</القسم>
</div>
</article>
لخص
كما توقع مؤسس شبكة الويب العالمية ومديري W3C ، فإن جميع العناصر الجديدة التي أنشأتها HTML5 هي غرض جعل بنية الشبكة أكثر دلالية. لا يزال هناك نقاش بين مطوري الويب والمصممين كيفية تطبيق هذه العناصر بشكل صحيح.
لا يهم ، لا تخلط بين وجهة النظر. كما ذكرت من قبل ، طالما أنه موقف معقول وترى أن استخدامه يجعل الهيكل ذا معنى ، يرجى استخدامه.