תגית div ב-HTML
תגית div היא תגית היוצרת אלמנט מורכב ב-HTML. האלמנט יכול לעמוד בפני עצמו או לאגד בתוכו אלמנטים נוספים (מבוססי div, או אחרים).
נראה דוגמה:
<div class="article_preview" id="article572">
<div class="article_title">Computers in our life</div>
<div class="article_description">
This article discusses the use of computers in industry and in everyday use.
</div>
<div class="article_image">
<img src="image.jpg" alt="computer image" />
</div>
</div>בדוגמה זו, אנו מגדירים אלמנט של תצוגה מוקדמת למאמר. התצוגה המוקדמת מורכבת מכותרת המאמר, תאור המאמר ותמונת המאמר. ניתן לראות כי כל רכיב בתצוגה המוקדמת עטוף בתגית div, וגם האלמנט הראשי של התצוגה המוקדמת עטוף בתגית div שעוטפת את כל הרכיבים.
שימוש במאפיינים id ו-class
ניתן לקבוע לכל תגית div את המאפיינים id ו-class. למעשה, ניתן לקבוע את המאפיינים id ו-class לכל אלמנט (אלמנט הוא רכיב HTML כלשהו) ולא רק לאלמנטים מבוססי התגית div.
המאפיין id קובע זיהוי ייחודי לאלמנט שיצרנו. אסור שיהיו באותו עמוד HTML שני אלמנטים שונים עם אותו id.
המאפיין class משייך את האלמנט למחלקה עם תכונות מסויימות (למשל תכונות עיצוביות).
אם למשל יש לנו בעמוד 3 טפסי יצירת קשר (אחד בראש העמוד, השני בשולי העמוד והשלישי בתחתית), נוכל לקבוע להם ערך class זהה של contact-form, וערך id שונה לכל טופס, כגון contact-form-top, contact-form-margin, contact-form-bottom.
בדוגמה לעיל, ניתן לראות כי לאלמנט הראשי של התצוגה המוקדמת של המאמר נתנו זיהוי id ייחודי article572 (לכל תצוגה מוקדמת של מאמר יהיה id אחר) ומאפיין class שהוא article_preview (אחיד לכל התצוגות המוקדמות של המאמרים).
כמו כן, קבענו מאפייני class גם לאלמנטים הפנימיים יותר: article_title לכותרת המאמר, article_description לתאור המאמר ו-article_image לתמונת המאמר.
המאפיינים שקבענו יעזרו לנו בהמשך לעצב את הניראות של האלמנט. נוכל למשל לקבוע שאלמנטים שה-class שלהם הוא article_title יהיו עם גופן גדול, בולט וממורכז.
תגית span ב-HTML
כמו תגית div, גם התגית span יוצרת אלמנט ב-HTML.
ההבדל בין div ל-span הוא שבעוד שהאלמנט שנוצר על ידי div הוא אלמנט block-line, כלומר יוצר בלוק עצמאי חדש, האלמנט שנוצר על ידי span הוא אלמנט in-line, כלומר, אלמנט פנימי חלקי.
בעוד אלמנט div יכול להיות אלמנט המורכב מאלמנטים נוספים המקוננים בתוכו, אלמנט span יהיה קצר בדרך כלל ולא יהיה מורכב מאלמנטים נוספים.
דוגמה לשימוש המשלב div ו-span:
<div id="price">
<p>The new price is <span class="new_price">100$</span> instead of <span class="old_price">120$</span></p>
</div>בדוגמה זו, האלמנט div מורכב מאלמנט p (פיסקת טקסט) שכולל את הכיתוב The new price is 100$ instead of 120$. המחיר החדש 100$ והמחיר הישן 120$ הוגדרו כאלמנטים של span. באופן הזה, נוכל לדוגמה לעצב את המחירים, לדוגמה: לקבוע שהמחלקה new_price תהיה עם כיתוב אדום ומודגש, והמחלקה old_price תהיה עם כיתוב אפור ומחוקה בקו.
