התחביר של HTML ושימוש בתגיות

התחביר של HTML

נתחיל בדוגמה:

<div>
	<p>
		Mary had a little lamb.<br />
		Mary loves the lamp, you know.
	</p>
	<p>
		I have a dog.<br />
		I love him very much.<br />
		He is my best friend
	</p>
</div>

בדוגמה זו, אנו רואים קטע HTML קצר עם תגיות מקוננות (כלומר, תגיות אחת בתוך השניה).

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

כל מילה העטופה בסימנים > ו-< (גדול וקטן) היא תגית. בקטע לעיל יש 3 סוגי תגיות: תגית div, תגית p, תגית br.

מבחינה תחבירית, יש לנו תגית div אשר מקננת בתוכה 2 תגיות p. תגית ה-p הראשונה כוללת 2 שורות טקסט, כאשר הראשונה מהן מסתיימת בתגית br. תגית ה-p השניה כוללת 3 שורות טקסט, כאשר 2 הראשונות מהן מסתיימות בתגית br.

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

דגשים לכתיבת תגיות HTML בצורה תקינה

כל תגית צריכה להכתב באותיות קטנות. יש לכתוב את התגית div ולא DIV.

נחלק את התגיות ל-2 סוגים: תגיות המאפשרות קינון של תגיות אחרות, כלומר, מאפשרות להכניס בתוכן תגיות HTML נוספות, ותגיות שאינן מאפשרות קינון של תגיות אחרות.

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

תגיות שאינן מאפשרות קינון הן תגיות שעומדות בפני עצמן ואינן מפוצלות לתגית פתיחה ולתגית סגירה. לדוגמה, התגית br בדוגמה לעיל עומדת בפני עצמה. ניתן לראות כי לתגיות br בדוגמה אין מופע כפול של תגית פתיחה ותגית סגירה, כי אם מופע יחיד של תגית עצמאית. תגיות אלו מסמנים עם סימן לוכסן / בסוף התגית. סימן זה מסמן כי התגית "סוגרת את עצמה".

נבהיר כי במדריך HTML זה, אנו מדריכים לפי סטנדרטים של xhtml שהיא גירסה נוקשה יותר של כתיבת HTML (לרבות HTML5). הסטנדרט הזה מחייב סגירה של תגיות עצמאיות. עם זאת, יש הכותבים גירסאות מקלות (שלא לפי xhtml) בהן תגיות עצמאיות מופיעות ללא לוכסן כלל, ממש כמו תגית פתיחה של תגיות המאפשרות קינון.

שימוש במאפיינים בתגיות HTML

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

דוגמה:

<p style="font-weight:bold">Some text</p>

בדוגמה זו, התגית p כוללת את המאפיין style שהערך שלו הוא font-weight:bold.

תגיות יכולות לכלול יותר ממאפיין אחד, וכל מאפיין יכול לכלול כמה ערכים.

דוגמה:

<p style="font-size:16px;font-weight:bold;" class="poem title_poem">Some text</p>

בדוגמה זו, התגית p כוללת 2 מאפיינים: style ו-class. המאפיין style כולל 2 ערכים המופרדים באמצעות ; והמאפיין class כולל 2 ערכים המופרדים באמצעות סימן רווח.