תגיות בשימוש בתוך הקטע הראשי
מאמר זה מסביר את התגים בשימוש בחלק ה-Head.
הסבר על התגיות הנמצאות בשימוש בקטע ה-Head, כמו <link>, <script>, <style>.
YouTube Video
תגיות בשימוש בתוך הקטע הראשי
תגית <title>
1<title>Document Title</title>- תג ה-
<title>מגדיר את כותרת המסמך. כותרת זו מופיעה בכרטיסיית הדפדפן ומשמשת בסימניות ובתוצאות חיפוש.
תגית <link>
- תג ה-
<link>משמש לקישור משאבים חיצוניים למסמך הנוכחי. הוא משמש בדרך כלל לקישור קבצי CSS חיצוניים אך יכול לשמש גם לאייקונים ומשאבים חיצוניים נוספים.
התכונה rel של תג <link>
מאפיין ה-rel משמש לציון הקשר בין המשאב המקושר למסמך הנוכחי בתג ה-<link>. ישנם סוגים רבים לערכי המאפיין rel, אך כאן נסביר את הסוגים החשובים והשימושיים ביותר.
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetמשמש לקישור גיליון סגנון חיצוני.
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"מגדיר את האייקון המופיע בכרטיסיית הדפדפן או בסימניה. על ידי ציון ה-favicon הנכון, ממתגים את האתר ומשפרים את הזיהוי הוויזואלי שלו.
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadמשמש לטעינת משאבים מראש עוד לפני תחילת העיבוד של הדף. זה מועיל במיוחד למשאבים שבהם התזמון חשוב, כגון גופנים או תמונות גדולות. זה משפר את הביצועים ומעצים את חוויית המשתמש.
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalמשמש ליידע מנועי חיפוש לגבי הגרסה הקנונית של דף. במקרה של תוכן כפול, ציון כתובת ה-URL הקנונית מסייע באיחוד דירוג מנועי החיפוש מבחינת SEO ומבטיח שתוכן ייאונדקס כראוי.
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternateמשמש לתיאור דפים בשפות או פורמטים שונים למנועי חיפוש ולדפדפנים. באתרים רב-לשוניים, ניתן לציין את כתובת ה-URL עבור כל גרסה של השפה בשילוב עם התכונהhreflangכדי להציג למשתמשים דפים בשפה המתאימה.
manifest
1<link rel="manifest" href="/manifest.json">- הקובץ
manifestמספק לדפדפן קובץ מניפסט המכיל מידע על תצורה עבור אפליקציה מתקדמת (PWA). קובץ זה מכיל מידע כמו אייקון האפליקציה, צבע הנושא ומצב התצוגה, מה שעוזר להתקנה ולהפעלת ה-PWA במכשירים ניידים.
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- כאשר מתבצע תהליך התייחסות למשאבים חיצוניים, ביצוע פתרון DNS מראש לדומיין יכול לשפר את מהירות טעינת הדף. זה יעיל במיוחד עבור עמודים עם משאבים חיצוניים רבים או במקרים שבהם נחוצה חוויית משתמש מהירה.
תגית <style>
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style>- תגית
<style>משמשת להגדרת גיליונות עיצוב פנימיים. היא משמשת ליישום סגנונות CSS על אלמנטים בדף, ומאפשרת כתיבת CSS ללא שימוש בקבצים חיצוניים.
תגית <script>
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script>- תגית
<script>משמשת להטמעת קוד JavaScript במסמך HTML. ניתן גם לקשר קבצי JavaScript חיצוניים ולשלוט בהתנהגות הדינמית של הדף. יש להשתמש בתכונהsrcכדי לציין את קובץ הסקריפט.
תכונות async ו-defer
תגית <script> תומכת בשתי תכונות, async ו-defer, המשפיעות על תזמון טעינת הסקריפט והפעלתו. בדרך כלל, הדפדפן מעבד את הסקריפטים ברצף, אך שימוש בתכונות אלו עשוי לשפר את ביצועי הדף וחוויית הטעינה.
תכונת async
1<script src="script.js" async></script>- שימוש בתכונה
asyncמאפשר לסקריפט להיטען בצורה אסינכרונית. הדפדפן טוען את הסקריפט במקביל למשאבים אחרים ומבצע אותו מיד לאחר סיום הטעינה. asyncמתאים בעיקר לסקריפטים עצמאיים ונעשה בו שימוש כאשר הסקריפט אינו תלוי בטעינת סקריפטים אחרים או ה-DOM.
תכונת defer
1<script src="script.js" defer></script>- שימוש בתכונה
deferמאפשר טעינת הסקריפט בצורה אסינכרונית אך ביצועו לאחר שהפרשנות של ה-HTML הסתיימה. ביצוע הסקריפט אינו חוסם את הצגת הדף, ולכן הוא משפר את חוויית המשתמש. deferיעיל כאשר יש צורך לבצע סקריפטים לאחר שה-DOM נטען במלואו. לדוגמה, הוא מתאים כאשר רוצים שהסקריפט יתבצע לאחר שכל העיצוב והאלמנטים בדף נטענו במלואם.
מדיניות CORS ותכונת crossorigin
כאשר טוענים סקריפטים חיצוניים, עשויות להיות מוטלות מגבלות אבטחה על פי מדיניות Same-Origin. במקרים כאלה, ניתן להשתמש במאפיין crossorigin כדי לאפשר שיתוף משאבים.
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>ניתן להגדיר את המאפיין crossorigin עם שני הערכים הבאים:.
anonymous: שולח בקשות מבלי לכלול אישורים.use-credentials: שולח בקשות הכוללות אישורים.
תכונת type
תג <script> יכול להשתמש במאפיין type כדי להגדיר את סוג הסקריפט. בברירת מחדל משתמשים ב-JavaScript, אך ניתן גם לציין סוגים מסוימים של סקריפטים (לדוגמה, JavaScript מסוג מודול או שפת תבניות).
מודולי JavaScript
1<script type="module" src="module.js"></script>-
מאז ECMAScript 2015 (ES6), הוכנסו מודולים ב-JavaScript, המאפשרים לחלוק את הקוד למודולים, מה שמגביר את השימושיות החוזרת. על ידי הגדרת
type="module", ניתן להתייחס לסקריפט כאל מודול. -
ניתן לחלק מודולים למודולים אחרים באמצעות
importו-export.
סקריפטים שאינם JavaScript
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- ניתן להגדיר סקריפטים שאינם JavaScript בתוך תג
<script>. לדוגמה, יש להשתמש ב-type="application/ld+json"כאשר מתארים נתונים מובנים כמו JSON-LD. כאן, JSON-LD הוא פורמט שמבנה נתונים בעמוד אינטרנט, ומאפשר למנועי חיפוש ויישומים אחרים להבין את הנתונים לעומק.
הערות לשימוש בתג <script>
- סדר הסקריפטים: ספריות שסקריפטים תלויים בהן חייבות להיטען לפני הסקריפטים התלויים. לדוגמה, סקריפטים המשתמשים ב-jQuery חייבים להיטען לאחר טעינת jQuery עצמו.
- אופטימיזציית ביצועים: כדי למנוע השפעה על מהירות טעינת העמוד, יש לטעון סקריפטים רק כאשר הם נדרשים ולהימנע מהרצת סקריפטים שאינם נחוצים.
- אמצעי אבטחה: כאשר משתמשים בסקריפטים חיצוניים, יש לוודא שהם נטענים ממקורות אמינים כדי למנוע הטמעת סקריפטים זדוניים.
תג <base>
1<base href="https://example.com/">- תג
<base>מגדיר את כתובת ה-URL הבסיסית עבור כל כתובות ה-URL היחסיות במסמך. ה-URL שצוין במאפייןhrefהופך לבסיס עבור נתיבים יחסיים בקישורים ובתמונות. בדרך כלל הוא משמש פעם אחת בלבד לכל עמוד.
תג <noscript>
1<noscript>Your browser does not support JavaScript!</noscript>- תג
<noscript>מגדיר תוכן שמוצג כאשר JavaScript מושבת בדפדפן. הוא משמש לספק תוכן חלופי עבור סביבות שבהן JavaScript אינה נתמכת.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.