HTML lang ve dir Özniteliği: Sayfa Dili, Yazı Yönü, bdi, bdo ve translate

lang özniteliği: Bir öğenin dili

lang bir global özniteliktir; yani her HTML öğesinde kullanılabilir. MDN onu iki yönlü tanımlar: Düzenlenemeyen öğelerin hangi dilde yazıldığını, düzenlenebilen öğelerde ise kullanıcının hangi dilde yazması gerektiğini belirtir. Değeri tek bir BCP 47 dil etiketidir: tr, en, en-GB, fr, pt-BR, zh-Hans gibi. İlk parça dili, ardından gelen parçalar bölge ya da yazı sistemi gibi ayrıntıları belirtir.

Değerle ilgili iki uç durum vardır. Öznitelik boş verilirse (lang="") dil "bilinmiyor" sayılır. Değer BCP 47'ye göre geçerli bir etiket değilse dil "geçersiz" olarak işaretlenir. Hiçbir yerde dil belirtilmemişse de dil bilinmeyen durumdadır. MDN bu yüzden özniteliğin, özellikle erişilebilirlik açısından, her zaman uygun bir değerle verilmesini önerir.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <title>Hosting paketleri</title>
  </head>
  <body>
    <p>Bu paragraf Türkçe yazılmıştır.</p>
    <p lang="en">This paragraph is written in English.</p>
    <p>Ürün adı: <span lang="en">Cloud Starter</span></p>
  </body>
</html>

Dil nasıl miras alınır?

Bir öğede lang yoksa dilini üst öğesinden alır; üst düğüm bir gölge kök (ShadowRoot) ise dili, o kökün bağlı olduğu öğeden gelir. Bu yüzden dili <html> öğesine bir kez yazmanız, sayfadaki tüm içeriğin o dilde sayılması için yeterlidir; yalnızca farklı dildeki parçalara ayrıca lang eklersiniz. Hiçbir ata öğe dil belirtmiyorsa dil, <meta http-equiv="content-language"> ile ya da HTTP Content-Language başlığıyla da bildirilebilir. Bu ipuçlarından tek bir dil çıkarılamıyorsa varsayılan değer boş dizgedir ve dil bilinmiyor sayılır.

Bir ayrıntı daha: Aynı öğede XML'den gelen xml:lang özniteliği de varsa HTML spesifikasyonu iki değerin büyük-küçük harf farkı gözetmeden eşit olmasını ister ve xml:lang önceliklidir. Sıradan HTML sayfalarında xml:lang kullanmanız gerekmez. CSS tarafında dile göre seçim yapan :lang() sözde sınıfı da bu değerleri kullanır; örneğin :lang(es) hem es-ES hem de es-419 değerlerine uyar.

Erişilebilirlik: WCAG neden lang ister?

MDN, iki WCAG başarı ölçütünü bu öznitelikle ilişkilendirir. 3.1.1, sayfanın dilinin programatik olarak belirlenebilecek şekilde, yani lang özniteliğiyle verilmesini zorunlu kılar. 3.1.2 ise farklı dillerde bölümleri olan sayfalarda o bölümlerin dillerinin de belirtilmesini ister ve bunun için doğru mekanizma yine lang'dır. Bu kuralların asıl amacı, ekran okuyucular gibi yardımcı teknolojilerin metni doğru telaffuzla okuyabilmesidir. Türkçe bir sayfadaki İngilizce bir cümle lang="en" ile işaretlenmezse ekran okuyucu onu Türkçe kurallarla okumaya çalışabilir.

MDN'in kendi dil menüsü buna iyi bir örnektir: Her dil seçeneği kendi dilinde yazılır ve her biri kendi lang değerine sahip bir <bdi> içindedir; "Deutsch" için lang="de", "Français" için lang="fr" gibi. WCAG'ın diğer ilkeleri için web erişilebilirlik ve WCAG temelleri yazısına bakabilirsiniz.

