وثائق HTML قابلة للتشغيل: وسم div

Q: ماذا يعني div class؟

هو div يحمل سمة class. الفئة اسم يستخدمه CSS لتنسيقه (.card { ... }) وتستخدمه JavaScript لإيجاده. يمكن لعدة عناصر div أن تشترك في فئة، ويمكن للعنصر الواحد أن يحمل عدة فئات: class="card featured".

Q: كيف أضع عنصري div بجانب بعضهما؟

ضعهما داخل div أب وأعطِ الأب display: flex. عندها يصطف الأبناء في صف واحد. أضف gap لوضع مسافة بينهما وflex: 1 على الأبناء لتقسيم العرض بالتساوي.

Q: هل أستخدم div أم section؟

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

Q: هل يمكنني وضع div داخل وسم p؟

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

ما وظيفة وسم div

<div> (اختصار لكلمة division أي قسم) حاوية عامة. يجمّع العناصر معًا كي تنسّقها أو تضعها في مكانها أو تتحكم بها بسكربت كوحدة واحدة. وحده لا يبدو كأي شيء: لا هامش ولا حدود ولا خط خاص. هو عنصر كتلي، أي يبدأ في سطر جديد ويمتد على العرض المتاح.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

احذف سطر border من التنسيق وستصبح عناصر div غير مرئية: هذا هو المظهر الافتراضي لـ div. كل ما يفعله بصريًا يأتي من CSS.

div class وid

يحصل div عادةً على class، وهو الاسم الذي يستهدفه CSS. عناصر div التي تشترك في فئة تشترك في التنسيق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card ينسّق الصندوقين، و.card.highlight يضيف إطارًا أزرق إلى div الذي يحمل الفئتين. استخدم id عندما تحتاج إلى الإشارة إلى div محدد، مثلًا كهدف لرابط (href="#pro"). تقارن صفحة السمات بين class وid بالتفصيل.

عناصر div جنبًا إلى جنب

بما أن div عنصر كتلي، فإن العناصر تتكدس عموديًا. لوضعها في صف، اجعل العنصر الأب حاوية flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex على .row يصفّ الأبناء، وgap يباعد بينهم، وقيم flex تقسّم العرض (1 : 2 : 1 هنا). نمط الأب والأبناء هذا هو الاستخدام الأشيع لـ div في المواقع الحقيقية. لتوسيط div، راجع كيف توسّط div.

تداخل عناصر div

يمكن لـ div أن يحتوي على عناصر div أخرى بأي عمق. كل مستوى صندوق داخل صندوق، ويمكنك رؤية ذلك بإعطاء كل div حدودًا وبعض الحشو:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

اجعل التداخل سطحيًا بقدر ما يسمح التخطيط. كل غلاف إضافي صندوق آخر عليك التفكير فيه حين لا يعمل هامش أو عرض كما تتوقع.

div أم وسم دلالي؟

لا يقول div شيئًا عن محتواه. في HTML وسوم تؤدي مهمة التجميع نفسها وتقول أيضًا ما هي المجموعة:

بدلًا من	استخدم	من أجل
`<div class="header">`	`<header>`	مقدمة الصفحة أو القسم أو الشريط العلوي
`<div class="nav">`	`<nav>`	مجموعة روابط تنقل
`<div class="main">`	`<main>`	المحتوى الرئيسي، مرة واحدة في الصفحة
`<div class="post">`	`<article>`	عنصر مستقل بذاته: تدوينة، تعليق، بطاقة منتج
`<div class="footer">`	`<footer>`	تذييل الصفحة أو القسم

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

div ليس زرًا

div مع معالج نقر يبدو قابلًا للنقر لمستخدم الفأرة، لكن مستخدم لوحة المفاتيح لا يصل إليه بمفتاح Tab ولا يضغطه بـ Enter، وقارئ الشاشة لا يعلن عنه كزر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

استخدم <button> للإجراءات و<a href> للتنقل. كلاهما يقبل التركيز ويعمل مع لوحة المفاتيح من دون أي جهد إضافي.

أخطاء شائعة

div داخل <p>. تُغلق الفقرة قبل div. اجعل div العنصر الخارجي، أو استخدم <span> داخل الفقرة.
صفحة من div فقط. الصفحة المبنية من div وحدها لا بنية فيها لقارئات الشاشة. استبدل div بـ <header> و<nav> و<main> و<footer> حيث تناسب.
عناصر div قابلة للنقر. استخدم <button> أو رابطًا بدلًا منها.
توقع أن يكون عرض div بعرض نصه. يأخذ div كامل العرض. استخدم display: inline-block أو width: fit-content أو <span> إذا أردته أن يتقلص.
تكرار id على عدة عناصر div. استخدم class لأي شيء يتكرر.

الأسئلة الشائعة

ما هو div في HTML؟

<div> حاوية عامة. يجمّع عناصر أخرى كي تنسّقها أو تضعها في مكانها معًا، وليس له معنى خاص به: تعرضه المتصفحات ككتلة تبدأ في سطر جديد وتأخذ كامل العرض المتاح.

ماذا يعني div class؟

<div class="card"> هو div يحمل سمة class. الفئة اسم يستخدمه CSS لتنسيقه (.card { ... }) وتستخدمه JavaScript لإيجاده. يمكن لعدة عناصر div أن تشترك في فئة، ويمكن للعنصر الواحد أن يحمل عدة فئات: class="card featured".

كيف أضع عنصري div بجانب بعضهما؟

ضعهما داخل div أب وأعطِ الأب display: flex. عندها يصطف الأبناء في صف واحد. أضف gap لوضع مسافة بينهما وflex: 1 على الأبناء لتقسيم العرض بالتساوي.

هل أستخدم div أم section؟

استخدم <section> أو <header> أو <nav> أو <main> أو <article> أو <footer> عندما يؤدي المحتوى ذلك الدور، لأن قارئات الشاشة ومحركات البحث تفهمها. واستخدم <div> عندما تحتاج فقط إلى صندوق للتنسيق أو التخطيط.

هل يمكنني وضع div داخل وسم p؟

لا. الفقرة لا تحتوي إلا على محتوى سطري. يغلق المتصفح <p> بمجرد أن يرى <div>، وهذا يفسد التنسيق. استخدم div كعنصر خارجي، أو <span> داخل الفقرة.

مفاهيم ذات صلة