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

רשימה מלאה של כל התגיות והמשמעות של כל אחת ניתן למצוא בקישור:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

1. תגית עוגן a

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

<a href="http://www.google.com">Go To Google</a>

התגית כוללת שני רכיבי מידע: עמוד היעד אליו נעבור בעת לחיצה על תוכן התגית ותוכן טקסטואלי לחיץ שיתאר את העמוד. עמוד היעד מוגדר בתוכן של מאפיין href.
השימוש השני בתגית a הינו לציון מקום בדף אליו נרצה לעבור (כלומר עוגן). אנו יכולים לציין עוגן באמצעות המאפיין name, וזה נראה כך:

<a name="footer">Footer</a>

במידה וקיים בעמוד עוגן כזה, אפשר להוסיף # לשורת הכתובת וכך לגרום לדפדפן לגלול עד שהעוגן יוצג על המסך. לדוגמא אם לקובץ קוראים index.html תוכלו לכתוב בשורת הכתובת בדפדפן:

index.html#footer

הדפדפן יגלול אוטומטית את העמוד כדי שתוכן התגית יוצג על המסך.

2. תגית התמונה img

התגית img מאפשרת לנו להציג תמונה באמצעות הקלדת URL אל התמונה, כמו בדוגמא הבאה:

<img src="http://www.petelepage.com/assets/HTML5-Guy-BBeanie.png" alt="Happy HTML5 Guy" width="400" />

מאפייני התגית כוללים את כתובת התמונה, המאפיין alt המגדיר טקסט חלופי עבור קוראי מסך או דפדפנים שלא מציגים תמונות ומאפיינים width ו height עבור מימדי התמונה. אם לא תזינו מימדים הדפדפן יטען את התמונה וישתמש במימדי התמונה המקוריים, ואם תזינו אורך וגם רוחב הדפדפן ישנה את גודל התמונה באופן שעלול לקלקל את הפרופורציות שלה.
ניתן לרשום תגית img בתוך תגית a, וכך לקבל תמונה שאפשר ללחוץ עליה כדי להגיע לעמוד אחר.

3. התגיות div ו span

בדומה לתגית p המייצגת פסקת טקסט, התגית div גם היא מייצגת בלוק של משהו — אך במקרה של div מדובר על בלוק תוכן כללי. ההבדל בינה לבין p הוא ש div לא מניחה כלום לגבי התוכן, ולכן אין לה כללי עיצוב כמו ל-p (למשל השוליים), אבל יותר חשוב מזה, גם אין לה משמעות סמנטית לגבי מבנה המסמך.
כל מטרתה של התגית div היא לסגור קטע מסוים ב-HTML בתוך בלוק כך שנוכל לעצב אותו באמצעות CSS.
התגית span חסרת משמעות במידה דומה, רק שבמקום לדבר על בלוק של טקסט (מה שיוביל לירידת שורה בסיומה), התגית span הינה אלמנט inline, בדומה לתגית a שראינו בחלק הקודם. לאחר תגית span אין ירידת שורה וכללי העיצוב החלים עליה לא יכולים לשנות את גודל התוכן.

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

4. תגיות רשימה: ul, ol, li

תגיות הרשימה מגדירות רשימות של פריטים, כאשר יש לנו תגית ul לרשימות לא ממוספרות ו-ol לרשימה ממוספרת. התגית li הינה תגית בלוק (כלומר אחריה יש ירידת שורה) שמגדירה פריט ברשימה.

להלן שתי דוגמאות לשימוש בתגיות אלו:

<ul>
  <li>About</li>
  <li>Gallery</li>
  <li>Contact</li>
</ul>

<ol>
  <li>Harry</li>
  <li>Mark</li>
  <li>John</li>
</ol>

מאחר ואת עיצוב הרשימה ניתן לשנות בקלות באמצעות CSS, אנו משתמשים ברשימות לכל קיבוץ של פריטים שיש ביניהם קשר סמנטי אפילו פריטים בתפריט עליון או תמונות בגלריה.

5. תגיות לטפסים

טופס מוגדר ב HTML באמצעות התגית form, ובתוכה ניתן להוסיף תגיות לפרמטרים השונים שישלחו לשרת דרך הטופס. להלן דוגמא לטופס פשוט המאפשר בחירה של צבע אהוב:

<form method="POST" action="save_data">
  <div>
    <label for="inp-name">Full Name</label>
    <input type="name" id="inp-name" placeholder="e.g. John Smith" />
  </div>
  <div>
    <label for="inp-color">Favorite Color</label>
    <input type="color" id="inp-color" placeholder="e.g. blue" />
  </div>
  <div>
    <input type="submit" value="Save" />
  </div>
</form>

התגית label מייצגת תווית לשדה בטופס, וכוללת מאפיין for שצריך להיות זהה למאפיין id של אחד השדות. התגית input מייצגת שדה מידע בטופס, ומאפיין type שלה מציין מה סוג המידע שיועבר בשדה. לרשימה מלאה של האפשרויות מומלץ לפתוח את התיעוד.
התגית form עוטפת את השדות השונים ומגדירה את אופן העברת המידע מהטופס לשרת. המאפיין method של טופס קובע מה סוג הבקשה, בדוגמא שלנו בקשת POST, והמאפיין action מציין את הנתיב, בדוגמא שלנו הנתיב save_data. (למי שרוצה להרחיב על HTTP יש שעור בנושא בפרק תקשורת, שנגיע אליו בהמשך הקורס ואפשר כבר לדלג ולהציץ).