<ul>
  <li><a href="/tr/" lang="tr">Türkçe</a></li>
  <li><a href="/en/" lang="en">English</a></li>
  <li><a href="/de/" lang="de">Deutsch</a></li>
</ul>

dir özniteliği: Temel yazı yönü

dir numaralandırılmış (enumerated) bir global özniteliktir. Öğenin temel yazı yönünü (base direction) belirler ve aynı zamanda içeriğini çevresindeki metinden yön açısından yalıtır. Üç değeri vardır:

• ltr: soldan sağa temel yön.
• rtl: sağdan sola temel yön (Arapça, İbranice gibi diller için).
• auto: Yönü tarayıcı metinden belirler. Genellikle güçlü yönlü ilk karaktere bakılır; bu arada <bdi>, <script>, <style>, <textarea> ve geçerli bir dir değeri olan öğeler atlanır. <textarea> ve <pre> için yön, metnin her paragrafında ayrı ayrı belirlenir.

Öznitelik verilmemişse ya da geçersizse yön genellikle üst öğeden miras alınır ve hiçbir ata yön belirtmiyorsa varsayılan soldan sağadır. MDN önemli bir noktayı vurgular: dir özniteliğini yazmamak otomatik yön algılamayı açmaz; otomatik algılama için açıkça dir="auto" yazmanız gerekir. Mirasın iki istisnası vardır: <bdi> öğesi yönünü, dir="auto" verilmiş gibi içeriğinden belirler; <input type="tel"> ise soldan sağa yönü kullanır.

Temel yön neden gerekli? Latin, Arap ya da İbrani harfleri gibi güçlü yönlü karakterler kendi yönlerini ve aralarındaki nötr karakterlerin yönünü belirler. Ama boşluk ve noktalama gibi nötr karakterler, farklı yönlü metin parçalarının sınırlarında, özellikle başta ve sonda, temel yönü kullanır. Temel yön ayrıca bu parçaların hangi sırayla dizileceğini belirler. MDN'in örneğinde dir="rtl" verilmiş İngilizce bir paragrafın sonundaki nokta, temel yönü aldığı için cümlenin solunda görünür.

MDN, tek yazı sistemi kullanan belgelerde bile <html> öğesine dir verilmesini önerir; bu özellikle sağdan sola diller için önemlidir, çünkü varsayılan soldan sağa yön onlar için yanlıştır. Önemli bir ayrım: lang dili bildirir ama yönü belirtmez. Arapça bir sayfada lang="ar" tek başına sayfayı sağdan sola yapmaz.

<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8">
    <title>صفحة عربية</title>
  </head>
  <body>
    <p>محتوى الصفحة باللغة العربية.</p>
    <p dir="ltr" lang="tr">Bu paragraf Türkçedir.</p>
  </body>
</html>

Yön, CSS'teki direction ve unicode-bidi özellikleriyle de değiştirilebilir. Ancak MDN, yazı yönü içeriğin anlamıyla ilgili olduğu için mümkün olduğunda CSS yerine bu özniteliğin kullanılmasını önerir; böylece CSS devre dışı kaldığında da metin doğru görünür. Öznitelik bazı öğelerde ek etkiler yaratır: dir="rtl" verilen bir görselin title ve alt metinleri sağdan sola biçimlenir; dir="rtl" verilen bir tablonun sütunları sağdan sola dizilir.

Kullanıcı içeriği için dir="auto"

Yorum, kullanıcı adı ya da dış kaynaktan gelen veri gibi yönünü önceden bilmediğiniz metinlerde MDN dir="auto" kullanmayı önerir. Tarayıcı güçlü yönlü ilk karaktere bakarak temel yönü seçer. MDN bunun bir dil algılama değil, bir tahmin yöntemi olduğunu hatırlatır: İngilizce bir adla başlayıp Arapça devam eden bir yorum soldan sağa yön alır. Yönü biliyorsanız açıkça yazmak daha iyidir. Kullanıcının girdiği metnin yönünü form gönderimiyle sunucuya iletmek için dirname özniteliği de vardır; bu konu textarea yazısında anlatılıyor.

