HTML etiketleri doğrudan oluşturulup kullanılabilir

• HTML'de tanınmayan etiket adları kullanılsa bile tarayıcı bunları genel öğeler olarak işler
• CSS'te ilgili etiket adı seçici olarak belirtilirse stil verme ve görüntüleme kontrolü mümkündür
• Ad içinde tire (-) kullanmak, gelecekteki HTML standartlarıyla çakışmayı önleyebilir
• <div> veya <span> yerine anlamlı özel etiketler kullanmak kod okunabilirliğini artırır
• Karmaşık iç içe yapılarda bile yalnızca etiket adlarıyla yapıyı anlamak kolaylaşır, bu da bakımı kolaylaştırır

---

Özel HTML etiketlerinin kullanımı

• Tarayıcı, bilinmeyen etiketleri genel blok öğeleri gibi render eder

  • Bu, HTML standardında belirtilen normal davranıştır ve CSS ile stil verilerek görsel olarak kontrol edilebilir
  • Örneğin <cool-thing> gibi bir etiket tanımlanabilir ve CSS'te cool-thing { ... } biçiminde biçimlendirilebilir

• Etiket adında tire (-) bulunursa, bunun gelecekte HTML standardına eklenme olasılığı olmadığı için çakışma riski yoktur

  • Örnek: <main-article>, <quote-body> vb.

Okunabilirlik ve yapı iyileştirmesi

• <div> veya <span> yerine anlamlı ada sahip etiketler kullanmak kodun anlaşılmasını kolaylaştırır
  • Örneğin <div class="article-header"> yerine <article-header> kullanılabilir
• İç içe geçmiş <div> yapılarında kapanış etiketinin yerini anlamak zor olabilir; ancak açık etiket adları kullanılırsa yapı netleşir
  • <main-article> içinde <article-header>, <article-quote> gibi öğeler kullanılırsa DOM yapısını kavramak sezgiselleşir

Örnek kod

• Geleneksel yöntem

  <div class="cool-thing">
    Hello, World!
  </div>
  

• Özel etiket yöntemi

  <cool-thing>
    Hello, World!
  </cool-thing>
  

  • CSS'te cool-thing { display: block; font-weight: bold; text-align: center; ... } biçiminde stil verilebilir

Sonuç

• HTML standardının izin verdiği esnek etiket tanımlama özelliği kullanılarak,
  yüksek okunabilirliğe sahip yapısal işaretleme yazılabilir
• Ancak mevcutta tanımlı anlamlı etiketler varsa, öncelik mevcut etiketlerin kullanımındadır

[GN⁺]

Hacker News yorumları

• <tag-name> ifadesinin tanınmayan bir etiket olmadığını vurguluyor
  Kendi blog yazısını tanıtarak, <tagname> öğesinin WHATWG onu yeni bir öğe olarak ekleyene kadar HTMLUnknownElement olarak işlendiğini, ancak <tag-name> öğesinin düzen ve stilleme açısından kullanışlı, geçerli bir HTMLElement olduğunu açıklıyor
  JavaScript Custom Elements API ile yükseltilirse tanımlı bir custom element haline geliyor
  Bunun tüm tarayıcılarda standart davranış olduğunu ve W3C HTML Validator'ün de tire içeren custom element'leri HTMLElement olarak kabul ettiğini belirtiyor
  Ancak varsayılan UA stylesheet içindeki [hidden]{display:none} kuralı miras alınmadığından bunun ayrıca belirtilmesi gerektiğini söylüyor
  <DIV> öğesinin varsayılan olarak display:block olmasının da UA stylesheet sayesinde olduğunu, bu yüzden custom element'lerde display özelliğinin elle ayarlanması gerektiğini ekliyor
  CSS'teki :defined ve :not(:defined) seçicileriyle tanımlı/tanımsız öğelerin ayırt edilebildiğini belirtiyor
  Declarative Shadow DOM (<template shadowrootmode="open">) da aynı şekilde tanımlanmamış custom element oluşturuyor

  • Chromium açısından bunun UA stylesheet sorunu değil, hidden özelliğinin bir HTML presentation attribute olmasıyla ilgili olduğunu söyleyerek itiraz ediyor
    UA stylesheet'in custom element'lere de aynı şekilde uygulandığını, [hidden] diye bir kural bulunmadığını belirtiyor
    hidden özelliğini align="right" gibi, niteliğin kendisinin stile dönüştürüldüğü bir örnek olarak açıklıyor
  • Tire (-) yerine iki nokta üst üste (:) kullanılabilseydi XML namespace'lerinin daha doğal entegre edilebileceğini söyleyerek hayıflanıyor
    nginx veya apache üzerinde iki nokta üst üste işaretinin tireye dönüştürülmesinin de mümkün olacağını ekliyor
    “1999'a geri dönemeyiz ama” diyerek nostaljik bir tonla bitiriyor
  • Bunun neden varsayılan pratik haline gelmediğini sorguluyor

