תיעוד HTML עם דוגמאות להרצה: המאפיין lang

Q: מה לשים במאפיין lang של html?

קוד שפה מתקן BCP 47: en לאנגלית, es לספרדית, fr לצרפתית, ja ליפנית. הוסיפו אזור רק כשזה משנה, כמו ב-en-US, en-GB או pt-BR.

Q: להשתמש ב-lang="en" או ב-lang="en-US"?

שניהם תקינים. en מספיק לרוב העמודים באנגלית. השתמשו ב-en-US או ב-en-GB כשהגרסה האזורית משנה, למשל בכתיב, בתאריכים או בהגייה של מילים מסוימות.

Q: איך מסמנים טקסט בשפה אחרת?

הוסיפו lang לאלמנט שעוטף אותו: bon appétit . קוראי מסך מחליפים את ההגייה בביטוי הזה, ו-CSS יכול לעצב אותו עם :lang(fr).

Q: מה ההבדל בין lang ל-hreflang?

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

הגדרת שפת העמוד

שימו את המאפיין lang על האלמנט <html>, עם הקוד של השפה שבה העמוד כתוב:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

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

קודי שפה

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

קוד	שפה
`en`	אנגלית
`en-US`, `en-GB`	אנגלית כפי שמדברים בארצות הברית, בבריטניה
`es`, `es-MX`	ספרדית, ספרדית כפי שמדברים במקסיקו
`pt-BR`	פורטוגזית כפי שמדברים בברזיל
`fr`, `de`, `it`	צרפתית, גרמנית, איטלקית
`ar`, `he`	ערבית, עברית (מימין לשמאל, ראו בהמשך)
`ja`, `ko`	יפנית, קוריאנית
`zh-Hans`, `zh-Hant`	סינית באותיות מפושטות, מסורתיות

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

דברים ש-lang משנה ושאפשר לראות

רוב ההשפעות של lang נועדו לתוכנה, אבל כמה מהן מופיעות על המסך. המירכאות של האלמנט <q> נקבעות לפי השפה, וכך גם כללי האותיות הגדולות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

כל שורה מקבלת סגנון מירכאות משלה. בעמודה האחרונה, אותו text-transform: uppercase נותן "ISTANBUL" באנגלית ו-"İSTANBUL" בטורקית, כי בטורקית נשארת הנקודה על i גדולה. שנו את ה-lang של השורה הטורקית ל-en והנקודה נעלמת. גם פיצול מילים אוטומטי (hyphens: auto ב-CSS) תלוי ב-lang: הדפדפן צריך לדעת את השפה כדי לדעת איפה מותר לשבור מילים.

סימון ביטויים בשפה אחרת

lang עובד על כל אלמנט, לא רק על <html>. כשעמוד בשפה אחת מצטט ביטוי בשפה אחרת, עטפו את הביטוי ותנו לו קוד משלו. CSS יכול לפנות לשפות עם הסלקטור :lang():

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

קורא מסך עובר להגייה צרפתית ב-"bon appétit" וחוזר לאנגלית אחריו. :lang(fr) מתאים גם ל-fr-CA ולכל גרסה אחרת של צרפתית, והוא מתאים גם לאלמנטים שיורשים את השפה מאב קדמון, מה שסלקטור מאפיין כמו [lang="fr"] היה מפספס.

שפות מימין לשמאל: dir

ערבית, עברית, פרסית ואורדו נכתבות מימין לשמאל. lang קובע את השפה; המאפיין dir קובע את הכיוון. עמוד שלם בערבית משתמש בשניהם על <html>:

<html lang="ar" dir="rtl">

לביטוי קצר מימין לשמאל בתוך עמוד משמאל לימין, שימו את שניהם על האלמנט שעוטף אותו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

ה-blockquote מתיישר לימין והפס הירוק שלו עובר גם הוא לימין, כי border-inline-start הולך לפי הכיוון. שימוש במאפיינים לוגיים כמו margin-inline-start במקום margin-left שומר על פריסה נכונה בשני הכיוונים.

lang מול hreflang

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

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

כל עמוד מתורגם עדיין מגדיר lang משלו על <html>: lang="de" בעמוד הגרמני.

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

להשמיט את lang. הרבה תבניות שוכחות אותו; הגדירו אותו ליד ה-doctype בכל עמוד.
להעתיק lang="en" לעמודים מתורגמים. עמוד בגרמנית שמסומן כאנגלית מוקרא בהגייה אנגלית. התאימו אותו לתוכן.
להשתמש בקוד מדינה כקוד שפה. lang="jp" ו-lang="gr" הם לא יפנית ויוונית; הקודים הם ja ו-el.
להשתמש ב-lang כדי לקבוע כיוון. lang="ar" לבדו לא גורם לטקסט לרוץ מימין לשמאל. הוסיפו dir="rtl".
לכתוב lang="en_US". המפריד הוא מקף: en-US.

שאלות נפוצות

מה עושה המאפיין lang ב-HTML?

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

מה לשים במאפיין lang של html?

קוד שפה מתקן BCP 47: en לאנגלית, es לספרדית, fr לצרפתית, ja ליפנית. הוסיפו אזור רק כשזה משנה, כמו ב-en-US, en-GB או pt-BR.

להשתמש ב-lang="en" או ב-lang="en-US"?

שניהם תקינים. en מספיק לרוב העמודים באנגלית. השתמשו ב-en-US או ב-en-GB כשהגרסה האזורית משנה, למשל בכתיב, בתאריכים או בהגייה של מילים מסוימות.

האם המאפיין lang משפיע על SEO?

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

איך מסמנים טקסט בשפה אחרת?

הוסיפו lang לאלמנט שעוטף אותו: <span lang="fr">bon appétit</span>. קוראי מסך מחליפים את ההגייה בביטוי הזה, ו-CSS יכול לעצב אותו עם :lang(fr).

מה ההבדל בין lang ל-hreflang?

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

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