<p dir="auto">Hizmetiniz çok hızlı, teşekkürler.</p>
<p dir="auto">هذا التعليق باللغة العربية.</p>

bdi: Yönü bilinmeyen metni yalıtmak

<bdi>, tarayıcının çift yönlü metin algoritmasına (Unicode Bidirectional Algorithm) içindeki metni çevresinden yalıtılmış olarak ele almasını söyler. Yalıtım iki yönlüdür: <bdi> içindeki metnin yönü çevresindeki metni etkilemez, çevresindeki metnin yönü de onu etkilemez. Öğe, özellikle bir sitenin yönünü bilmediği bir metni dinamik olarak eklediği durumlar için yararlıdır. dir verilmezse <bdi> yine dir="auto" verilmiş gibi davranır.

MDN'in örneği bir yarışma sonuç listesidir: "AD - 1st place" biçimindeki satırlarda AD sağdan sola bir metinse, nötr ve zayıf karakterlerden oluşan "- 1" parçası da sağdan sola metnin parçası sayılır ve satır karışık görünür. Adı bir <bdi> içine almak bu sorunu çözer. Yönü önceden biliyorsanız adı dir değeri verilmiş bir <span> içine de alabilirsiniz; bilmiyorsanız, örneğin ad veritabanından ya da kullanıcıdan geliyorsa, <bdi> kullanılmalıdır.

<ul>
  <li><bdi>اَلأَعْشَى</bdi>: 1. sıra</li>
  <li><bdi>Ayşe Demir</bdi>: 2. sıra</li>
</ul>

MDN tercih sırasını da verir. Anlamsal bir öğe uygunsa, örneğin bir kitap adı için <cite>, <bdi> yerine <cite dir="auto"> tercih edilir. Uygun bir anlamsal öğe yoksa ve yönün içerikten çıkarılması isteniyorsa <bdi>, <span dir="auto"> yazımından daha kısadır ve niyeti daha iyi anlatır. Açık bir yön verdiğinizde ise <bdi dir="ltr"> ile <span dir="ltr"> tam olarak eşdeğerdir. Aynı görsel etki CSS'teki unicode-bidi: isolate ile de elde edilebilir, ama MDN bunun anlamsal olmadığını ve tarayıcıların CSS'i yok sayabileceğini belirterek önermez.

Satır içi bir ifadenin yönü çevresinden farklıysa MDN ifadenin tamamını uygun dir değeri verilmiş bir öğeyle sıkıca sarmayı önerir. Bir kitap adındaki ünlem işareti gibi ifadeye ait noktalama da öğenin içinde kalmalıdır; dışarıda kalırsa temel yönü alır ve başlığın yanlış tarafında görünür.

bdo: Yönü zorla değiştirmek

<bdo>, metnin mevcut yönünü geçersiz kılar ve içindeki metni farklı bir yönde çizer. Bu öğede dir zorunludur ve yalnızca ltr ya da rtl değerini alır. <bdo> üzerinde dir, yalnızca temel yönü belirlemekle kalmaz, karakterlerin kendi doğal yönlerini de geçersiz kılar. Karakterler verilen yönde, başlangıç noktasından itibaren dizilir; ama tek tek karakterlerin şekli değişmez, yani harfler ters çizilmez.

<p>Bu metin soldan sağa okunur.</p>
<p><bdo dir="rtl">Bu metin sağdan sola dizilir.</bdo></p>

MDN'in örneğinde <bdo>, İbranice bir cümlenin bilgisayar belleğinde nasıl saklandığını göstermek için kullanılır. Günlük sayfalarda <bdo> ihtiyacı nadirdir; çoğu durumda doğru dir değeri ya da <bdi> yeterlidir.

translate: Çevrilmeyecek metinler

