متى نستخدم وسم <div> ؟

مصطفى اوريك · 10 سبتمبر 2021

السلام عليكم.

متى نستخدم وسم <div>, حيث أن هناك تصاميم معينة ليست متأكدا لما يستخدم أصحابها وسم <div> في أمكنة معينة, لدينا على سبيل المثال هذا الكود :

<!--هذا كود لإنشاء الناف بار الموجود أعلى الصفحة-->
<body>
  <div class="banner">
    <div class="navbar">
    <img src="logo.png">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>      
  </div>
<body>

.banner {
    width: 100%;
    height: 100vh;
    background-image:
    linear-gradient( rgba(0,0,0,0.75), rgba(0,0,0,0.75) ), url("../images/image.jpg");
    background-size: cover;
}

لماذا إستخدم صاحب التصميم <div class="banner> ؟ ألم يكن من الممكن إستخدام <body> ؟

فيديو صاحب التصميم المذكور أثناء تصميمه الصفحة التي جلبت منها الكود الموجود فوق : https://www.youtube.com/watch?v=PgAZ8KzfhO8

أسامة زيادة · 10 سبتمبر 2021

وسم <div> : عبارة عن حاوية للمحتوى يمكن استخدامها لتجميع العناصر لتنسيقها.

وسم <body> : يحتوي على العناصر التي تقوم ببناء الموقع مثل headings, paragraphs, images, hyperlinks, tables, lists

عند وضع التنسيقات يتم وضعها لعناصر بناء الموقع أما وسم <body> لا يمكن إعطائه هذه التنسيقات لأنه سوف تتطبق كاملاً على جميع عناصر الموقع .

لماذا استخدم صاحب التصميم <div class="banner> ؟ ألم يكن من الممكن استخدام <body> ؟

حتى يستطيع التحكم في div وإعطائه تنسيقات مناسبة لـ div فقط وليس على كامل المحتوى . وسوف يكون سهل عليه التحكم في جميع العناصر الأخرى في الصفحة.

الطريقة التي قام بها المصمم في الفيديو صحيحة بهذه الطريقة سوف يستطيع التحكم في كلاس banner دون التأثير على باقي العناصر في الموقع.

Adnane Kadri · 10 سبتمبر 2021

قبل التحدث عن وسم div ينبغي معرفة أن وسوم HTML تنقسم إلى ثلاث فئات رئيسية :

Block level Tags : تشمل كل العناصر و الوسوم التي تأخذ كامل عرض حاوياتها افتراضيا .
Inline Level Tags : تشمل كل العناصر و الوسوم التي توضع تلقائيا في خط أفقي افتراضيا ، و عندما تنفد المساحة على المحور الأفقي ، فإنها تلتف في السطر التالي وهكذا .
Meta Level tags : تشمل كل العناصر و الوسوم التي لا تظهر في الصفحة كعناصر أو تقسيمات أو حاويات , و لكنها تستعمل لمهام أخرى (مثل توجيه محركات البحث نحوها) .

وسم div هو وسم Block level tag , و يعبر عن اختصار division بالإنجليزية أو تقسيمة بالعربية . و يستخدم لإنشاء تقسيمات أو أقسام حاوية منفصلة للمحتوى في صفحة الويب مثل حاويات لكل من : استمارة أو نموذج , نص ، صور ، رأس ، تذييل ، شريط تنقل ، إلخ .

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

كل عنصر من هذه العناصر موضوع في وسم div لفصله كتقسيمة و عنصر .

رغم أن هنالك العديد من الوسوم الأخررى التي يمكن لها أن تقسم صفحة الويب إلى حاويات و أقسام إلا أن إستعمال div شائع لعدة أسباب نذكر من بينها :

أن وسم div يحتوي كل من علامة الفتح (<div> ) وعلامة الإغلاق (</div>) بشكل إلزامي لإغلاق الحاوية . يجعلنا هذا نتعرف بسهولة على بداية و نهاية كل حاوية .
وسم div هو Block level tag , أي أنه يقوم بالنزول سطرا تلقائيا عند كل وسم فتح له , على عكس وسوم من مثل span أو label التي هي وسوم سطرية inline level tags .
وسم div هو عنصر حاوية عامة , على عكس وسم body مثلا الذي يجب أن يتوفر مرة واحدة في هيكلية الـ HTML لكل صفحة .
داخل وسم div يمكننا وضع أكثر من عنصر HTML و يمكن تجميعها معًا ويمكننا تطبيق CSS عليها على خلاف لو قمنا مثلا بتعريف هاته العناصر بشكل مباشر في وسم الـ body . كما أنه يقبل أية أنواع من العناصر و الوسوم داخله على عكس وسوم أخرى تشترط امتلاك عناصر محدودة . مثلا :

div.jpg.8fb5943c258c2a70463a9c656f4ac1c6.jpg

يمكن استخدام وسم div لإنشاء تخطيط لصفحات الويب أو Layouts بالإنجليزية بسهولة و مرونة . لاحظ التخطيط :

vTEAj.jpg.8c576990739626f8152d09aff09568a2.jpg

يمكن تخصيص عرضه و إرتفاعه بشكل مرن جدا , على عكس وسوم أخرى تشترط أن لا تتجاوز عرضا معينا .

و هذا في الغالب ما جعل صاحب الفيديو يعتمد تقسيم الصفحة وفق وسوم div , كونه يريد أقصى مرونة و سهولة في تحكمه بعناصر صفحته .

ومع ذلك ، اتجاه تطوير الويب في الاونة الأخيرة أصبح يتحرك نحو الاتجاه الدلالي أو الـ semantic direction . فبدلاً من عناصر div العامة ، من المفترض أن تستخدم العلامات الدلالية الأحدث التي تشير بشكل أفضل إلى أي شيفرة تبحث عنها في الصفحة . لذلك أصبح لدينا علامات التنقل nav والقسم section والرأس headere ،و غيرها . و لذلك فمن الناحية النظرية , ستجد البعض يطالبون أو يعتبرون أن من المفترض أن تتم إزالة الحاجة إلى علامات div العامة بشكل نهائي .

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

تعرف أكثر عن :

و أيضا :

توثيق وسم div : هنا .

متى نستخدم وسم <div> ؟

السؤال

مصطفى اوريك

2 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية