HTML Living Standard Nedir? Yeni HTML Özellikleri Rehberi

Living standard pratikte ne demek?

Sürümsüz bir standardın en somut sonucu, bir kuralın bir gün değişebilmesidir. MDN'nin başlık öğeleri sayfası buna iyi bir örnek verir: Mayıs 2025'ten önce HTML standardı, <section>, <article>, <aside> veya <nav> içindeki bir <h1> öğesinin varsayılan olarak <h2> gibi (daha küçük yazı boyutu ve ayarlanmış kenar boşluğuyla), bir seviye daha içerideyse <h3> gibi görüntülenmesini tanımlıyordu. Bağlama göre değişen bu varsayılan stil sonradan standarttan kaldırıldı. Aynı sayfa, iç içe bölümlerde birden fazla <h1> kullanımının eski standart metinlerinde izinli olduğunu ama hiçbir zaman iyi uygulama sayılmadığını ve artık uygun (conforming) olmadığını da belirtir.

Ters yönde de değişiklik olur: bazı öğeler eskir. MDN <strike> için HTML 4 ve XHTML 1'de kullanımdan kalktığını, HTML Living Standard'da ise eski (obsolete) sayıldığını söyler. Eskiyen öğelerin listesi ve yerlerine ne kullanılacağı kullanımdan kalkan etiketler yazısında. Kısacası HTML bilgisini bir kez öğrenip bırakamazsınız; MDN ve standart, güncel durumun kaynağıdır.

Yeni özellikleri güvenle kullanmanın kuralı: işaretleme onsuz da anlamlı kalsın

MDN'nin yeni özellik sayfalarında tekrar eden bir ilke var: özelliği desteklemeyen tarayıcıda da sayfa çalışmalıdır. headingoffset sayfası, bu özniteliği desteklemeyen tarayıcılarda başlıkların öğe adındaki seviyeyi koruduğunu, bu yüzden işaretlemenin ofset olmadan da anlamlı kalması gerektiğini söyler. <selectedcontent> sayfası, <button> veya <selectedcontent> olmadığında tarayıcının seçili seçeneği göstermek için örtük bir düğme oluşturduğunu belirtir. <search> sayfası da bazı kullanıcılarda JavaScript'in hiç çalışmadığını, çalışanlarda da indirilip çalıştırılana kadar beklendiğini hatırlatır. Yeni bir özelliği eklerken önce "desteklenmezse ne olur" sorusunu yanıtlayın.

<code>&lt;search&gt;</code>: arama ve filtre bölgesi

<search> öğesi, sayfanın arama veya filtreleme yapan form denetimlerini ve ilgili içeriği saran anlamsal bir kapsayıcıdır. Arama sitenin tamamında, yalnızca o sayfada ya da internetin bir bölümünde olabilir. MDN'ye göre <search> bir search yer işareti tanımlar; böylece <form> öğesine role="search" eklemeye gerek kalmaz. Arama sonuçları ise <search> içine değil, sayfanın ana içeriğine yazılır; yalnızca "hızlı arama" önerileri gibi arama özelliğinin parçası olan bağlantılar içeride kalabilir.

<header>
  <h1>Alan adı sorgulama</h1>
  <search>
    <form action="./ara/">
      <label for="alan">Alan adı</label>
      <input type="search" id="alan" name="q" />
      <button type="submit">Sorgula</button>
    </form>
  </search>
</header>

Sayfada birden fazla arama varsa MDN'nin örneğindeki gibi her birine ayırt edici bir ad verebilirsiniz. Sayfa iskeletindeki yeri için semantik etiketler yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>commandfor</code> ve <code>command</code>: betiksiz düğme komutları

commandfor özniteliği bir <button> öğesini komut düğmesine çevirir: değer olarak kontrol edilecek öğenin id değerini alır, yapılacak işi de command özniteliği söyler. MDN'ye göre commandfor, popovertarget özniteliğinin daha genel bir sürümüdür. Tanımlı değerler şunlardır: show-modal (bir <dialog> öğesini modal olarak açar, showModal() yönteminin bildirimsel karşılığı), close (diyaloğu kapatır), request-close (önce cancel olayını tetikleyerek kapatma ister, betik preventDefault() ile kapanmayı engelleyebilir), show-popover, hide-popover ve toggle-popover. İki tire ile başlayan (-- önekli) özel değerler de kullanılabilir; bu durumda kontrol edilen öğeye bir CommandEvent gönderilir.

