Çalıştırılabilir HTML Dokümanları: lang özelliği

Q: html lang özelliğine ne yazmalıyım?

BCP 47 standardından bir dil kodu: Türkçe için tr, İngilizce için en, İspanyolca için es, Japonca için ja. Bölgeyi yalnızca önemli olduğunda ekle, örneğin en-US, en-GB ya da pt-BR.

Q: lang="en" mi kullanmalıyım yoksa lang="en-US" mi?

İkisi de geçerlidir. Çoğu İngilizce sayfa için en yeterlidir. Bölgesel çeşit önemli olduğunda, örneğin yazım, tarihler ya da bazı kelimelerin telaffuzu için, en-US ya da en-GB kullan.

Q: lang özelliği SEO'yu etkiler mi?

Google dili metnin kendisinden algıladığını ve lang özelliğine güvenmediğini söyledi. Yine de onu doğru ayarla: diğer arama motorları, çeviri araçları ve ekran okuyucular onu kullanır. Bir sayfanın çevrilmiş sürümlerini birbirine bağlamak için hreflang linkleri kullan.

Q: Başka dildeki bir metni nasıl işaretlerim?

Çevresindeki elemente lang ekle: bon appétit . Ekran okuyucular o ifade için telaffuzu değiştirir, CSS de ona :lang(fr) ile stil verebilir.

Q: lang ile hreflang arasındaki fark nedir?

lang bir elementin içeriğinin hangi dilde olduğunu söyler. hreflang bir linkin üzerine yazılır ve link verilen sayfanın hangi dilde olduğunu söyler; siteler arama motorlarını bir sayfanın diğer dil sürümlerine böyle yönlendirir.

Sayfanın dilini ayarla

lang özelliğini, sayfanın yazıldığı dilin koduyla birlikte <html> elementine koy:

<!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>

Özelliğin bu paragrafta görünür bir etkisi yoktur, ama sayfanın nasıl ele alındığını değiştirir: bir ekran okuyucu onu İngilizce bir sesle okur, tarayıcı çeviri önerip önermeyeceğine karar verirken onu kullanır, bir yazım denetleyicisi de İngilizce sözlüğü seçmek için onu kullanabilir. O olmadan araçlar tahmin etmek zorunda kalır ve başka bir dile ayarlı bir ekran okuyucu İngilizce metni yanlış telaffuzla okuyabilir.

Dil kodları

Değer, BCP 47 standardından bir dil etiketidir. Çoğu, isteğe bağlı olarak bir bölge ya da yazı sistemi eklenmiş iki harfli bir dil kodudur:

Kod	Dil
`en`	İngilizce
`en-US`, `en-GB`	Amerika Birleşik Devletleri'nde, Birleşik Krallık'ta kullanılan İngilizce
`es`, `es-MX`	İspanyolca, Meksika'da kullanılan İspanyolca
`pt-BR`	Brezilya'da kullanılan Portekizce
`fr`, `de`, `it`	Fransızca, Almanca, İtalyanca
`ar`, `he`	Arapça, İbranice (sağdan sola, aşağıya bak)
`ja`, `ko`	Japonca, Korece
`zh-Hans`, `zh-Hant`	Basitleştirilmiş, geleneksel karakterlerle Çince

Kodlar büyük küçük harfe duyarlı değildir, ama gelenek dilin küçük, bölgenin büyük harfle yazılmasıdır. Bölgeyi yalnızca çeşit önemli olduğunda ekle; en eksiksiz ve doğru bir değerdir.

lang'ın değiştirdiği, görebileceğin şeyler

lang etkilerinin çoğu yazılımlar içindir, ama birkaçı ekranda görünür. <q> elementinden gelen tırnak işaretleri dili izler, büyük küçük harf kuralları da öyle:

<!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>

