HyperText Markup Language, או HTML, היא שפת הסימון הרגילה לתיאור מבנה המסמכים המוצגים באינטרנט. HTML מורכב מסדרה של אלמנטים ותכונות המשמשים לסימון כל הרכיבים במסמך כדי לבנות אותו בצורה משמעותית.
מסמכי HTML הם בעצם עץ של צמתים, כולל רכיבי HTML וצמתים של טקסט. רכיבי HTML מספקים את הסמנטיקה והעיצוב של מסמכים, כולל יצירת פסקאות, רשימות וטבלאות והטמעת תמונות ופקדי טפסים. לכל רכיב אפשר לציין כמה מאפיינים. רכיבים רבים יכולים להכיל תוכן, כולל רכיבים אחרים וטקסט. שאר הרכיבים ריקים, שהתג והמאפיינים מגדירים את הפונקציה שלהם.
יש מספר קטגוריות של רכיבים, כולל מטא-נתונים, חלוקה לקטעים, טקסט, סמנטי בתוך השורה, פורמט, אינטראקטיבי, מדיה, רכיב וכתיבת סקריפטים. נסביר על רוב הנושאים האלה בסדרה. אבל לפני כן, מהו רכיב?
Elements
HTML מורכב מסדרה של רכיבים, שבהם משתמשים כדי לתחום או לעטוף חלקים שונים של התוכן כדי לגרום לו להופיע או לפעול באופן מסוים. רכיבי HTML מודגשים באמצעות תגים, שנכתבו באמצעות סוגריים זוויתיים (< ו->).
כותרת הדף שלנו היא כותרת ברמה ראשונה, שעבורה אנחנו משתמשים בתג <h1>. הכותרת עצמה, "סדנת למידת מכונה", היא תוכן הרכיב שלנו. התוכן עובר בין התג הפתוח לתג הסוגר. הרכיב כולו - התג הפותח, התג הסוגר והתוכן.
התג הסוגר זהה לתג הפותח, ולפניו קו נטוי.
הרכיבים והתגים אינם זהים, אם כי אנשים רבים משתמשים במונחים לסירוגין. שם התג הוא התוכן בסוגריים. התג כולל את הסוגריים. במקרה הזה, <h1>. "רכיב" הוא התג הפותח והסוגר וכל התוכן שבין התגים האלה, כולל רכיבים בתוך התגים.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
הרכיב הזה מכיל רכיבים אחרים שמוטמעים בו. כשממקמים רכיבים, חשוב לוודא שהם מוצבים בצורה תקינה. תגי HTML צריכים להיסגר בסדר ההפוך שבו הם נפתחו. בדוגמה שלמעלה, אפשר לראות איך <em> נפתח וסגור בתוך תגי <strong> הפותחים והסוגרים, כאשר <strong> פתוח וגם סגור בתגי <p>.
התגים לא מוצגים בדפדפנים. התגים משמשים לפירוש התוכן של הדף.
HTML הוא מאוד סלחני. לדוגמה, אם אנחנו משמיטים את תגי הסגירה </li>, התגים הסוגרים הם משתמעים.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
למרות שחובה לסגור <li>, לא מומלץ לעשות זאת. השדה </ul> הסוגר הוא חובה. אם תג הסגירה של הרשימה הלא ממוינת יושמט, הדפדפן ינסה לקבוע איפה הרשימה והפריטים ברשימה מסתיימים, אבל יכול להיות שלא תסכימו עם ההחלטה.
המפרט של כל רכיב מפרט אם תג הסגירה הוא חובה או לא. במפרט "לא ניתן להשמיט אף תג", ופירוש הדבר שצריך להוסיף גם תג פותח וגם תג סוגר. המפרט מספק רשימה של כל התגים הסוגרים הנדרשים.
אם ה-<em> או <strong> בדוגמה הקודמת לא נסגרו, יכול להיות שהדפדפן יסגור את הרכיב, או לא. אם לא תסגרו <em>, יכול להיות שהתוכן יוצג באופן שונה ממה שהתכוונתם. אם משמיטים את </ul> והתג הבא הוא תג סוגר למאגר ההורה של הרשימה, יש לכם מזל. לעומת זאת, אם מדובר בתג <h1> פותח, הדפדפן מניח שהכותרת היא חלק מהרשימה, כולל סגנונות המקבלים בירושה. חלק מתגי הסגירה שהושמטו גורמים לבעיות גדולות יותר: אי-סגירה של תגים מסוימים, כגון <script>, <style>, <template>, <textarea> ו-<title>, גורמת לשיבושים בתוכן הבא כפי שמוצג בדוגמה הבאה.
אם חלק מהתוכן נוטה בטעות או בלי כוונה, זה לא מספיק בשביל להרוס את העסק. מכיוון שרוב התוכן שלך לא מעוצב בסגנון אחר באזור טקסט שגודלו 200x300, מכיוון ששכחת להוסיף </textarea> או לא מוצג כלל, מכיוון ששכחת לסגור </style>, האתר לא יהיה שמיש.
במקרים מסוימים, דפדפנים יכללו רכיבים גם אם התגים לא נמצאים בתגי העיצוב. רכיבים יכולים להיות משתמעים, ולכן רכיב יכול להתקיים גם אם התגים לא מופיעים בו. הדפדפן יוסיף <body></body> מסביב לתוכן ו-<tbody></tbody> מסביב לשורות בטבלה, גם אם לא לעשות זאת. עם זאת, למרות שמותר להשמיט תגים, לא כדאי לעשות זאת. כמו כן, כפי שצוין קודם, צריך לוודא שהן מוצבות בצורה תקינה. העתיד לתחזק את תגי העיצוב, וכל מי שיעבוד על בסיס הקוד שלך, יודה לך.
קיימים שני סוגי רכיבים: מוחלפים ולא הוחלפו.
רכיבים שלא הוחלפו
הפיסקה, הכותרת והרשימות שסומנו בקטע הקודם לא יוחלפו. לרכיבים שלא הוחלפו יש תגים פותחים ותגי סגירה (לפעמים אופציונליים) שמקיפים אותם, ועשויים לכלול טקסט ותגים אחרים כרכיבי משנה. התגים הסוגרים האלה יכולים להפוך ביטוי או תמונה להיפר-קישור, להפוך משפט לכותרת, להדגיש מילים ועוד.
רכיבים שהוחלפו ורכיבים ריקים
הרכיבים המוחלפים מוחלפים באובייקטים. במקרה של רוב התמונות, זה יהיה ווידג'ט של ממשק משתמש (UI) גרפי, או קובץ תמונה מסוג רסטר או קובץ תמונה שניתן לשנות. באובייקטים מוחלפים, לכל אחד יש מראה ברירת מחדל. הסגנונות הרלוונטיים מוגבלים בהתאם לסוג האובייקט ולדפדפן. לדוגמה, רוב הדפדפנים מאפשרים עיצוב מוגבל של ווידג'טים בממשק המשתמש ופסאודו-אלמנטים קשורים. במקרה של תמונות מסוג רשת נקודות, גובה, רוחב, חיתוך וסינון ניתן לבצע בקלות באמצעות CSS, אבל לא הרבה מעבר לכך. מצד שני, ניתן להתאים באופן מלא גרפיקה וקטורית ניתנת להתאמה באמצעות שפת סימון המבוססת על XML דומה ל-HTML (אלא אם הן מכילות תמונות רסטר). גם אפשר לעצב אותן בצורה מלאה. שימו לב שהיכולת לעצב SVG מוטמע מה-CSS המקושר לקובץ ה-HTML שמטמיע אותו תלויה באופן הגדרת ה-SVG.
בדוגמה הזו, שני הרכיבים המוחלפים <img> ו-<input> מוחלפים בתוכן שאינו טקסט: תמונה ואובייקט גרפי של ממשק משתמש, בהתאמה.
<input type="range">
<img src="switch.svg" alt="light switch">
הפלט של קוד ה-HTML שלמעלה:
בדרך כלל מתבלבלים בין רכיבים מוחלפים לבין רכיבים ריקים. אלמנטים ריקים הם אלמנטים שסוגרים את עצמם ומיוצגים על ידי תג אחד. המשמעות היא שאין תג סוגר לאלמנט ריק. אפשר גם להוסיף קו נטוי בסוף התג, כדי שיהיה קל יותר לקרוא את תגי העיצוב. בהמשך לדוגמה הזו, אנחנו סוגרים את התג באמצעות קו נטוי:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
הקו הנטוי שבסוף הוא בסגנון של פעם: הוא מאפשר לציין שהאלמנט נסגר מעצמם ולא יהיה תג סיום או תג סוגר תואם.
רכיבים ריקים לא יכולים להכיל תוכן טקסט או רכיבים מקוננים. בין האלמנטים שבוטלו נכללים, בין היתר, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> ו-<wbr>.
רוב הרכיבים המוחלפים הם רכיבים ריקים, אבל לא כולם. הרכיבים video, picture, object ו-iframe מוחלפים, אבל הם לא ריקים. כולן יכולות להכיל רכיבים אחרים או טקסט, ולכן לכולן יש תג סוגר.
רוב הרכיבים הריקים מוחלפים. אבל שוב, לא כולם, כפי שראינו עם base, link, param ו-meta. למה יש רכיב ריק שלא יכול להכיל תוכן כלשהו, שלא מוחלף ולכן לא מציג שום דבר במסך? כדי לספק מידע על התוכן. המידע מסופק ממאפייני הרכיבים.
מאפיינים
אולי שמתם לב שהדוגמאות <img> ו-<input> הכילו פרטים נוספים מלבד סוג הרכיב בתג הפותח שלהן. החלקים הנוספים האלה של צמדי שם/ערך מופרדים ברווחים (אם כי לפעמים חובה לכלול ערך) נקראות מאפיינים. המאפיינים הם שבזכותם ה-HTML חזק כל כך. בסדרה הזו נעסוק מאות מאפיינים וערכי מאפיינים, אבל כאן רק נדון באופן כללי ונסביר איך לכלול אותם.
המאפיינים מספקים מידע על הרכיב. המאפיין, כמו שאר התג הפותח, לא יופיע בתוכן, אבל הוא עוזר להגדיר איך התוכן ייראה למשתמשים שרואים וגם למשתמשים שלא רואים (טכנולוגיות מסייעות ומנועי חיפוש).
המאפיינים מופיעים רק בתג הפותח. התג הפותח מתחיל תמיד בסוג הרכיב. אחרי הסוג אפשר להזין אפס מאפיינים או יותר, שמופרדים באמצעות רווח אחד או יותר. לאחר רוב שמות המאפיינים מופיע סימן שווה ששווה לערך המאפיין, מוקף במירכאות פותחות וסוגרות.
בדוגמה הזו יש לנו קישור לעוגן עם שני מאפיינים. שני המאפיינים האלה הפכו את התוכן "רישום" לקישור פנימי של עוגן שגולל למאפיין id="register" בכרטיסיית הדפדפן הנוכחית כשלוחצים על הקישור, כשמקישים עליו או מפעילים אותו באמצעות המקלדת או מכשיר אחר.
המאפיינים מגדירים את ההתנהגות, הקישורים והפונקציונליות של רכיבים. נעסוק במאפיינים נוספים בקטע מאפיינים בסדרה זו. כרגע, שים לב לכך שחלק מהמאפיינים הם גלובליים - כלומר הם יכולים להופיע בתוך התג הפותח של כל רכיב. חלקם רלוונטיים רק למספר רכיבים אך לא לכולם, ואחרים ספציפיים לרכיב, רלוונטיים רק לרכיב אחד.
רוב המאפיינים הם צמדי שם/ערך. אפשר לכלול מאפיינים בוליאניים שהערך שלהם הוא true, false או זהה לשם המאפיין.
<img src="switch.svg" alt="light switch" ismap />
לתמונה הזו יש שלושה מאפיינים: src, alt וismap. המאפיין src משמש לציון המיקום של נכס התמונה בפורמט SVG. המאפיין alt מספק טקסט חלופי שמתאר את תוכן התמונה. המאפיין ismap הוא בוליאני ולא נדרש ערך. המטרה היא רק להסביר מהם מאפיינים. נסביר בפירוט על המאפיינים האלה בקטע תמונות.
לא תמיד חייבים לצטט מאפיינים, אבל לפעמים חייבים לעשות זאת. אם הערך כולל רווח או תווים מיוחדים, צריך להוסיף מירכאות. לכן מומלץ תמיד לצטט. אם לא מצוטט במירכאות לפני הערך של המאפיין, צריך להוסיף רווח אחד או יותר בין המאפיינים, אבל ליתר ביטחון, כדי שהמאפיינים יהיו קריאים, מומלץ להשתמש במירכאות ורווחים ולהעריך את זה.
HTML לא תלוי אותיות רישיות, אבל חלק מערכי המאפיינים כן. הערכים שמוגדרים במפרט לא תלויי אותיות רישיות (case-sensitive). מחרוזות שלא מוגדרות כמילות מפתח בדרך כלל תלויות אותיות רישיות, כולל הערכים id ו-class.
שימו לב שאם ערך מאפיין הוא תלוי אותיות רישיות ב-HTML, הוא תלוי אותיות רישיות כשמשתמשים בו כחלק מבורר המאפיינים ב-CSS וב-JavaScript.
כדי להקל על הקריאה של תגי עיצוב, מומלץ לסמן את ה-HTML באותיות קטנות לכל שמות הרכיבים ושמות המאפיינים בתגים שלכם, אך לא חובה להוסיף ציטוט של כל ערכי המאפיינים. אם תשמעו את המונח "סימון סגנון XHTML", המונח הזה ואלמנטים ריקים בסגירה עצמית באמצעות קו נטוי בסוף הם המשמעות.
מראה הרכיבים
מראה ברירת המחדל של אלמנטים סמנטיים מוגדר על ידי גיליונות סגנונות של סוכן משתמש. רוב הדפדפנים משתמשים בגיליונות סגנונות בפועל למטרה זו, ואילו אחרים מדמים אותם בקוד. התוצאה הסופית זהה. למרות שחלק מהמגבלות על גיליונות סגנונות של סוכן משתמש מוגדרות על ידי מפרט ה-HTML, לדפדפנים יש קו רוחב רב, ולכן קיימים הבדלים מסוימים בין הדפדפנים.
הרכיב שתבחרו, ולכן התגים שבהם אתם משתמשים, צריכים להתאים לתוכן שאתם מציגים, מכיוון שלתגים יש משמעות סמנטית. הסמנטיקה, או role, של רכיב חשובה לטכנולוגיות מסייעות, ובמקרים מסוימים, למנועי חיפוש. צריך להשתמש ב-HTML כדי ליצור תוכן, ולא כדי להגדיר את המראה של התוכן. המראה הוא תחום ה-CSS. לרכיבים רבים שמשנים את מראה התוכן, כמו <h1> , <strong> ו-<em>, יש משמעות סמנטית, אבל בדרך כלל המראה משתנה בהתאם לסגנונות המחבר.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
רכיב, מאפיינים ו-JavaScript
Document Object Model (DOM) הוא ייצוג הנתונים של המבנה והתוכן של מסמך ה-HTML. כשהדפדפן מנתח HTML, הוא יוצר אובייקט JavaScript עבור כל רכיב וקטע של טקסט. האובייקטים האלה נקראים צמתים – צמתים וצמתים של טקסט, בהתאמה.
יש ממשק להגדרת הפונקציונליות של כל רכיב HTML. ממשק ה-API של HTML DOM מספק גישה לכל רכיב HTML דרך ה-DOM ושליטה עליו, ומספק ממשקים לרכיב ה-HTML ולכל מחלקות ה-HTML שיורשות ממנו. הממשק HTMLElement מייצג את רכיב ה-HTML ואת כל הצמתים הצאצאים שלו. כל רכיב אחר מטמיע אותו דרך ממשק שיורש ממנו. לכל ממשק יורש יש בנאי, שיטות ומאפיינים. דרך נכסי HTMLElement שעברו בירושה, אפשר לגשת לכל המאפיינים הגלובליים, וגם לאירועים input, pointer, transition ו-animation. דרך סוג המשנה של רכיב מסוים, כגון HTMLAnchorElement ו-HTMLImageElement, ניתן לגשת לשיטות ולערכי מאפיינים הספציפיים לרכיב.
בחינת ההבנה
בוחנים את הידע שלכם ב-HTML
רכיבי HTML משמשים לעיצוב.
בוחרים את הרכיבים שהוחלפו.
<img><p><ul><input>צריך לבחור את כל ההצהרות הנכונות.