מטרת קטע ה-head ב-HTML
קטע ה-head הינו החלק האינפורמטיבי של ה-HTML. הוא כולל תגיות שמתארות את ה-HTML, טעינה של קבצים נילווים ועוד.
להלן קטע head לדוגמה שיכול להיות באתר למכירה של מתנות לאירועים שונים:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="Special gifts for holidays, parties and special occasions. Purchase your gift now." />
<meta property="og:description" content="Special gifts for holidays, parties and special occasions. Purchase your gift now." />
<meta property="og:locale" content="he_IL" />
<meta property="og:title" content="Special Gifts" />
<meta property="og:type" content="website" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Special Gifts</title>
<link href="/style.css" rel="stylesheet" />
<link href="image_favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="galleries.js"></script>
</head>
<body>
BODY TAGS HERE
</body>
</html>
ננתח להלן את התגיות בדוגמה זו.
תגית meta ב-head
תגיות ה-meta מספקות נתוני מטא (meta data) שהם נתונים על הנתונים.
השורה להלן מתארת את הקידוד של הנתונים שמוצגים על המסך, במקרה שלנו UTF8 שהוא קידוד של ריבוי שפות.
<meta charset="utf-8" />
השורה להלן מיידעת את מנועי החיפוש כי עמוד זה הינו עמוד שצריך לסרוק אותו ולהציגו בתוצאות החיפוש.
<meta name="robots" content="index, follow" />
השורה להלן מספקת למנועי החיפוש תאור קצר של עמוד ה-HTML, כפי שנרצה שיוצג עבור העמוד בתוצאת החיפוש.
<meta name="description" content="Special gifts for holidays, parties and special occasions. Purchase your gift now." />
השורות להלן מספקות מידע על עמוד ה-HTML בפורמט Open Graph עבור רשתות חברתיות. המידע כולל בין היתר את תאור העמוד, שפת העמוד, כותרת העמוד וסוג העמוד.
<meta property="og:description" content="Special gifts for holidays, parties and special occasions. Purchase your gift now." />
<meta property="og:locale" content="he_IL" />
<meta property="og:title" content="Special Gifts" />
<meta property="og:type" content="website" />
השורה להלן מספקת מידע למכשירי סלולר עבור אופן הצגת העמוד: רוחב ראשוני של העמוד ביחס למסך של הטלפון הסלולרי ואפשרות ביצוע הגדלה (זום) של העמוד.
<meta name="viewport" content="width=device-width, initial-scale=1"/>תגית title ב-head
תגית ה-title קובעת את הטייטל (הכותרת) של העמוד.
הטייטל הוא השורה שמוצגת בעת מעבר עכבר על הלשונית של החלון בדפדפן, והיא גם מוצגת כשורת הכותרת בתוצאת החיפוש במנוע החיפוש.
השורה להלן קובעת את הטייטל שיהיה Special Gifts.
<title>Special Gifts</title>תגית link ב-head
לתגית link מספר שימושים שונים. המשותף לכולם, הוא התייחסות לקבצים חיצוניים.
השורה להלן טוענת קובץ CSS חיצוני. קובץ CSS הוא קובץ עם הגדרות עיצוב, אנו מלמדים עליו בקורס ה-CSS.
<link href="/style.css" rel="stylesheet" />
השורה להלן טוענת קובץ fav-icon. קובץ fav-icon הוא קובץ תמונה המייצגת את האתר. תמונה זו היא התמונה המוצגת על הלשונית של הדפדפן ולעיתים גם משולבת בתוצאת החיפוש במנועי החיפוש.
<link href="image_favicon.png" rel="shortcut icon" type="image/x-icon" />תגית script ב-head
תגית script מאפשרת טעינה של קבצי סקריפט חיצוניים. קבצי סקריפט הם קבצים הכוללים קוד ביצועי בשפת צד לקוח. ברוב המקרים מדובר על קבצים בשפת התוכנה ג'אווה סקריפט.
<script src="galleries.js"></script>