Her satır kendi tırnak işareti stilini alır. Son sütunda aynı text-transform: uppercase, İngilizcede "ISTANBUL", Türkçede ise "İSTANBUL" verir, çünkü Türkçe büyük i harfinde noktayı korur. Türkçe satırın lang değerini en yap, nokta kaybolur. Otomatik heceleme (CSS'te hyphens: auto) de lang değerine bağlıdır: tarayıcının kelimelerin nereden bölünebileceğini bilmesi için dili bilmesi gerekir.

Başka dildeki ifadeleri işaretle

lang yalnızca <html> üzerinde değil, her elementte çalışır. Bir dildeki bir sayfa başka bir dilden bir ifade alıntıladığında, ifadeyi sar ve ona kendi kodunu ver. CSS dilleri :lang() seçicisiyle hedefleyebilir:

<!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>

Bir ekran okuyucu "bon appétit" için Fransızca telaffuza geçer ve ondan sonra İngilizceye döner. :lang(fr) ayrıca fr-CA ve diğer her Fransızca çeşidiyle eşleşir ve dili bir üst elementten miras alan elementlerle de eşleşir; [lang="fr"] gibi bir özellik seçicisi bunları kaçırır.

Sağdan sola yazılan diller: dir

Arapça, İbranice, Farsça ve Urduca sağdan sola yazılır. lang dili adlandırır; dir özelliği ise yönü belirler. Tamamen Arapça bir sayfa ikisini de <html> üzerinde kullanır:

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

Soldan sağa bir sayfanın içindeki kısa, sağdan sola bir ifade için ikisini de çevresindeki elemente koy:

<!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 sağa hizalanır ve yeşil çubuğu da sağa geçer, çünkü border-inline-start yönü izler. margin-left yerine margin-inline-start gibi mantıksal özellikler kullanmak yerleşimleri iki yönde de doğru tutar.

lang ve hreflang farkı

lang bir elementin içeriğini tarif eder. hreflang bir linkin üzerine yazılır ve gösterdiği sayfayı tarif eder. Çevirileri olan siteler, arama motorları her okuru doğru olana gönderebilsin diye her sürümü <head> içinde listeler:

<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/">

Her çevrilmiş sayfa yine de <html> üzerinde kendi lang değerini ayarlar: Almanca olanda lang="de".

Sık yapılan hatalar

lang özelliğini atlamak. Birçok şablon onu unutur; her sayfada doctype satırının yanında ayarla.
lang="en" değerini çevrilmiş sayfalara kopyalamak. İngilizce olarak işaretlenmiş Almanca bir sayfa İngilizce telaffuzla okunur. İçerikle eşleştir.
Dil yerine ülke kodu kullanmak. lang="jp" ve lang="gr" Japonca ve Yunanca değildir; kodlar ja ve el olur.
Yönü ayarlamak için lang kullanmak. Tek başına lang="ar" metni sağdan sola akıtmaz. dir="rtl" ekle.
lang="en_US" yazmak. Ayırıcı bir tiredir: en-US.

Sıkça Sorulan Sorular

HTML'de lang özelliği ne işe yarar?

Elementin içeriğinin dilini bildirir. Ekran okuyucular doğru sesi ve telaffuzu seçmek için, tarayıcılar çeviri önermek, tırnak işaretlerini seçmek ve heceleme yapmak için, bazı yazım denetleyicileri de sözlük seçmek için onu kullanır.

html lang özelliğine ne yazmalıyım?

BCP 47 standardından bir dil kodu: Türkçe için tr, İngilizce için en, İspanyolca için es, Japonca için ja. Bölgeyi yalnızca önemli olduğunda ekle, örneğin en-US, en-GB ya da pt-BR.

lang="en" mi kullanmalıyım yoksa lang="en-US" mi?

İkisi de geçerlidir. Çoğu İngilizce sayfa için en yeterlidir. Bölgesel çeşit önemli olduğunda, örneğin yazım, tarihler ya da bazı kelimelerin telaffuzu için, en-US ya da en-GB kullan.

lang özelliği SEO'yu etkiler mi?

Google dili metnin kendisinden algıladığını ve lang özelliğine güvenmediğini söyledi. Yine de onu doğru ayarla: diğer arama motorları, çeviri araçları ve ekran okuyucular onu kullanır. Bir sayfanın çevrilmiş sürümlerini birbirine bağlamak için hreflang linkleri kullan.

Başka dildeki bir metni nasıl işaretlerim?

Çevresindeki elemente lang ekle: <span lang="fr">bon appétit</span>. Ekran okuyucular o ifade için telaffuzu değiştirir, CSS de ona :lang(fr) ile stil verebilir.

lang ile hreflang arasındaki fark nedir?

lang bir elementin içeriğinin hangi dilde olduğunu söyler. hreflang bir linkin üzerine yazılır ve link verilen sayfanın hangi dilde olduğunu söyler; siteler arama motorlarını bir sayfanın diğer dil sürümlerine böyle yönlendirir.

İlgili kavramlar