<button type="button" commandfor="silme-onay" command="show-modal">Hesabı sil</button>

<dialog id="silme-onay">
  <p>Hesabınız kalıcı olarak silinecek. Emin misiniz?</p>
  <button type="button" commandfor="silme-onay" command="close" value="iptal">Vazgeç</button>
  <button type="button" commandfor="silme-onay" command="close" value="sil">Sil</button>
</dialog>

close ve request-close komutlarında düğmenin value değeri diyaloğun returnValue özelliğine aktarılır; yani hangi düğmeyle kapatıldığını betik tarafında okuyabilirsiniz. Ayrıntılar button etiketi yazısında ve dialog etiketi yazısında. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>closedby</code>: diyaloğun nasıl kapanacağını seçmek

<dialog> öğesindeki closedby özniteliği, kullanıcının diyaloğu hangi yollarla kapatabileceğini belirler. MDN üç kapatma yolu ayırır: dışarı tıklayarak "hafif kapatma" (light dismiss), platforma özgü bir eylem (masaüstünde Esc tuşu, mobilde geri hareketi) ve geliştiricinin sağladığı bir mekanizma (bir düğme veya form gönderimi). any üçüne de izin verir, closerequest son ikisine, none yalnızca geliştirici mekanizmasına. Geçerli bir değer yoksa showModal() ile açılan diyalog closerequest, diğerleri none gibi davranır.

<dialog id="bilgi-penceresi" closedby="any">
  <h2>Bakım bildirimi</h2>
  <p>Bu gece 02.00 ile 03.00 arasında kısa bir kesinti olacak.</p>
  <button type="button" commandfor="bilgi-penceresi" command="close">Tamam</button>
</dialog>

Tarayıcı desteği için MDN uyumluluk tablosuna bakın. Diyaloğun open özniteliği, modal ile modal olmayan farkı ve returnValue için dialog yazısına bakın.

<code>popover="hint"</code> ve <code>interestfor</code>

popover global özniteliği bir öğeyi açılır katmana (popover) çevirir. İlk iki değeri şunlardır: auto (dışarı tıklama veya Esc ile hafif kapatılabilir, açıldığında iç içe olmayan diğer auto katmanları kapatır) ve manual (yalnızca açıkça açılıp kapatılır, birden fazlası aynı anda açık kalabilir). Üçüncü değer hintdir: MDN'ye göre hint katmanları açıldıklarında auto katmanları kapatmaz, ama ipucu yığınında atası olmayan diğer hint katmanlarını kapatır; hafif kapatılabilir ve kapatma isteklerine yanıt verir. MDN, bunların genellikle mouseover/mouseout ve focus/blur gibi tıklama dışı olaylarla gösterilip gizlendiğini, bir düğmeye tıklayarak hint açmanın açık bir auto katmanı hafif kapatmaya yol açacağını not eder.

