תיעוד HTML עם דוגמאות להרצה: התגית div

Q: איך שמים שני div זה לצד זה?

עטפו אותם ב-div הורה ותנו להורה display: flex. הילדים יישבו אז בשורה. הוסיפו gap לרווח ביניהם ו-flex: 1 על הילדים כדי לחלק את הרוחב שווה בשווה.

Q: להשתמש ב-div או ב-section?

השתמשו ב- , , , , או כשלתוכן יש את התפקיד הזה, כי קוראי מסך ומנועי חיפוש מבינים אותם. השתמשו ב- כשצריך רק תיבה לעיצוב או לפריסה.

Q: אפשר לשים div בתוך תגית p?

לא. פסקה יכולה להכיל רק תוכן inline. הדפדפן סוגר את ה- ברגע שהוא רואה , וזה שובר את העיצוב שלכם. השתמשו ב-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 שחולקים class חולקים את העיצוב:

<!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 עם handler של לחיצה נראה לחיץ למשתמש עכבר, אבל משתמש מקלדת לא יכול להגיע אליו עם 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. ה-class הוא שם ש-CSS משתמש בו כדי לעצב אותו (.card { ... }) ו-JavaScript משתמש בו כדי למצוא אותו. הרבה div יכולים לחלוק class, ול-div אחד יכולים להיות כמה: class="card featured".

איך שמים שני div זה לצד זה?

עטפו אותם ב-div הורה ותנו להורה display: flex. הילדים יישבו אז בשורה. הוסיפו gap לרווח ביניהם ו-flex: 1 על הילדים כדי לחלק את הרוחב שווה בשווה.

להשתמש ב-div או ב-section?

השתמשו ב-<section>, <header>, <nav>, <main>, <article> או <footer> כשלתוכן יש את התפקיד הזה, כי קוראי מסך ומנועי חיפוש מבינים אותם. השתמשו ב-<div> כשצריך רק תיבה לעיצוב או לפריסה.

אפשר לשים div בתוך תגית p?

לא. פסקה יכולה להכיל רק תוכן inline. הדפדפן סוגר את ה-<p> ברגע שהוא רואה <div>, וזה שובר את העיצוב שלכם. השתמשו ב-div כאלמנט החיצוני או ב-<span> בתוך הפסקה.

מושגים קשורים