• Örnek koddaki <div> iç içe yapısının aşırı olduğunu eleştiriyor
  <article>, <header>, <blockquote> gibi semantik etiketler kullanmanın daha uygun olacağını öneriyor

  • Custom etiketlerin, class niteliğinin aksine, yalnızca tek bir ada sahip olabildiğini vurguluyor
    Class'ların birden fazla olabildiğini ve sırasız olduğunu, ancak iç içe custom element'lerin sıra zorunluluğu getirdiğini, bu yüzden aynı ifadeyi kurmanın zorlaştığını belirtiyor
  • Sorunun “div soup” değil, HTML'in yapı ile stili güçlü biçimde bağlayan tasarım kararı olduğunu analiz ediyor
    Bunun 1996 için makul olduğunu ama bugün artık öyle olmadığını değerlendiriyor

• 3-4 yıldır custom element kullandığı deneyimini paylaşıyor
  Fikrin zekice olduğunu ama pratikte zorlayıcı kaldığını söylüyor
  Çok fazla custom etiket kullanılırsa okunabilirliğin düştüğünü ve blok/satır içi ayrımının zorlaştığını belirtiyor
  Dengeli bir yaklaşımla yerleşik etiketleri koruyup, yalnızca <x-card> veya <x-hero> gibi bileşen tipi öğeler için custom etiket kullandığını anlatıyor
  Alt bileşenleri ise <div slot="hero-blurb"> gibi slot niteliği ile ayırdığını söylüyor
  Class'ları yalnızca değişiklik ve özelleştirme amacıyla sınırlayıp, yapıyı slot ile ifade etmeyi tercih ettiğini belirtiyor

  • Dengeli bir web component yaklaşımına çok ilgi duyduğunu söyleyip örnek veya araç seti istiyor
    Kendi yaptığı Good.HTML projesini tanıtarak, autohook, template literal tabanlı interpolation ve düzenli bileşen yapısı sunduğunu açıklıyor
    < !app-header /> gibi self-closing custom element yapısını da yorum düğümü hilesiyle uyguladığını ekliyor
  • CSS'te slot niteliğine göre seçmek için div[slot="hero-blurb"] gibi yazmanın doğru olup olmadığını soruyor
  • Bu desenin BEM'in block-element yapısını hatırlattığını söylüyor

• Varsayılan olarak custom etiketlerin <span> gibi davrandığını belirtiyor
  Gerekirse Custom Element API üzerinden davranış tanımlanabileceğini ekliyor

  • 2014'te custom element'leri yoğun biçimde kullandığını ve React'in baskın hale gelmesine üzüldüğünü söylüyor
    Çoğu kullanıcı için SPA yerine HTML + custom element birleşiminin daha iyi olacağını düşündüğünü belirtiyor
  • Önce semantik öğelerin kullanılması, custom element'lere ise yalnızca gerektiğinde başvurulması gerektiğini söylüyor
    Kendi Hypalink örneğini paylaşarak Web Components'in hak ettiği değeri görmediğini ifade ediyor

