תודה שצפית ב-Google I/O! צפייה בתוכן על פי דרישה.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

מבנה המסמך

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

כדי ליצור אתר MachineLearningWorkshop.com (MLW), מתחילים בהוספת הרכיבים שצריכים להיחשב חיוניים לכל דף אינטרנט: סוג המסמך, השפה האנושית של התוכן, מערכת התווים וכמובן הכותרת או השם של האתר או האפליקציה.

הוספה לכל מסמך HTML

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

`<!DOCTYPE html>`

החלק הראשון בכל מסמך HTML הוא המבוא. ב-HTML, כל מה שצריך הוא <!DOCTYPE html>. זה נראה כמו רכיב HTML, אבל זה בעצם צומת מיוחד שנקרא doctype. ה-DOCTYPE אומר לדפדפן להשתמש במצב רגיל. אם לא מציינים את המצב, הדפדפנים משתמשים במצב עיבוד שונה שנקרא quirks mode. הכללת ה-DOCTYPE עוזרת למנוע מצב תאימות (quirks mode).

`<html>`

הרכיב <html> הוא רכיב הבסיס של מסמך HTML. הוא רכיב האב של <head> ו-<body>, ומכיל את כל מה שנמצא במסמך ה-HTML מלבד doctype. אם לא מציינים את השפה, היא מובלעת, אבל מומלץ לציין אותה כדי להצהיר על השפה של המסמך.

שפת התוכן

המאפיין lang בתג <html> מגדיר את השפה הראשית של המסמך. הערך הוא קוד שפה לפי תקן ISO, שאחריו אפשר לציין אזור. לדוגמה, צרפתית בקנדה היא fr-CA, ובבורקינה פאסו היא fr-BF. ההצהרה הזו עוזרת לקוראי מסך, למנועי חיפוש ולשירותי תרגום לזהות את שפת המסמך.

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

בנוסף להגדרת השפה של המסמך וחריגים לשפת הבסיס הזו, אפשר להשתמש במאפיין בסלקטורים של CSS. אפשר לטרגט את <span lang="fr-fr">Ceci n'est pas une pipe.</span> באמצעות מאפיין [lang|="fr"] וממשקי בחירת שפה :lang(fr).

`<head>`

בין התגים הפותחים והסוגרים <html>, נמצא את שני צאצאים: <head> ו-<body>:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

התג <head> מכיל מטא-נתונים של אתר או אפליקציה, והתג <body> מכיל תוכן גלוי. בהמשך הקטע הזה נתמקד ברכיבים שמוטמעים בתוך התג <head>.

רכיבים נדרשים בתוך `<head>`

המטא-נתונים של המסמך, כולל שם המסמך, ערכת התווים, הגדרות אזור התצוגה, תיאור, כתובת URL בסיסית, קישורים לגיליון סגנונות וסמלים, נמצאים ברכיב <head>. יכול להיות שלא תצטרכו את כל התכונות האלה, אבל תמיד צריך לכלול את ההגדרות של ערכת התווים, הכותרת ואזור התצוגה.

קידוד תווים

האלמנט הראשון ב-<head> צריך להיות הצהרת קידוד התווים charset. הוא מופיע לפני הכותרת כדי לוודא שהדפדפן יוכל לעבד את התווים בכותרת הזו ואת כל התווים בשאר המסמך.

קידוד ברירת המחדל ברוב הדפדפנים הוא windows-1252, בהתאם ללוקאל. עם זאת, מומלץ להשתמש ב-UTF-8, שמאפשר קידוד של כל התווים בטווח של בייט אחד עד ארבעה בייטים.

כדי להגדיר את קידוד התווים ל-UTF-8, צריך לכלול:

<meta charset="utf-8" />

אפשר אפילו להוסיף אמוג'י לשם, אם מציינים UTF-8 (לא תלוי באותיות רישיות).

קידוד התווים עובר בירושה לכל מה שנמצא במסמך, כולל <style> ו-<script>. ההצהרה הקטנה הזו אומרת שאפשר לכלול אמוג'י בשמות של מחלקות וב-selectorAPI. אם אתם משתמשים באמוג'י, הקפידו להשתמש בהם באופן שמשפר את נוחות השימוש בלי לפגוע בנגישות.

כותרת המסמך

