HTML etiketleri doğrudan oluşturulup kullanılabilir

 (maurycyz.com)
3 puan yazan GN⁺ 2025-12-30 | 1 yorum | WhatsApp'ta paylaş
  • 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
  • veya 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 `` 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: , vb.
    Reklam

Okunabilirlik ve yapı iyileştirmesi

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

Örnek kod

  • Geleneksel yöntem 
    
  Hello, World!
  • Özel etiket yöntemi 
    
  Hello, World!
    • 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

İlgili okumalar

1 yorum

 
GN⁺ 2025-12-30
Hacker News yorumları

  • ifadesinin tanınmayan bir etiket olmadığını vurguluyor Kendi [blog yazısını](https://dashed-html.github.io) tanıtarak, öğesinin WHATWG onu yeni bir öğe olarak ekleyene kadar HTMLUnknownElement olarak işlendiğini, ancak öğ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 öğ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 (``) 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 iç içe yapısının aşırı olduğunu eleştiriyor, , 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 veya gibi bileşen tipi öğeler için custom etiket kullandığını anlatıyor Alt bileşenleri ise `` 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 `` 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

  • adlı bir custom etiket oluşturarak öğ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 `` 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 `` ö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 `` efektinin verilebildiğini söyleyerek örnek kod paylaşıyor .blink yerine blink seçicisi kullanılırsa doğrudan etikete uygulanacağını belirtiyor
    • `` 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

  • , gibi örneklerin aslında gerçek HTML etiketleriyle değiştirilebileceğini belirtiyor , , `` 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 `` 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