תיעוד HTML עם דוגמאות להרצה: תגית title

Q: איך משנים את כותרת העמוד עם JavaScript?

הציבו ערך ב-document.title, למשל document.title = '(3) Inbox'. הדפדפן מעדכן את הלשונית מיד, וכך אפליקציות ווב מציגות מספר הודעות שלא נקראו.

Q: האם תגית title זהה למאפיין title?

לא. האלמנט נותן שם לעמוד כולו. המאפיין title, שעובד כמעט על כל אלמנט, מוסיף חלונית עזרה (tooltip) שמופיעה כשמרחפים עם העכבר מעל האלמנט.

איפה נכתבת תגית title

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

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

איך כותבים כותרת טובה

הכותרת היא לרוב הדבר הראשון שאדם קורא על העמוד שלכם, בתוצאת חיפוש או בשורת לשוניות. כמה כללים מכסים את רוב העמודים:

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

הלשונית המדומה הזו חותכת את הכותרת בערך ברוחב של לשונית אמיתית. נסו כותרת קצרה או ארוכה יותר:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

כששם האתר בסוף, גם לשונית חתוכה עדיין מראה על מה העמוד. הפכו את הסדר ("Bake Club | How to...") וכל הלשוניות מהאתר שלכם יתחילו באותן שתי מילים.

תגית title מול h1 מול המאפיין title

	איפה	איפה מוצג	תפקיד
`<title>`	ב-`<head>`, פעם אחת	לשונית, סימניות, תוצאות חיפוש	נותנת שם לעמוד
`<h1>`	ב-`<body>`	בעמוד	הכותרת הראשית הגלויה
המאפיין `title="..."`	על כל אלמנט	חלונית עזרה במעבר עכבר	רמז נוסף על האלמנט

ה-title וה-<h1> בדרך כלל תואמות במשמעות, אבל ה-title יכולה להיות מנוסחת לחיפוש ולכלול את שם האתר, בעוד שהכותרת יכולה להיות קצרה יותר. המאפיין title לא קשור אליהן, למרות השם. רחפו עם העכבר מעל המילה עם הקו התחתון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

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

ב-title נכתב רק טקסט

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

התוצאה היא Salt & Pepper <b>Bold?</b>: הישות הפכה ל-&, שלושת הרווחים הפכו לאחד, ותגיות ה-<b> נשארו כתווים רגילים. אי אפשר להדגיש טקסט בתוך title.

שינוי הכותרת עם JavaScript

אפשר לקרוא את document.title וגם לכתוב אליו. אפליקציות ווב משתמשות בו כדי להציג בלשונית מספר הודעות שלא נקראו או את המצב הנוכחי:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

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

טעויות נפוצות

אין title בכלל. הדפדפן מציג במקומה את ה-URL או את שם הקובץ, והעמוד הוא HTML לא תקין. הוסיפו אחת לכל עמוד, ליד תגית ה-meta viewport בתבנית שלכם.
אותה כותרת בכל העמודים. אי אפשר להבחין בין לשוניות, סימניות ותוצאות חיפוש.
לשים את <title> ב-<body>. דפדפנים עדיין משתמשים בה, אבל מקומה ב-<head>, וחלק מהכלים לא ימצאו אותה.
שני אלמנטים של <title>. רק הראשון נחשב. הסירו את השאר.
להתחיל כל כותרת בשם האתר. פתחו בנושא העמוד; שם האתר בא בסוף.

שאלות נפוצות

מהי תגית title ב-HTML?

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

כמה ארוכה צריכה להיות תגית title?

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

מה ההבדל בין תגית title ל-h1?

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

אפשר לשים תגיות HTML בתוך תגית title?

לא. האלמנט title מכיל טקסט בלבד. תגיות בתוכו מוצגות כפשוטן, כך ש-<title>A <b>B</b></title> נותן לשונית שכתוב בה "A <b>B</b>". הפניות לתווים כמו & כן עובדות.

איך משנים את כותרת העמוד עם JavaScript?

הציבו ערך ב-document.title, למשל document.title = '(3) Inbox'. הדפדפן מעדכן את הלשונית מיד, וכך אפליקציות ווב מציגות מספר הודעות שלא נקראו.

האם תגית title זהה למאפיין title?

לא. האלמנט <title> נותן שם לעמוד כולו. המאפיין title, שעובד כמעט על כל אלמנט, מוסיף חלונית עזרה (tooltip) שמופיעה כשמרחפים עם העכבר מעל האלמנט.

מושגים קשורים