translate, bir öğenin çevrilebilir öznitelik değerlerinin ve metin düğümlerinin sayfa yerelleştirilirken çevrilip çevrilmeyeceğini belirten numaralandırılmış bir global özniteliktir. Boş dizge ya da yes değeri çevrilmesi gerektiğini, no çevrilmemesi gerektiğini belirtir. MDN, tüm tarayıcıların bu özniteliği tanımasa da Google Translate gibi otomatik çeviri sistemlerinin ona uyduğunu ve insan çevirmenlerin kullandığı araçların da dikkate alabileceğini belirtir. Marka adları, ürün kodları ve komutlar bu öznitelik için tipik adaylardır.

<footer>
  <small>© 2026 <span translate="no">Örnek Yazılım</span></small>
</footer>
<p>Kurulum için <code translate="no">npm install</code> komutunu çalıştırın.</p>

Hangi araç ne zaman? Özet

Sık yapılan hatalar

• html öğesinde lang'ı unutmak: Dil bilinmeyen durumda kalır ve WCAG 3.1.1 karşılanmaz.
• Yabancı dildeki parçaları işaretlememek: Türkçe sayfadaki İngilizce bir alıntı ya da ürün adı ekran okuyucuda yanlış telaffuz edilebilir; WCAG 3.1.2 bu parçaların dilinin de belirtilmesini ister.
• lang'ın yönü de ayarlayacağını sanmak: lang="ar" yalnızca dili bildirir; sağdan sola yön için dir="rtl" gerekir.
• dir yazmayınca yönün otomatik algılanacağını düşünmek: Öznitelik yoksa yön üst öğeden miras alınır; otomatik algılama yalnızca dir="auto" ile ya da <bdi> içinde olur.
• Yönü CSS ile vermek: MDN, yön içerikle ilgili olduğu için önce özniteliği önerir.
• Geçersiz dil etiketi yazmak: lang="türkçe" gibi dil adları ya da tr_TR gibi alt çizgili yazımlar BCP 47 etiketi değildir; Türkçe için tr ya da tr-TR yazılır. Geçersiz bir etiket dili "geçersiz" durumuna düşürür.
• Noktalamayı yalıtılan öğenin dışında bırakmak: İfadeye ait noktalama, yönü verilen öğenin içinde kalmalıdır.

Sık Sorulan Sorular

lang="tr" mi lang="tr-TR" mi yazmalıyım?

İkisi de geçerli BCP 47 etiketidir. tr yalnızca dili, tr-TR dil ile bölgeyi birlikte belirtir. Bölgeye özgü bir fark anlatmak istemiyorsanız kısa etiket yeterlidir; MDN örneklerinde de fr, de gibi kısa etiketler kullanılır.

Türkçe bir sitede dir yazmam gerekir mi?

Türkçe soldan sağa yazıldığı ve varsayılan yön de soldan sağa olduğu için zorunlu değildir; ancak MDN tek yazı sistemi kullanan belgelerde bile kök öğede yönün açıkça belirtilmesini önerir. Kullanıcı içeriği gösteriyorsanız o alanlarda dir="auto" ya da <bdi> kullanmayı düşünün.

bdi ile span dir="auto" aynı şey mi?

Etki olarak benzerdir. MDN, uygun bir anlamsal öğe yoksa ve yönün içerikten çıkarılması isteniyorsa <bdi>'nin daha kısa olduğunu ve niyeti daha iyi anlattığını söyler. Açık bir yön değeri verildiğinde ikisi tamamen eşdeğerdir.

translate="no" arama motorlarını da etkiler mi?

MDN bu öznitelik için yalnızca çeviri sistemlerinden ve çevirmen araçlarından söz eder; arama motoru davranışı hakkında bir şey söylemez. Özniteliği çeviri dışı bir amaç için kullanmayın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML belge yapısı · Global öznitelikler · WCAG temelleri · textarea ve dirname · cite ve alıntı etiketleri