تشير كتلة المحتوى إلى وحدة تقوم بتقسيم صفحة HTML بشكل منطقي. بالنسبة لمواقع الويب الخاصة بالصفحات، يمكن تسمية كل جزء مثل قائمة التنقل ونص المقالة وتعليقات المقالة بكتلة محتوى.
عنصر المقالةيمثل عنصر المقالة محتوى مستقلاً وكاملاً في مستند أو صفحة أو تطبيق يمكن الرجوع إليه بشكل مستقل خارجيًا. يمكن أن تكون مدونة أو مقالة في صحيفة، أو منشورًا في المنتدى، أو تعليق مستخدم، أو مكونًا إضافيًا مستقلاً، أو أي محتوى مستقل آخر. بالإضافة إلى المحتوى، عادةً ما يكون لعنصر المقالة عنوان خاص به (يتم وضعه عادةً داخل عنصر الرأس) وأحيانًا حواشي سفلية خاصة به.
<article> <header> <h1>العنوان</h1> <p>تاريخ النشر: <time pubdate=pubdate>2010/10/10</time></p> </header> <p>كيفية استخدام المقالة </p> <footer> <p><small>حقوق النشر @ yiiyaa.net جميع الحقوق محفوظة</samll></p> </footer> </article>
ملحوظة: يمكن أن تكون عناصر المقالة متداخلة، ويجب أن يكون المحتوى الداخلي مرتبطًا بالمحتوى الخارجي من حيث المبدأ. على سبيل المثال، في منشور مدونة، يمكن دمج التعليقات على المقالة باستخدام عناصر المقالة؛ ويتم تضمين عنصر المقالة المستخدم لتقديم التعليقات في عنصر المقالة الذي يمثل المحتوى الإجمالي.
الكود المتداخل هو كما يلي:
<article> <header> <h1>كيفية استخدام عنصر المقالة</h1> <p>تاريخ النشر: <time pubdate=pubdate>2010/10/10</time></p> </header> <p >هذه العلامة تعرض المحتوى الرئيسي للمقالة بأكملها، ويحتوي عنصر القسم أدناه على التعليقات على المقالة</p> <section> <h2>التعليقات</h2> <article> <header> <h3>تم النشر بواسطة: maizi</h3> <p><time pubdate datetime=2016-6-14>قبل ساعة واحدة</time></p> </header> <p>هذه المقالة جيدة جدًا، أعط إنه ممتاز! </p> </article> <article> <header> <h3>تم النشر بواسطة: Xiaoni</h3> <p><time pubdate datetime=2016-6-14T:21-26:00>قبل ساعة واحدة</p> time></p> </header> <p>هذه المقالة جيدة جدًا فهي تشرح المقالة بالتفصيل</p> </article> </section></article>
يتم تقسيم محتوى العينة إلى عدة أجزاء، ويتم وضع عنوان المقالة في عنصر الرأس، ويتم وضع نص المقالة في عنصر p بعد عنصر الرأس، ثم يقوم عنصر القسم بتمييز النص عن التعليقات (وهو عنصر حظر). تستخدم لتقسيم المحتوى على الصفحة)، في القسم يتم تضمين محتوى التعليق في العنصر. يعتبر تعليق كل شخص في التعليق مستقلاً وكاملاً نسبيًا، لذلك يمكن تقسيم عنصر المقالة في التعليق إلى جزء المحتوى والتعليقات يتم وضعها في عنصر الرأس والعنصر p على التوالي.
1. يتم استخدام عنصر القسم لتقسيم محتوى الصفحة في الموقع أو التطبيق، ووظيفة عنصر القسم هي تقسيم محتوى الصفحة إلى أقسام، أو تقسيم المقالة إلى أقسام؛
2. يتكون عنصر القسم عادة من المحتوى وعنوانه. لا يُنصح عمومًا باستخدام عنصر القسم للمحتوى الذي لا يحتوي على عنوان.
3. عنصر القسم ليس عنصر حاوية عادي؛ عندما يحتاج المحتوى إلى التصميم مباشرة أو تحديد السلوك من خلال برنامج نصي، فمن المستحسن استخدام p بدلاً من عنصر القسم؛
4. إذا كانت عناصر المقالة والتنقل والعناصر الجانبية تستوفي شروطًا معينة، فلا تستخدم عنصر القسم لتعريفها؛
5. يمكن تخزين المحتوى الموجود في عنصر القسم بشكل منفصل في قاعدة البيانات أو إخراجه إلى مستند Word.
<section> <h1>عنوان </h1> لعنصر القسم <p>جزء الموضوع من كتلة القسم</p> </section>
في HTML5، يمكنك تضمين جميع الأجزاء الثانوية من الصفحة، مثل أشرطة التنقل والقوائم وإشعارات حقوق النشر وما إلى ذلك، في صفحة موحدة بحيث يمكن تزيينها باستخدام أنماط CSS. وأخيراً تتلخص محظورات استخدام عنصر القسم فيما يلي:
1) لا تستخدم عنصر القسم كحاوية صفحة للتصميم، فهذه هي وظيفة العنصر p.
2) إذا كان عنصر المقالة أو العنصر الجانبي أو عنصر التنقل أكثر ملاءمة للاستخدام، فلا تستخدم عنصر القسم.
3) لا تستخدم عنصر القسم لكتل المحتوى بدون عناوين.
3. الفرق بين الاثنين:لقد قيل الكثير أعلاه، ما الفرق بين الاثنين؟ في الواقع، في HTML5، يمكن اعتبار عنصر المقالة نوعًا خاصًا من عناصر القسم، مما يؤكد الاستقلالية أكثر من عنصر القسم. أي أن عنصر القسم يؤكد على التجزئة أو القطع، بينما تؤكد المقالة على الاستقلال. على وجه التحديد، إذا كان جزء من المحتوى مستقلاً وكاملاً نسبيًا، فيجب عليك استخدام عنصر المقالة، ولكن إذا كنت تريد تقسيم جزء من المحتوى إلى عدة فقرات، فيجب عليك استخدام عنصر القسم. بالإضافة إلى ذلك، في HTML5، يصبح العنصر p حاوية. عند استخدام أنماط CSS، يمكن تطبيق نمط CSS شامل على هذه الحاوية.
تلخيصما ورد أعلاه هو الفرق بين المقالة والقسم في HTML5 الذي قدمه المحرر وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!