interestfor ise <button> (ve MDN'ye göre <a>, <area>) öğesini bir "ilgi tetikleyicisi" yapar: değer olarak bir hedef öğenin id değerini alır ve kullanıcı tetikleyiciye ilgi gösterdiğinde veya ilgisini kaybettiğinde (örneğin üzerine gelip ayrıldığında ya da odaklayıp odağı kaldırdığında) hedef etkilenir; genellikle gösterilir veya gizlenir. Örnekleri MDN'nin Popover API altındaki "interest invokers" rehberindedir. Popover'ın temel kullanımı, popovertarget ve popovertargetaction için popover yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>&lt;selectedcontent&gt;</code>: özelleştirilebilir select

<selectedcontent> öğesi, <select> içinde o an seçili <option> öğesinin içeriğini, <select> öğesinin ilk çocuğu olan <button> içinde gösterir. Bu yapı MDN'nin "özelleştirilebilir select" (customizable select) dediği yaklaşımın parçasıdır ve <select> öğesinin tüm parçalarını biçimlendirmeyi mümkün kılar. Kurallar katıdır: <selectedcontent>, <button> öğesinin tek çocuğu olmalı, o <button> de <select> öğesinin ilk çocuğu olmalı; <option> öğeleri bu çiftten sonra gelir.

<label for="paket">Paket seçin</label>
<select id="paket" name="paket">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="baslangic">Başlangıç</option>
  <option value="pro">Pro</option>
  <option value="kurumsal">Kurumsal</option>
</select>

MDN iki ayrıntıya dikkat çeker. Birincisi, <selectedcontent> seçili seçeneğin bir kopyasını (cloneNode() ile) taşır ve yalnızca seçim değiştiğinde güncellenir; seçili <option> öğesinin içeriğini sonradan değiştirirseniz kopya kendiliğinden güncellenmez. İkincisi, <select> içindeki <button> varsayılan olarak inert durumdadır, bu yüzden içindeki içerikle etkileşim kurulamaz ve içerik odak alamaz. Görünüm CSS ile değiştirilir. Klasik <select>, <optgroup> ve <datalist> için select, option ve datalist yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>&lt;details&gt;</code> üzerinde <code>name</code>: betiksiz akordeon

Aynı name değerini taşıyan <details> öğeleri bir grup oluşturur ve gruptan aynı anda yalnızca biri açık olabilir; birini açmak diğerini kapatır. MDN bunu betik gerektirmeden akordeon yapmanın yolu olarak anlatır. Gruptaki birden fazla öğeye open verirseniz yalnızca kaynak sırasındaki ilki açık görüntülenir.

<details name="sss" open>
  <summary>Alan adı ne kadar sürede aktif olur?</summary>
  <p>Kayıt tamamlandıktan sonra DNS yayılımına bağlı olarak değişir.</p>
</details>
<details name="sss">
  <summary>SSL sertifikası dahil mi?</summary>
  <p>Paket ayrıntılarında belirtilir.</p>
</details>

Ayrıntılar details ve summary yazısında. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>hidden="until-found"</code>: bulunana kadar gizli

hidden özniteliğinin until-found değeri, öğeyi gizler ama içeriğini tarayıcının "sayfada bul" özelliğine ve parça (fragment) bağlantılarına açık bırakır. Bu yollardan biri gizli içeriğe kaydırma yaptığında tarayıcı MDN'ye göre önce öğede beforematch olayını tetikler, sonra hidden özniteliğini kaldırır, ardından öğeye kaydırır. Normal hidden durumundan farkı şudur: öğe kutu oluşturur, sayfa düzenine katılır; kenar boşluğu, kenarlık ve arka planı görüntülenir. MDN ayrıca gizli öğelere görünür bir öğeden bağlantı verilmemesi gerektiğini, istisnanın tam olarak until-found olduğunu belirtir.

<p><a href="#iade-kosullari">İade koşullarına git</a></p>
<h3>İade koşulları</h3>
<div id="iade-kosullari" hidden="until-found">
  <p>Ürünü teslim aldıktan sonra 14 gün içinde iade edebilirsiniz.</p>
</div>

hidden, inert ve aralarındaki farklar hidden ve inert yazısında. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>headingoffset</code> ve <code>headingreset</code>: başlık seviyesini kaydırmak

headingoffset global özniteliği, içindeki başlık öğelerinin hesaplanan seviyesini öğe adlarını değiştirmeden artırır. Değer 0 ile 8 arasında negatif olmayan bir tam sayıdır. Tarayıcı başlıktan başlayarak atalara doğru yürür ve bulduğu tüm ofsetleri toplar; hesaplanan seviye hiçbir zaman 9'u geçmez. headingreset ise bu yürüyüşü durdurur; diyalog veya başka kaynaktan eklenen içerik gibi çevredeki belge yapısına ait olmayan kısımlarda kullanılır. Öznitelik yalnızca yardımcı teknolojilere sunulan seviyeyi değiştirir: CSS'teki h1 seçicisi eşleşmeye devam eder, rol heading kalır, açık bir aria-level değeri de önceliğini korur.

<h1>Rehberler</h1>
<section headingoffset="1">
  <!-- Ayni bilesen bir seviye derinde: hesaplanan seviye 2 -->
  <article>
    <h1>Yedekleme</h1>
    <p>Yeniden kullanılan bileşen her yerde aynı işaretlemeyi taşır.</p>
  </article>
</section>

Başlık hiyerarşisinin kuralları h1-h6 başlık etiketleri yazısında. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>&lt;geolocation&gt;</code>: konum paylaşma denetimi

<geolocation> öğesi, kullanıcının konumunu sayfayla paylaşması için tarayıcının tanımladığı etkileşimli bir denetim oluşturur. MDN'ye göre izin sürecini tarayıcı yönetir; kullanıcı daha önce reddettiyse düğmeye yeniden basarak kararını güncelleyebilir. Öğe kullanıcının bilinçli seçimini yansıtacak şekilde tasarlanmıştır ve kullanıcıyı farkında olmadan konum vermeye kandırabilecek kullanımları engeller. autolocate özniteliği, izin daha önce verilmişse konumun öğe görüntülenir görüntülenmez alınmasını; watch ise cihaz konumu değiştikçe verinin yeniden alınmasını sağlar. Arka planda Geolocation API kullanılır; performans nedeniyle bir sayfada en fazla üç <geolocation> öğesine izin verilir, sınır aşılırsa hepsinin işlevi devre dışı kalır.

<geolocation watch lang="tr">
  <!-- Desteklenmezse yedek: Geolocation API kullanan normal bir dugme -->
  <button type="button" id="konum-yedek">Konumumu kullan</button>
</geolocation>

Açılış ve kapanış etiketleri arasına yazdığınız içerik, öğe desteklenmediğinde gösterilen yedek içeriktir; MDN bunun için Geolocation API kullanan normal bir <button> önerir. Düğme metninin dili lang özniteliğinden seçilir. Sonuçlara HTMLGeolocationElement arayüzünün position ve error özellikleriyle ulaşılır; bunlar bir JavaScript konusudur (JavaScript öğrenme rehberi). Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>&lt;fencedframe&gt;</code>: gizlilik odaklı gömülü çerçeve

<fencedframe>, başka bir HTML sayfasını geçerli sayfaya gömen ve biçim ile işlev bakımından <iframe> öğesine çok benzeyen bir öğedir. MDN farklarını şöyle sıralar: gömülü içerikle gömen site arasındaki iletişim kısıtlıdır; çapraz site veriye yalnızca gizliliği koruyan, sıkı denetlenen koşullarda erişilebilir; kaynak adresi normal betikle okunamaz veya ayarlanamaz, içerik yalnızca belirli API'lerle gömülebilir; iki taraf birbirinin DOM'una erişemez. width ve height öznitelikleri (varsayılan 300 ve 150 CSS pikseli) ve bir allow özniteliği vardır; kamera veya konum gibi standart izin politikası özellikleri çerçeve içinde kullanılamaz. Günlük sayfalarda gömme ihtiyacı için iframe yazısı daha uygundur. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

Speculation rules: sonraki sayfayı önceden hazırlamak

<script type="speculationrules"> öğesinin gövdesi, tarayıcının hangi kaynakları önceden getireceğini (prefetch) veya önceden işleyeceğini (prerender) belirleyen bir JSON yapısı taşır. Bu, Speculation Rules API'nin parçasıdır. MDN'ye göre bu türdeki bir <script> öğesinde src, async, nomodule, defer, crossorigin, integrity ve referrerpolicy öznitelikleri belirtilmemelidir; içerik geçerli bir JSON nesnesi değilse TypeError oluşur. Kurallar, belgeyi değiştiremediğiniz durumlarda Speculation-Rules HTTP başlığıyla gösterilen bir dosyada da tanımlanabilir.

<script type="speculationrules">
  {
    "prefetch": [
      {
        "urls": ["paketler.html", "iletisim.html"],
        "referrer_policy": "no-referrer"
      }
    ]
  }
</script>

preload, prefetch ve preconnect gibi <link> tabanlı ipuçlarıyla karşılaştırma için preload, preconnect ve prefetch yazısına, <script> türleri için script etiketi yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>&lt;meta name="text-scale"&gt;</code>: sistem yazı boyutuna uymak

text-scale değerli <meta> öğesi, sayfanın kök <html> öğesinin başlangıç yazı boyutunun işletim sistemi ve tarayıcı düzeyindeki metin ölçeği ayarlarıyla orantılı büyüyüp küçülmesini seçmenizi sağlar. content="scale" bu davranışı açar ve mobilde metin otomatik boyutlandırma gibi mevcut tarayıcı sezgilerini devre dışı bırakır; varsayılan legacy değeri ise öğeyi hiç eklememekle aynıdır. MDN uyarır: bu seçeneği açarsanız sayfanızın hedef platformlardaki en yüksek metin ölçeğinde (mobilde genellikle yüzde 200 ile yüzde 300'ün üzeri arası) bozulmadığını test etmelisiniz.

<meta name="text-scale" content="scale" />

Diğer <meta> değerleri için meta etiketleri yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<code>writingsuggestions</code> ve <code>autocorrect</code>: yazma yardımlarını denetlemek

Bazı tarayıcılar düzenlenebilir alanlarda, imlecin ardından gri metin olarak cümleyi tamamlayan yazma önerileri sunar. writingsuggestions global özniteliği bu önerileri bir alanda, bir bölümde ya da tüm sayfada kapatıp açmanızı sağlar; destekleyen tarayıcılarda öneriler varsayılan olarak açıktır, kapatmak için değer false olmalıdır. autocorrect ise yazım ve noktalama hatalarının otomatik düzeltilmesini denetler: on veya boş değer açar, off kapatır. MDN'ye göre password, email ve url türündeki <input> öğeleri otomatik düzeltmeyi desteklemez ve her zaman off durumundadır; bir <form> içindeki denetimler varsayılan değeri formdan devralabilir.

<form action="/destek" method="post" autocorrect="off">
  <label for="sunucu-adi">Sunucu adı</label>
  <input type="text" id="sunucu-adi" name="sunucu-adi" writingsuggestions="false" />

  <label for="mesaj">Mesajınız</label>
  <textarea id="mesaj" name="mesaj" autocorrect="on"></textarea>
</form>

Bu örnekte sunucu adı gibi teknik bir alanda öneri ve düzeltme kapatılırken serbest metin alanında düzeltme açık bırakılıyor. Tarayıcının kayıtlı verileri doldurduğu autocomplete ise farklı bir mekanizmadır (autocomplete yazısı); çok satırlı alan için textarea yazısına bakın. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

Özet tablo

Sık yapılan hatalar

• Yeni bir özelliğin her tarayıcıda çalıştığını varsaymak: MDN uyumluluk tablosuna bakmadan üretimde kullanmayın.
• Desteklenmediğinde sayfayı bozan bir işaretleme kurmak: örneğin başlık hiyerarşisini tamamen headingoffset değerine bırakmak.
• <search> içine arama sonuçlarını koymak: sonuçlar ana içeriğe aittir.
• <selectedcontent> öğesini <button> dışında ya da <button> öğesini <select> öğesinin ilk çocuğu olmayacak şekilde yerleştirmek.
• speculationrules betiğine src veya async gibi izin verilmeyen öznitelikler eklemek.
• "HTML5'te geldi" gibi sürüm ve tarih ifadelerine güvenmek: kaynağınız MDN ve standardın güncel metni olsun.

Sık Sorulan Sorular

HTML6 gelecek mi?

HTML artık numaralı sürümlerle ilerlemiyor; WHATWG HTML Living Standard sürekli güncellenen tek normatif metindir. Yeni özellikler bu belgeye eklenir ve MDN'de belgelenir.

Yeni bir özelliği ne zaman kullanabilirim?

Özellik MDN'de belgelendiyse, MDN uyumluluk tablosu hedef kitlenizin tarayıcılarında desteği gösteriyorsa ve özellik desteklenmediğinde sayfanız kullanılabilir kalıyorsa. Son koşul en önemlisidir.

<code>popovertarget</code> yerine <code>commandfor</code> mu kullanmalıyım?

MDN commandfor özniteliğini popovertarget özniteliğinin daha genel bir sürümü olarak tanımlar; show-popover, hide-popover ve toggle-popover komutları popovertargetaction değerlerinin karşılığıdır. commandfor diyaloglar için de komut sunar. Hangisinin hedef tarayıcılarınızda desteklendiğini uyumluluk tablosundan kontrol edin.

Bu yazıdaki özelliklerin hepsi deneysel mi?

Yerel MDN kopyası deneysel veya sınırlı kullanılabilirlik işaretlerini içermiyor; bu yüzden her özelliğin durumunu canlı MDN sayfasından kontrol etmenizi öneriyoruz.

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 · kullanımdan kalkan etiketler · dialog etiketi · popover özniteliği · select ve datalist · başlık etiketleri