קיימת אי הבנה בין תגית Div ו-Span ב-html. הרבה בוני אתרים מתחילים או סטודנטים שעושים קורס בניית אתרים, אינם מבדילים בין התגיות שצויינו ועושים בו שימוש לא נכון ושגואי. ההבדל בניהם, הוא שה-Div זה אלמנט גוש ו-Span הוא אלמנט שורה. עוד לפני שנגיע לדוגמאות, חשוב לדעת שרוב הדפדפנים העדכניים מציגים את מקטע ה- Div בשורה חדשה ולא באותה שורה. זאת אומרת שכל פעם שנרשום אלמנט Div, הדפדפן יציג את התוכן שבו בכל פעם בשורה חדשה. לעומת זאת, אלמנט Span מוגדר כמקטע בתוך השורה בה הוא נכתב והדפדפן אינו מקפיץ שורה כפי שהוא נוהג לעשות את זה עם אלמנט Div. כל מי שעובר ועושה קורס בניית אתרים או לומד באופן עצמאי את html ו- Css , הרוב מתקשים להבין את ההבדלים כי פחות או יותר אפשר לצפות באותם תוצאות גם באמצעות תגית Div ו-Span ע"י שינוי קטן ב- Css. בשביל לא להבהיל אותכם, לפני שנים, גם אני היתי באותה נקודה שבה אתם נמצאים ולא כל כך הבנתי את ההבדלים שבניהם. לכן זה בסדר להתבלבל. בשביל זה אני כותב את המדריך הזה.

ההבדל בין div ו- span ב-html:

כדי להמחיש את הנושא, אני אשתמש במסמך HTML פשוט, שבתוכו נרשום 2 אלמנטים של Div ו-2 של Span.

<span>This is inline element one </span>
<span>This is inline element two </span>

כעת גם נגדיר את -Css עבור האלמנטים האלה כדי להמחיש את ההבדל בין Div ו-Span.

div{border:1px solid #000; padding:10px;}
span{border:1px solid #000; padding:10px;}

התוצאה שנקבל בדפדפן היא:

ההבדל בין Div ו-Span ב-Html

לאחר ביצוע כל התהליך, ניתן ליראות שאלמנט Div אוטומטי שובר את השורה ומתחיל שורה חדשה בדפדפן, לעומת זאת אלמנט Span מוצג אחד אחרי השני ללא שבירת שורה.

טיפ:
ניתן לשנות את אלמנט הגוש – Div לאלמנט שורה וכנ"ל את Span, להפוך את אלמנט שורה לאלמנט גוש באמצעות הגדרת 2 שורות קוד בתוך ה-Css.

div{display:inline}
span{display:block}

כאן תוכלו להוריד את הקובץ מסמך html מוכן שניתן להריץ אותו בדפדפן, וכמובן לצפות בקוד באמצעות תוכנת עריכה כמו Dreamweaver Cs5 של חברת Adobe.

הורדה: לחץ כאן (152)