לכל דף, לדף הבית ולכל הדפים הנוספים, צריכה להיות כותרת ייחודית. התוכן של כותרת המסמך, הטקסט שבין התגים הפותחים והסוגרים <title>, מוצג בכרטיסיית הדפדפן, ברשימת החלונות הפתוחים, בהיסטוריה, בתוצאות החיפוש ובכרטיסים של המדיה החברתית, אלא אם הוגדר מחדש באמצעות תגי <meta>.

<title>Machine Learning Workshop</title>

מטא-נתונים של אזור התצוגה

תג ה-meta viewport חיוני להיענות של האתר, ומבטיח שהתוכן יוצג בצורה טובה ללא קשר לרוחב אזור התצוגה. תג ה-meta viewport קיים מאז 2007, אבל רק לאחרונה תועד במפרט. הוא שולט בגודל ובקנה המידה של אזור התצוגה, ומונע את כיווץ התוכן כדי להתאים למסכים קטנים יותר.

<meta name="viewport" content="width=device-width" />

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

ה-Viewport הוא חלק מביקורת הנגישות של Lighthouse. האתר שלכם יעבור את הבדיקה אם הוא ניתן להרחבה ולא מוגדר בו גודל מקסימלי.

עד עכשיו, המבנה של קובץ ה-HTML הוא:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

תוכן אחר ב-`<head>`

יש עוד הרבה דברים שמשפיעים על <head>. כל המטא-נתונים, למעשה. רוב הרכיבים שמופיעים ב-<head> מוסברים ביחידה הזו, אבל נספק מידע נוסף ביחידה בנושא מטא-נתונים.

ראיתם את קבוצת המטא-תווים ואת שם המסמך, אבל יש עוד הרבה מטא-נתונים מחוץ לתגי <meta> שצריך לכלול.

CSS

בקטע <head> מציינים את הסגנונות של ה-HTML. אם רוצים ללמוד על סגנונות, אפשר לעיין בתוכנית הלימודים שמוקדשת ל-CSS, אבל חשוב לדעת איך לכלול אותם במסמכי HTML.

יש שלוש דרכים לכלול CSS: ‏ <link>,‏ <style> והמאפיין style

יש שתי דרכים עיקריות לכלול סגנונות בקובץ ה-HTML: לכלול משאב חיצוני באמצעות רכיב <link> עם המאפיין rel שמוגדר לערך stylesheet, או לכלול CSS ישירות בחלק העליון של המסמך בין תגי הפתיחה והסגירה <style>.

התג <link> הוא השיטה המועדפת להוספת גיליונות סגנונות. קישור של גיליונות סגנונות חיצוניים בודדים או מעטים הוא טוב לחוויית המפתחים ולביצועי האתר: אתם יכולים לתחזק את ה-CSS במקום אחד במקום שהוא יהיה מפוזר בכל מקום, והדפדפנים יכולים לשמור במטמון את הקובץ החיצוני, מה שאומר שהוא לא צריך להוריד אותו שוב בכל פעם שמתבצעת ניווט בדף.

התחביר הוא <link rel="stylesheet" href="styles.css">, כאשר styles.css הוא שם הקובץ והמיקום היחסי של גיליון הסגנונות. יכול להיות שתראו את המאפיין type="text/css", אבל הוא לא חובה. המאפיין rel מגדיר את קשר הגומלין, שהוא stylesheet במקרה הזה. אם לא תציינו את מאפיין rel, שירות ה-CSS לא יקושר.

בהמשך נציג עוד כמה ערכים של rel, אבל קודם נסביר על דרכים אחרות לכלול CSS.

אם רוצים שהסגנונות של גיליון הסגנונות החיצוני יהיו בשכבת קסקייד, אבל אין גישה לעריכת קובץ ה-CSS, צריך לכלול את ה-CSS עם @import בתוך <style>:

<style>
  @import "styles.css" layer(firstLayer);
</style>

כשמשתמשים ב-@import כדי לייבא גיליונות סגנונות למסמך, באופן אופציונלי לשכבות מדורגות, הצהרות ה-@import צריכות להיות ההצהרות הראשונות ב-<style> או בגיליון הסגנונות המקושר, מחוץ להצהרה של ערכת התווים.

שכבות מדורגות הן עדיין חדשות יחסית, ויכול להיות שלא תראו את התג @import בתוך התג <style>, אבל לרוב תראו מאפיינים מותאמים אישית שמוצהרים בתוך בלוק סגנונות של התג <style>:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