• <yes-script> adlı bir custom etiket oluşturarak <noscript> öğesinin tersini yaptığını tanıtıyor
  JS devre dışıysa belirli alanların gizlenebildiğini söylüyor
  Proje bağlantısını paylaşıyor

  • CSS'teki @media (scripting) özelliği kullanılarak yalnızca saf CSS ile de aynı etkinin elde edilebileceğini öneriyor
    MDN belgesi bağlantısını ekliyor

• Geçmişte tarayıcılardan kaldırılan <blink> etiketini kendi başına yeniden oluşturduğu deneyimini paylaşıyor
  Bunu jQuery ve visibility kontrolüyle yaptığını, tarayıcıların rastgele etiketlere izin verdiğini görünce şaşırdığını söylüyor
  Kodun yaklaşık 10 satır olduğu için yayımlamadığını, ama benzer denemelerin çok olduğunu tahmin ettiğini ekliyor

  • Aslında çoğu tarayıcının <blink> özelliğini hiçbir zaman uygulamadığını, yalnızca Firefox ve Opera'nın 2013'e kadar destek verdiğini açıklıyor
  • Flash'ın yok olmasına hâlâ üzüldüğünü söylüyor
  • CSS ile de <blink> efektinin verilebildiğini söyleyerek örnek kod paylaşıyor
    .blink yerine blink seçicisi kullanılırsa doğrudan etikete uygulanacağını belirtiyor
  • <blink> benzeri davranışların basit bir HTML öğesi olarak sunulamayacak kadar fazla anlam taşıyan bir özellik olduğunu, bu yüzden kaldırılmasını memnuniyetle karşıladığını söylüyor

• <main-article>, <article-header> gibi örneklerin aslında gerçek HTML etiketleriyle değiştirilebileceğini belirtiyor
  <article>, <header>, <blockquote> kullanmanın daha uygun olduğunu söylüyor

  • Önceden tanımlı HTML etiketleri kullanıldığında tarayıcının varsayılan stilleme avantajlarının da birlikte geldiğini ekliyor

• Custom etiketlerin varsayılan olarak <span> gibi satır içi render edildiğini, ama CSS ile varsayılan display özelliğinin kolayca atanabileceğini söylüyor
  Geçmişte namespace sorunları yüzünden bundan kaçınıldığını, ancak standartta tire (-) kullanımına izin verilince çakışma riskinin ortadan kalktığını belirtiyor
  CSS seçicilerinde de sorunsuz çalıştığını ve querySelector ile erişilebildiğini ekliyor
  Vue gibi framework'ler olmadan da modern HTML ile yeterince şey ifade edilebildiğini düşündüğünü söylüyor

  • Tire içeren standart dışı öğelerin HTMLUnknownElement değil HTMLElement olarak işlendiğini ekliyor
    Bunun, ileride yükseltme yapıldığında prototype chain'in doğal biçimde genişleyebilmesi için tasarlanmış olduğunu açıklıyor

• Tüm custom element'lere varsayılan stil vermek için şunu kullanmanın yeterli olduğunu söylüyor

  :where(:not(:defined)) {
    display: block;
  }
  

  • Tam da bu yöntemi aradığını söyleyerek hayranlık ve teşekkür ifade ediyor

• Eski IE'nin HTML5 etiketlerini tanımadığı dönemde, bunu 2010 civarında yazdığı bir script ile çözdüğünü hatırlıyor
  JS ile etiketi bir kez oluşturunca IE'nin onu tanıdığını, sonra silinse bile sorun çıkmadığını söylüyor
  Bu sayede rastgele etiketlerin de render edilebildiğini fark ettiğini belirtiyor
  O dönemki blog yazısını da paylaşıyor

  • Bir dönem popüler olan html5shim'in de aynı yöntemle çalıştığını ekliyor