HTML/מבניות

מבניות

פורמט HTML נותן לנו אפשרות להגדיר מבניות במסמך. למה הכוונה? הנה קטע ממסמך HTML ללא מבניות.

<h2>נושא 1</h2>
<p>פיסקה 1</p>
<h2>תת נושא 1</h2>
<p>פיסקה 2</p>
<h2>נושא 2</h2>
<p>פיסקה 3</p>
<h2>תת נושא 2</h2>
<p>פיסקה 4</p>

כעת נוסיף את האלמנטים div כדי להציג את המבניות במסמך.

<div>
  <h2>נושא 1</h2>
  <p>פיסקה 1</p>
  <h2>תת נושא 1</h2>
  <p>פיסקה 2</p>
</div>
<div>
  <h2>נושא 2</h2>
  <p>פיסקה 3</p>
  <h2>תת נושא 2</h2>
  <p>פיסקה 4</p>
</div>

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

בהשוואה לתגי הטקסט המשמעותיים, ל-div ו-span אין משמעות לכשעצמה. הם אינם מעידים דבר על התוכן שלהם ללא שימוש במאפיינים.

זו בדיוק חשיבותם הגדולה. ניתן להשתמש איתם במאפיינים הכלליים ועל ידי כך לתת להם משמעות. (למשל על ידי מתן id או class).

הערה חשובה מאוד :

CONTENTEDITABLE=true בתוך תגית אזור בדף [BODY-DIV-P...] מאפשר עריכה מידית על דף הHTML כשנראה בדפדפן עצמו במצב צפייה!!! נסו את זה [למתקדמים בלבד]

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

רוב הדפדפנים מציגים את מקטע ה-div בשורה חדשה (הוספת שורה חדשה לפניו ואחריו). span לעומת זאת מוגדר כמקטע בתוך השורה בה הוא נכתב. חשוב לומר שמלבד הוספת מעברי השורה אין כל השפעה עיצובית לתג div. הבדל נוסף בין התגים הוא ש-div הוא אלמנט גוש ו-span הוא אלמנט שורה.
דוגמה: קוד:

טקסט טקסט טקסט
<div>
מקטע 1
</div>
<div>
מקטע 2
</div>
טקסט טקסט טקסט

טקסט טקסט טקסט
<span>
מקטע 3
</span>
<span>
מקטע 4
</span>
טקסט טקסט טקסט

פלט:

טקסט טקסט טקסט

מקטע 1

מקטע 2

טקסט טקסט טקסט טקסט טקסט טקסט מקטע 3 מקטע 4 טקסט טקסט טקסט

div

• אלמנט מסוג גוש.
• תוכן מהרבה סוגים, כולל טקסט.
• מאפיינים כלליים (ליבה, שפה ואירוע).

span

• אלמנט מסוג שורה.
• תוכן מסוג טקסט או שורה.
• מאפיינים כלליים (ליבה, שפה ואירוע).

ניווט

הפרק הקודם: אלמנטים בעלי משמעות של טקסט

יצירת מבניות במסמך תרגילים

הפרק הבא: מפת תמונה

קריאה נוספת

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 - הקטע הרלוונטי במפרט של ארגון w3.