סגנונות שנוספו באמצעות <link>,‏ <style> או שניהם צריכים להיות בתג head. הן פועלות כשהן נכללות בתוכן המסמך, אבל מומלץ להוסיף סגנונות בתג head מסיבות שקשורות לביצועים. יכול להיות שזה נראה לכם לא הגיוני, כי אולי אתם רוצים שהתוכן שלכם ייטען ראשון. אבל עדיף שהדפדפן ידע איך לעבד את התוכן כשהוא נטען. הוספת סגנונות קודם לכן מונעת את הצביעה מחדש המיותרת שמתרחשת אם אלמנט מעוצב אחרי שהוא מוצג בפעם הראשונה.

יש דרך אחת לכלול סגנונות שלא תשתמשו בהם אף פעם ב-<head> של המסמך: סגנונות מוטבעים. סביר להניח שלעולם לא תשתמשו בסגנונות מוטבעים בתג head, כי גיליונות הסגנונות של סוכני המשתמש מסתירים את התג head כברירת מחדל. אבל אם רוצים ליצור עורך CSS בלי JavaScript, למשל כדי לבדוק את הרכיבים המותאמים אישית של הדף, אפשר להפוך את התג head לגלוי באמצעות display: block, ואז להסתיר את כל מה שבתג head, ואז באמצעות מאפיין style מוטבע, להפוך בלוק סגנון שניתן לעריכה לגלוי.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

אפשר להוסיף סגנונות מוטבעים לרכיב <style>.

שימושים אחרים ברכיב `<link>`

הרכיב link משמש ליצירת קשרים בין מסמך ה-HTML לבין משאבים חיצוניים. אפשר להוריד חלק מהמשאבים האלה, ואחרים הם משאבים למידע בלבד. סוג הקשר מוגדר על ידי הערך של המאפיין rel. יש 25 ערכים זמינים למאפיין rel שאפשר להשתמש בהם עם <link>, ‏ <a> ו-<area>, או עם <form>, ויש כמה ערכים שאפשר להשתמש בהם עם כל המאפיינים. מומלץ לכלול את התגים שקשורים למטא-נתונים בתג head ואת התגים שקשורים לביצועים בתג <body>.

עכשיו צריך לכלול בכותרת עוד שלושה סוגים: icon,‏ alternate ו-canonical. במודול הבא תוסיפו סוג רביעי, rel="manifest".

סמל האתר

משתמשים בתג <link> עם rel="icon" כדי לזהות את סמל האתר של המסמך. סמל אתר הוא סמל קטן שמופיע בכרטיסיית הדפדפן, בדרך כלל מימין לשם המסמך. כשמצמצמים את הכרטיסיות, יכול להיות שהכותרת תיעלם, אבל הסמל יישאר גלוי. רוב סמלי האתר הם לוגו של חברה או של אפליקציה.

אם לא מציינים סמל אתר, הדפדפן יחפש קובץ בשם favicon.ico בספרייה ברמה העליונה (תיקיית השורש של האתר). באמצעות <link>, אפשר להשתמש בשם קובץ ובמיקום אחרים:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

הקוד שלמעלה אומר: "צריך להשתמש ב-mlwicon.png כסמל בתרחישים שבהם הגודל 16px,‏ 32px או 48px מתאים". במאפיין 'גדלים' אפשר להזין את הערך any עבור סמלים שניתנים לשינוי גודל, או רשימה של ערכים מרובעים widthXheight שמופרדים ברווחים. ערכי הרוחב והגובה הם 16, 32, 48 או יותר, לפי הרצף הגיאומטרי הזה. יחידת הפיקסל מושמטת, וה-X לא תלוי באותיות רישיות או קטנות.

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

יש שני סוגים מיוחדים של סמלים לא סטנדרטיים לדפדפן Safari: ‫apple-touch-icon למכשירי iOS ו-mask-icon לכרטיסיות מוצמדות ב-macOS. ‫apple-touch-icon חל רק כשהמשתמש מוסיף אתר למסך הבית: אפשר לציין כמה סמלים עם ערכים שונים של sizes למכשירים שונים. הסמל mask-icon ישמש רק אם המשתמש מצמיד את הכרטיסייה ב-Safari במחשב: הסמל עצמו צריך להיות SVG מונוכרומטי, והמאפיין color ממלא את הסמל בצבע הנדרש.

