תגית div ומאפייני id ו-class
תגית מיוחדת היא תגית div. תגית זו למעשה מגדירה אלמנט שאיננו אלמנט "סטנדרטי" (כגון פיסקה, כותרת, טבלה, וכו'). למעשה, בקוד שלנו, רוב התגיות יהיו תגיות div ולא תגיות סטנדרטיות, כאשר אלו יציינו אובייקטים כמו: תפריט, לוגו, טופס צור קשר, וכו'.
כל תגית (בין אם תגית div או כל תגית אחרת), ניתן לאפיין באמצעות המאפיין id או המאפיין class. מאפיין id הינו בעל ערך יחודי לכל אלמנט, כלומר, לא יתכנו בקוד 2 אלמנטים שונים עם מאפיין id בעל אותו ערך. לעומת id, נוכל לאפיין מספר אלמנטים שונים באמצעות המאפיין class עם אותו הערך.
דוגמא:
<div class="button">
<div id="home">
</div>
</div>
<div class="button">
<div id="about">
</div>
</div>
<div class="button">
<div id="contact">
</div>
</div>
</div>
בדוגמא זו יצרנו "תפריט" עם 3 כפתורים. כל לחצן מאופיין באמצעות המחלקה (ה- class) שערכו button. כלומר יש 3 אלמנטים שהם עם class זהה. כל כפתור מאופיין בערך של id שיחודי רק לו.
המאפיינים class ו-id נחוצים על מנת להקל עלינו לאפיין קבוצות של אלמנטים או אלמנטים ספציפיים. באופן הזה, נוכל לאחר מכן להתייחס בקוד לאלמנטים אלו ביתר קלות. למשל, נוכל להגדיר אצלנו ב-CSS עיצוב שמאפיין את כל האלמנטים שערך ה- class שלהם button להיות אדומים (במילים אחרות: להגדיר כי כל הכפתורים יהיו אדומים).
תגית span
תגית זו מגדירה חלק מאלמנט על מנת לעצבו.
This is example number <span class="number">seven</span> in the tutorial
</div>
כעת, ניתן להתייחס ספציפית למילה seven המאופיינת במחלקה number (למשל: נוכל ב-CSS לעצב מילה זו בכחול כהה).
מאפייני title, style
מאפיינים אלו הינם מאפיינים נפוצים שניתן להשתמש בהם כמעט עבור כל תגית אצלנו בקוד.
מאפיין title הינו מאפיין המקשר תאור לאלמנט. שימוש בו עבור אלמנט נתון, יוסיף ערך tool tip לאלמנט, באופן שהתאור יוצג בעת מעבר עכבר על אלמנט זה.
</div>
מאפיין style הינו מאפיין המקשר עיצוב ספציפי לאלמנט. מומלץ למעט בשימוש במאפיין זה, ולהעביר כל עיצוב לתוך קובץ CSS נפרד. כיום, רוב השימוש שנעשה באמצעות מאפיין style הוא עבור תוכן מעוצב שנערך על ידי עורך תוכן ונשמר בבסיס הנתונים, כאשר עיצוב האתר הכללי נלקח אך ורק מתוך קובץ CSS.
</div>
את ערכי ה-style האפשריים לא נלמד כרגע, כיוון שחשוב יותר להבין את הפונקציונאליות והסמנטיקה של השפה ורק לאחר מכן ללמוד את העיצוב.