תחביר נכון ב- HTML5
לפני שנלמד את הסמנטיקה (המשמעות) של שפת HTML5, נלמד תחילה את התחביר הנכון של השפה.
נזכיר כי אנו מלמדים במדריך זה את שפת HTML5 בגירסתה הנוקשה XHTML, ולכן ישנן מגבלות נוספות על התחביר של השפה. מגבלות אילו אינן קיימות ב-HTML5 בגירסתה הרגילה.
- כל התגיות, המאפיינים והערכים השונים נכתבים רק באותיות קטנות, למשל יש לכתוב:
ולא:
- לכל תגית יש תגית סוגרת (או שהתגית סוגרת את עצמה).
דוגמא לתגית עם תגית סגירה:
Some text here.
</p>
דוגמא לסגירה עצמית של תגית:
נכנה "אלמנט" את הרצף תגית פתיחה + תגית סגירה תואמת + המידע בין התגיות (יכול להיות שהמידע הוא מידע טקסטואלי, או אלמנטים נוספים מקוננים). תגית הסוגרת את עצמה תכונה גם "אלמנט ריק" כיוון שאינה מכילה מידע.
- ישנן תגיות שניתן להוסיף להן "מאפיינים" attributes. מאפיינים יופיעו רק בתגית פתיחה (או בכזו הסוגרת את עצמה) ולא בתגית סגירה. לכל מאפיין יש שם ויש ערך Value הרשום במרכאות (נהוג כפולות, אבל זהו לא דבר עקרוני).
לדוגמא תגית div עם המאפיין ששמו style ושהערך שלו הינו text-align:center:
- לעיתים לתגית יהיו מספר מאפיינים שונים המופרדים ברווחים, ולכל מאפיין יהיו מספר ערכים המופרדים בנקודה פסיק.
- בניגוד ל-HTML5 בגירסתה הרגילה, בגירסת ה-XHTML אסור לקצר מאפיינים כמו בדוגמה הבאה:
הצורה הנכונה לכתוב זאת תהיה:
קינון תגיות HTML5
בכתיבה של קוד, נהוג לעשות את קינון התגיות (אינדנטציה / הזחה של התגיות) באופן שתגית פתיחה ותגית הסגירה שלה יהיו זו מתחת לזו, והתגיות הפנימיות לתגית זו יהיו מוזחות בטאב אחד פנימה:
<tag2>
<tag3>
</tag3>
</tag2>
</tag1>
סגירת תגיות
אכן היתה טעות בדוגמא והיא תוקנה.
כל הכבוד על תשומת הלב ותודה על הדיווח!
דוד
יש כאן טעות?
או שאני מפספסת משהו?
התג האחרון בדוגמא פה למעלה, לא אמור להיות
<tag1/>