אפשר להשתמש בתג <link> כדי להגדיר תמונה שונה לחלוטין בכל דף או אפילו בכל טעינת דף, אבל לא מומלץ לעשות את זה. כדי לשמור על עקביות ולספק חוויית משתמש טובה, מומלץ להשתמש בתמונה אחת. ‫Google משתמשת בסמלי אתרים שונים לכל אחד מהאפליקציות השונות שלה: יש סמל לאימייל, סמל ליומן וכו'. אבל כל הסמלים של Google משתמשים באותה ערכת צבעים. אתם יודעים בדיוק מה התוכן של כרטיסייה פתוחה לפי הסמל.

גרסאות חלופיות של האתר

משתמשים בערך alternate של מאפיין rel כדי לזהות תרגומים או ייצוגים חלופיים של האתר.

נניח שיש לנו גרסאות של האתר שתורגמו לצרפתית ולפורטוגזית ברזילאית:

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

כשמשתמשים ב-alternate לתרגום, צריך להגדיר את המאפיין hreflang.

הערך החלופי לא מיועד רק לתרגומים. לדוגמה, המאפיין type יכול להגדיר את ה-URI החלופי של פיד RSS כשהמאפיין type מוגדר לערך application/rss+xml או application/atom+xml.

קישור לגרסת PDF דמיונית של האתר:

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

אם הערך של rel הוא alternate stylesheet, הוא מגדיר גיליון סגנונות חלופי, וחובה להגדיר את המאפיין title ולתת שם לסגנון החלופי.

כתובות URL קנוניות

אם יוצרים כמה תרגומים או גרסאות של סדנת למידת מכונה, יכול להיות שמנועי חיפוש לא יזהו את המקור המוסמך. משתמשים ב-rel="canonical" כדי לזהות את כתובת ה-URL המועדפת לאתר או לאפליקציה.

צריך לכלול את כתובת ה-URL הקנונית בכל הדפים המתורגמים ובדף הבית, ולציין את כתובת ה-URL המועדפת שלנו:

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical" קישור קנוני משמש לרוב לפוסטים בכמה אמצעי מדיה בפרסומים ובפלטפורמות בלוגים כדי לתת קרדיט למקור המקורי. כשאתר משתף תוכן, הוא צריך לכלול את הקישור הקנוני למקור המקורי.

סקריפטים

התג <script> כולל סקריפטים. סוג ברירת המחדל הוא JavaScript. אם אתם משתמשים בשפת סקריפטים אחרת, צריך לכלול את מאפיין type עם סוג ה-MIME, או type="module" עבור מודול JavaScript. המערכת מנתחת ומריצה רק JavaScript ומודולים של JavaScript.

אפשר להשתמש בתגי <script> כדי להוסיף את הקוד או כדי להוריד קובץ חיצוני. ב-MLW אין קובץ סקריפט חיצוני, כי בניגוד למה שנהוג לחשוב, לא צריך JavaScript כדי ליצור אתר פונקציונלי. זהו מסלול למידה של HTML, ולא של JavaScript.

בהמשך תצטרכו לכלול קטע קטן של JavaScript כדי ליצור ביצת פסחא:

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

קטע הקוד הזה יוצר גורם מטפל באירועים עבור רכיב עם המזהה switch. ב-JavaScript, מומלץ להימנע מהפניה לרכיב לפני שהוא קיים. הסצנה switch עדיין לא קיימת, ולכן לא נכלול את הגורם המטפל באירועים.

כשנוסיף את רכיב מתג האור, נוסיף את <script> בחלק התחתון של <body> ולא ב-<head>. למה? שתי סיבות. אנחנו רוצים לוודא שהרכיבים קיימים לפני שהסקריפט שמפנה אליהם נתקל בהם, כי אנחנו לא מבססים את הסקריפט הזה על אירוע DOMContentLoaded. בנוסף, JavaScript לא רק חוסם את הרנדור, אלא גם גורם לדפדפן להפסיק להוריד את כל הנכסים כשהסקריפטים מורדים, והוא לא ממשיך להוריד נכסים אחרים עד שביצוע ה-JavaScript מסתיים. לכן, לעיתים קרובות בקשות JavaScript מופיעות בסוף המסמך ולא בכותרת.

יש שני מאפיינים שיכולים לצמצם את החסימה של הורדה וביצוע של JavaScript: ‏ defer ו-async. עם defer, רינדור ה-HTML לא נחסם במהלך ההורדה, וקוד ה-JavaScript מופעל רק אחרי שהרינדור של המסמך מסתיים. עם async, הרינדור לא נחסם גם במהלך ההורדה, אבל אחרי שההורדה של הסקריפט מסתיימת, הרינדור מושהה בזמן שקוד ה-JavaScript מופעל.

כדי לכלול את ה-JavaScript של MLW בקובץ חיצוני, אפשר לכתוב:

<script src="js/switch.js" defer></script>

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

בסיס

יש עוד רכיב שמופיע רק ב-<head>. הרכיב <base>, שלא נמצא בשימוש לעיתים קרובות, מאפשר להגדיר כתובת URL וכתובת יעד לקישור שמוגדר כברירת מחדל. המאפיין href מגדיר את כתובת ה-URL הבסיסית לכל הקישורים היחסיים.

המאפיין target, שתקף גם ב-<base> וגם בקישורים ובטפסים, מגדיר את המקום שבו הקישורים האלה אמורים להיפתח. ברירת המחדל של _self היא פתיחת קבצים מקושרים באותו הקשר של המסמך הנוכחי. אפשרויות אחרות כוללות _blank, שפותחת כל קישור בחלון חדש, _parent של התוכן הנוכחי, שיכול להיות זהה ל-self אם חלון הפתיחה הוא לא iframe, או _top, שנמצא באותה כרטיסיית דפדפן, אבל נפתח מחוץ לכל הקשר כדי לתפוס את כל הכרטיסייה.

רוב המפתחים מוסיפים את מאפיין target למעט קישורים, אם בכלל, שהם רוצים לפתוח בחלון חדש בקישורים או בטפסים עצמם, במקום להשתמש ב-<base>.

<base target="_top" href="https://machinelearningworkshop.com" />

אם האתר שלנו מוטמע ב-iframe באתר כמו Yummly, הכללת הרכיב <base> תגרום לכך שכאשר משתמש ילחץ על קישור כלשהו במסמך שלנו, הקישור ייטען בחלון קופץ מחוץ ל-iframe, וימלא את כל חלון הדפדפן.

אחד החסרונות של הרכיב הזה הוא שקישורי עוגן נפתרים באמצעות <base>. הפונקציה <base> ממירה למעשה את הקישור <a href="#ref"> לקישור <a target="_top" href="https://machinelearningworkshop.com#ref">, ומפעילה בקשת HTTP לכתובת ה-URL הבסיסית עם הפרגמנט המצורף.

עוד כמה דברים על <base>:

יכול להיות רק רכיב <base> אחד במסמך.
היא צריכה להופיע לפני השימוש בכתובות URL יחסיות, כולל הפניות אפשריות לסקריפט או לגיליון סגנונות.

הקוד נראה עכשיו כך:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

הערות HTML

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

הבנתם את היסודות של מה שמופיע ב-<head>, אבל אתם רוצים ללמוד יותר מהיסודות. בקטעים הבאים נלמד על תגי מטא ואיך לשלוט במה שמוצג כשמקשרים לאתר שלכם ברשתות החברתיות.

בדיקה של רמת ההבנה שלך

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

איך מזהים את השפה של המסמך?

מוסיפים את המאפיין language לתג ה-HTML.

אפשר לנסות שוב.

מוסיפים את המאפיין lang לתג ה-HTML.

תשובה נכונה!

רכיב Add the <lang> לרכיב <head>.

אפשר לנסות שוב.

בוחרים את האלמנטים שאפשר לכלול ב-<head>.

<p>

אפשר לנסות שוב.

<title>

תשובה נכונה!

<meta>

תשובה נכונה!

סקירה כללית של HTML

מטא נתונים

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

הוספה לכל מסמך HTML

<!DOCTYPE html>

<html>

שפת התוכן

<head>

רכיבים נדרשים בתוך <head>

קידוד תווים

כותרת המסמך

מטא-נתונים של אזור התצוגה

תוכן אחר ב-<head>

CSS

שימושים אחרים ברכיב <link>

סמל האתר

גרסאות חלופיות של האתר

כתובות URL קנוניות

סקריפטים

בסיס

הערות HTML

בדיקה של רמת ההבנה שלך

מבנה המסמך

`<!DOCTYPE html>`

`<html>`

`<head>`

רכיבים נדרשים בתוך `<head>`

תוכן אחר ב-`<head>`

שימושים אחרים ברכיב `<link>`