Tüm HTML öğelerini içeren bir blog yazısı

• Web erişilebilirliği üzerine çalışan Patrick Weaver, Eleventy tabanlı kişisel sitesinde 100’den fazla HTML etiketini gerçek bir sayfaya uygulayarak semantik HTML’i denedi
• İlk hedefi, gelecekte yazı yazarken alışık olmadığı öğelerin CSS’i yüzünden takılmamaktı; ancak bu tek yazıyı tamamlaması bir buçuk yıl sürdü
• MDN Web Docs’un HTML öğeleri listesini temel alarak , , , , , gibi yapısal öğeleri yeniden gözden geçirdi
• , , , , , gibi daha az aşina olunan öğeler; yön, telaffuz gösterimi, program çıktısı, satır kırma, etkileşim ve web bileşenleri gibi somut kullanım alanlarını ortaya koyuyor
• Tarayıcı desteği, statik site üretimi, Safari’de video oynatma ve deprecated etiket davranışları gibi konularda, HTML’in anlamı ile gerçek uygulama arasında uyumluluk izleri kalmış durumda

---

Deneyin çıkış noktası ve hedefi

• Web erişilebilirliği hakkında daha fazla şey öğrendikten sonra, yaygın kullanılmayan HTML öğelerini inceleyip kişisel sitesine uygulamaya başladı
• Site Eleventy ile oluşturulmuştu; blog yazısı gövdesini ile sarıyor ve yerleşim şablonuna ekliyordu
• Görsel açıklamaları için ve stillerini zaten düzenlemişti; Recurse ile ilgili footnote veya sidenote uygulamaları da ilgisini çekti
• MDN Web Docs’un HTML öğeleri listesi temel alınarak tüm öğeleri tek bir yazıda kullanmaya karar verdi
  • Amaç, ileride yazı yazarken daha önce kullanmadığı bir öğe yüzünden CSS güncellemesinin gecikmemesiydi
  • Gerçekte ise bu tek yazı için stilleri ve şablonları düzeltmek bir buçuk yıl sürdü
• `` gibi yazı gövdesine doğrudan yerleştirilmesi zor öğeler de var; ancak patrickweaver.net’te bakıldığında sayfanın bir yerinde tüm öğeler kullanılacak şekilde kurgulandı

Belge yapısı ve metadata öğeleri

• `` için ayrı bir değişiklik gerekmedi; ancak lang="en" gibi lang özniteliğinin her zaman hatırlanmadığını fark etti
• `` bu yazıyı yazmadan önce aşina olduğu bir öğe değildi; daha sonra göreli bağlantılarla birlikte yerleşim şablonuna ekledi
  • Yerel geliştirme ve göreli bağlantılarla ilgili birkaç sorun çıktı, ancak kolayca çözüldü
  • , , , , `` zaten aşina olduğu ve sitede bulunan öğelerdi
• `` belgelerini okurken onbeforeprint, onblur gibi özniteliklerle karşılaştı
  • onbeforeprint, daha önce daha dolaylı bir yöntemle ele aldığı bir işlevle ilgiliydi
  • onblurun başlıca kullanım alanı can sıkıcı pop-up’lar gibi görünüyordu

İçerik bölümleri ve başlık hiyerarşisi

• `` öğesinin yalnızca posta adresleri için olduğunu düşünüyordu; e-posta adresleri ve bağlantılar için de kullanılabildiğini öğrendi
• Blog yazısı şablonuna zaten `` uygulamıştı; belgeleri okuduktan sonra bunun sitedeki tüm sayfalara da uyup uymayacağını düşündü
• Footnote alanında `` kullandı
  • `` belgenin ana içeriğiyle dolaylı olarak ilişkili kısımları gösterir
  • İleride sidenote gibi stillendirme olasılığını açık bıraktı
• Site tasarımında aslında `` yoktu, ancak bu yazıya ekledi
• `` yalnızca sayfanın üst kısmında kullanılıyordu; birden fazla kez kullanılabileceğini doğruladıktan sonra her blog yazısının başlık alanına da uyguladı
• Başlık hiyerarşisini de birlikte düzenledi
  • Önceden site adını , bölüm adını , yazı başlığını `` olarak kullanıyordu
  • Belgeleri ve W3C ipuçlarını okuduktan sonra, sayfaya göre `` hedefinin değişeceği şekilde düzenledi ve stilleri sınıflarla ele aldı
  • Bunun HTML ve CSS’in sorumluluk ayrımına daha uygun bir yaklaşım olduğuna karar verdi
• Deneye 2022 başında başladıktan sonra, 2023 yazında yayımlanmadan önce ve MDN belgelerine eklendi
  • bölüm başlığını ve alt başlık öğesini gruplamak için kullanıldı
  • `` arama sonuçlarını değil, arama girişini temsil eden semantik bir öğedir
  • Statik üretilen bir site olduğu için sunucuda arama sonucu üretimi yok; bu nedenle örnek için JavaScript gerekiyor
  • 2023 itibarıyla MDN başlık aramasında ya da google.com’da `` görmedi
• bu keşfi başlatan ilk meraklardan biriydi; MDN listesini okuduktan sonra üst menüye ekledi
• `` öğesini de yazıya koydu; ancak Markdown ve HTML’i karıştırarak yazarken görsel olarak iç içeliği net tutmak zor olduğundan başka yerlerde sık kullanıp kullanmayacağı belirsiz

Metin içeriği öğelerinden gözlemler

• `` öğesini daha önce tweet embed’lerinde kullanmıştı; bu yazıda ise bağımsız alıntı stili ekledi
  • Belgeleri ayrıntılı incelemeden önce öğesinin `cite` özniteliğini ve öğesini bilmiyordu
• , , sonradan öğrendiği öğelerdi; ve ile karşılaştırıldığında öğesinin nispeten daha az bilinmesini tuhaf buldu
  • ve varsayılan margin’e sahipken, içinde margin öğesindedir
• `` aşırı kullanıldığı için modern web’de kötü bir üne sahip; ancak bu sitede başlangıçta az kullanılıyordu
  • Birlikte stillendirmek istediği öğeler ortaya çıkınca yaklaşık 20 adede kadar çıktı
  • Genel anlamda “section”ı çok olmayan sitelerde çok sayıda `` öğesinin gereksiz olabileceğini gösteriyor
• ve Medium’daki yazıları taşırken görsel açıklamalarını semantik olarak ifade etmek için eklediği ilk öğelerdi
  • Belgelere göre `` yalnızca görseller için değil; illüstrasyon, diyagram ve kod parçacıkları için de kullanılabilir
  • Mevcut kod blokları arasında da `` kullanılabilecek birçok yer olduğunu düşünüyor
• `` öğesinin görsel bir yatay çizgi değil, semantik bir ayrım olarak tanımlandığını görünce stilini yeniden inceledi
  • hr:after içine emoji koymuştu; ancak ekran okuyucularda nasıl davrandığının kontrol edilmesi gerekiyor
• ilk kez karşılaştığı bir öğeydi; tarayıcıların bunu fiilen gibi ele almasına rağmen HTML5’e kadar kalması şaşırtıcıydı
• `` belgesi beklediğinden daha az yönerge içeriyordu; uzun olmayan metinlerin “gerçekten paragraf olup olmadığı” sorusunu bıraktı
• `` öğesini yalnızca kod blokları için düşünüyordu; anlamlı boşlukları göstermek için de kullanılabildiğini fark etti

Satır içi metin anlamı öğeleri

• [link](#) kullanımını placeholder gibi görüyordu; oysa gerçekte bu sayfanın en üstüne giden bir bağlantıydı
• `` MDN belgesinde “yazarın kolaylığı için” diye açıklandığından, en az kullanılma olasılığı olan etiket gibi göründü
• ve arasındaki fark, HTML5’te öğesinin öğesinin yerini aldığı yönündeki önceki anlayışından farklıydı
  • Pratik kural olarak çoğunlukla öğesini kelime düzeyinde, öğesini cümle veya ifade düzeyinde kullanacağını belirledi
  • Bu, gerçek ayrımı basitleştiren bir deneyim kuralıdır
• `` çevresindeki metinden farklı yönde olabilecek metinleri ele alan bir öğedir
  • Örnek adlar üzerinden olsa da, rastgele kullanıcı girdisi Unicode metinleri için de uygulanabilir olduğunu düşündü
  • Gelecekte rastgele girdi içerebilecek etiketleri `` ile sarmayı planlıyor
• `` RTL dilleriyle sık çalışmadığı için daha az kullanacak gibi görünüyor; ancak az miktarda RTL metni ele almayı bilmenin yararlı olduğunu düşünüyor
• geçmişte `` gibi kötüye kullanıldığı dönemler olmuştu; CSS güçlendikçe bunun daha az olası olduğunu düşünüyor
  • Belgelerdeki örneğin şiir olması, paragraf ile bağımsız satır arasındaki sınırın nasıl değerlendirildiğini merak ettirdi
  • Bazı durumlarda `` daha uygun olabilir
• ve birçok dilde görünür noktalama işaretleriyle zaten ifade edilen anlamı HTML semantik öğeleriyle yeniden gösterir
  • varsayılan stili italiktir; ise metinde bulunmayan tırnak işaretlerini ekler
• yazının tamamında çok kullanıldı; Google Docs’un Markdown desteğinin kullanıp kullanmadığını merak etti, ancak belge HTML’ine bakınca Google Docs’un şu anda `` olarak render ettiğini gördü
• `` için MDN örneği, ürün adına ürün ID’sini value olarak ekleme biçimindeydi; gerçek kullanım alanını hayal etmekte zorlandı
  • Kullanıcıya gösterilecek bir ID ise göstermek daha iyi; kullanıcıya gösterilmeyecek bir ID ise verinin kimin için olduğu belirsiz
  • `` öğesinin W3C HTML5 specification’da görünmediğini doğruladı
• `` tanımın kendisini değil, tanım içindeki terimi saran öğe olduğu için adını tuhaf buldu
  • Resmen kabul edilmemiş HTML 2.0 önerisinde yer almış gibi göründüğünü not etti
• ve de ve gibi kullanım ölçütlerini düşündürdü
  • Pratik kural olarak çoğunlukla için kelime, için cümle veya ifade kullanmaya karar verdi
  • Belge örnekleri `` öğesini çoğunlukla karışıklığa yol açabilecek ifadelere dikkat çekmek için kullanıyor
• `` klavye tuşlarını belirtmek içindir; ancak “Right click” gibi eylemlere de uyup uymadığı sınırı merak konusu oldu
• `` kullanıcının bir kitapta fosforlu kalemle işaretlemesi gibi, çift yönlü yazarlı web’in bir izi gibi görünüyordu
• , , `` Doğu Asya tipografisinde telaffuz, çeviri ve transliterasyon bilgisi sağlamak için kullanılır
  • `` kaynakta yer alan parantez karakterlerini gizlemek için kullanılır
• `` daha önce doğru olan, ancak artık doğru olmayan veya ilgili olmayan metni gösteren üstü çizili öğedir
  • HTML 4.01’de deprecated olmuş, HTML5’te anlamı yeniden tanımlanmıştır
  • Bazı ekran okuyucular üstü çizili metni bildirmediği için kafa karışıklığı yaratabilir; MDN’nin önerdiği CSS’i siteye ekledi
• program çıktısını göstermek içindir; daha önce ile ele aldığı Raspberry Pi yazısını `` kullanacak şekilde güncelledi
• `` küçük metin render etmek için kullanılır; ancak çoğu durumda CSS kullanmaya devam edeceğini düşünüyor
• belgelerine bakarken veya `` gibi çelişkili stillere neden izin verildiğini ilk kez merak etti
• ve için daha önce CSS uygulaması kullanmış olması muhtemeldi; bunları footnote ve formül örneklerine uyguladı
• `` semantik HTML için yararlı göründüğünden blog yazısı tarihine uyguladı
  • Google arama sonuçlarında da `` kullanılmıyor gibi göründüğünü gözlemledi
• `` MDN’nin “çoğu durumda aslında kullanmak istemeyeceğiniz” diye güçlü biçimde uyardığı bir öğe; önerilen başlıca kullanım alanı yazım hatalarını göstermek gibi görünüyordu
• matematik veya programlama değişkeni dizgelerini semantik olarak gösterir; Pisagor teoremi örneğinde ile birlikte kullandı
• `` uzun kelimeleri, özellikle URL’leri belirli noktalardan satır kırdırma sorununu çözer
  • Uzun URL’ye break point eklemek, ekran genişliğine göre daha okunabilir satır kırmaları sağlar
  • URL’ye tire karakteri eklemek de modern tarayıcılarda net bir break point oluşturur
  • Satır kırması olmayan URL, yerleşimi bozmaması için ayrıca kaydırılabilir bir `` içine sarıldı

Görseller, multimedya ve embed’ler

• ve daha önce image map türü web siteleri yapmış olmasına rağmen aşina olmadığı öğelerdi
  • Günümüzde pek kullanılmadığını gösterir şekilde, `` sınırlarını debug etmeye yarayan araç kullanışsızdı
  • Tab odağı sırasında aynı anda yalnızca bir `` sınırı görünüyordu ve stillendirme çalışmıyordu
  • şekle sahip bir öğesine yakın göründü
• `` HTML5’in temsilî multimedya etiketi olduğu için daha önce kullanmıştı; ancak 2020’lerde beklediğinden daha az görülmesi şaşırtıcıydı
  • Bandcamp oynatıcısı, özel , , kombinasyonundan oluşan bir UI kullanıyor; ancak gizli bir de içeriyor
• `` içinde srcset özniteliğini yeniden inceledi
  • Ekran genişliğine göre üç farklı görsel sunan bir demo hazırladı
  • Tarayıcı önbelleği ve ölçekli görüntüleme davranışı etkilediği için, etkiyi görmek için private window ve ölçeklenmemiş ya da retina olmayan bir ekran gerekebilir
• ve öğeleri `` kadar yaygın kullanılmıyor; çevrimiçi videolar büyük ölçüde YouTube’da merkezîleşmiş görünüyor
  • Ses tarafı, podcast’lerde olduğu gibi tekil dosyalar sunma biçimiyle daha dağıtık
• `` için birkaç kısıt vardı
  • self-closing tag yapıldığında render edilmedi
  • Yazım sırasında Safari, geliştirme sunucusu “Range” request header’ını desteklemediği için videoyu desteklemiyor olabilir
  • GitHub Pages’e yüklenen barındırılmış sürümde Safari oynatmanın çalışıp çalışmayacağını merak etti
  • `` sorununun nedeni, Eleventy build’inde .vtt dosyasının düzgün yapılandırılmamış olmasıydı
• ve için birçok kullanım alanının ve gibi belirli etiketlerle değiştirilmiş olmasına rağmen deprecated olmamaları şaşırtıcıydı
• için “inline frame” gibi 90’lar tarzı bir adın yaşamaya devam ettiğini, öğesinin ise HTML5’te deprecated olduğunu gördü
  • display: inline olarak render edildiğini de doğruladı
• ve farklı durumlarda görsel sürümünü değiştirmek için tasarlanmış öğelerdir
  • Fare/trackpad’de bilgisayar ikonu, dokunmatik ekranda telefon ikonu, ikisi de değilse fallback görsel gösteren bir örnek hazırladı
• `` iPad tarzı bağlantı önizlemesi ve SPA benzeri performans avantajlarıyla ilişkili deneysel bir öğe gibi görünüyordu
  • 2023 itibarıyla hiçbir tarayıcıda varsayılan olarak etkin değil
  • Eskiden Chrome’da deneysel bir flag varmış gibi görünüyor; ancak 2023’te chrome://flags içinde kullanılamıyordu
  • HTML 5 Spec’te yok gibi görünüyor; MDN belgesine neden dahil edildiği belirsiz

SVG, MathML, scripting

• MDN belgelerinin ve öğelerini birlikte gruplaması ilginçti
  • `` Figma ve Sketch gibi araçlar sayesinde kolayca prototiplenip dışa aktarılabildiği için yaygın kullanılıyor
  • `` daha nadir bir öğe gibi görünüyor
• `` doğrudan bir daire çizme örneğinde kullanıldı
• `` MathML namespace’indeki HTML dışı öğeleri saran bir wrapper’a yakın görüldü ve yalnızca basit bir ifade eklendi
• `` için 2020’de Recurse Center’da çizgileri net çizme sorununu derinlemesine incelemişti
  • MDN belgeleri sayesinde tarayıcıya göre değişen `` maksimum boyutları olduğunu yeni öğrendi
  • Modern tarayıcılarda her boyut yaklaşık 32.000 piksel düzeyinde
  • , , ile sahte bir yeniden uyguladı
• `` eski hissettirecek bir öğe olacağını beklemiyordu; ancak yazıyı yazarken pratikte doğrudan çok az kullandığını fark etti
  • JavaScript’in çoğu build araçları tarafından tek bir `` etiketi halinde paketlenip ekleniyor
  • Bu yüzden `` markup etiketinden çok boilerplate gibi hissettiriyor
• `` etkileşimli web sitelerinde yeterince eklemediği bir öğe olduğunu düşündü
  • Özellikle minified/compiled SPA’lerde `` yoksa kullanıcı boş bir sayfa görebilir
  • Bu yazıda tüm etiketleriyle birlikte de koydu

Düzenleme işaretleri, tablolar, formlar ve etkileşim

• ve MDN belgelerini okurken ilk kez karşılaştığı öğelerdi; kelime işlemcilerde kullanılacak türden öğeler gibi göründü
  • Google Docs render’ını da düşündü, ancak yine `` olarak render edildiğini doğruladı
• `` erken web’de yerleşim amacıyla aşırı kullanılmıştı; veri miktarının arttığı günümüz web’inde ise tersine daha nadir kullanılmasını ironik buldu
  • Neden olarak kaba varsayılan tasarımını ve veritabanı tablolarında saklanan veriyi web UI’da başka bir açıdan gösterme amacını gösterdi
  • Yazının kendisi belge tabanlı olduğundan gerçek tablo verisi yok; ancak 2023 Apple emoji set’ine dayanıyor olabilecek emoji verilerini örnek tablo olarak ekledi
  • ve öğelerini daha önce bilmiyordu; özel, `` olmayan tasarımlar yerine bunların sık kullanılıp kullanılmayacağından emin değil
• `` ve ilgili öğeler genellikle gönderim sonrası yeni sayfaya geçilen durumlarda kullanılıyordu; ancak sayfa içi kullanıcı etkileşimleri için de geçerlidir
  • Erişilebilirlik açısından form öğelerinin en önemli öğeler olma ihtimalinin yüksek olduğunu düşündü ve bundan sonra uygulama yaparken belgelere bakmayı planlıyor
• ve “JavaScript olmadan da yapılabilir” örnekleri olarak yaygındır
  • Bu tür aç/kapa UI’lar, geçmişte JavaScript veya jQuery ile ilk yaptığı işlevlerdendi; birkaç HTML etiketiyle kolaylaşması ilginçti
  • Bugün HTML spec’e önerilmiş olsaydı, CSS benzeri bir etkiyle değiştirileceği ve geri çekilebileceğini tahmin etti
• `` yalnızca HTML ile var olduğunu bilmediği bir öğeydi
  • Stil etkisinin ötesinde yararlı olması için JavaScript gerekiyor
  • alert()tan daha özel etkileşimler oluştururken, CSS ile stillendirilebilen basit bir yol sunuyor

Web bileşenleri ve deprecated öğeler

• Web bileşenleri uzun zamandır daha fazla öğrenmesi gerekenler listesindeydi; MDN’nin ilgili bölümünü okumak hoşuna gitti
• Web bileşenlerini render etmek için JavaScript ve Class sözdiziminin gerekmesi şaşırtıcıydı
  • Shadow DOM hakkında daha fazla okuduktan sonra, HTML’de yerleşik stil kapsülleme yöntemi olmadığı için bunu makul buldu
  • Kavramsal olarak `` ile bir ölçüde benzer göründüğünü düşündü
• ve kullanarak yazının içindekiler listesini oluşturmak için web bileşenleri kullandı
  • Frontend framework bileşenlerinde olduğu gibi, alt şablon öğelerinin özniteliği olarak kullanılacak property’leri geçmenin yolunu hızlıca bulamadı
  • Her çocuğa tüm `` öğesini geçirip `
• içinde doğruhref` değerini ayarladı
• Deprecated HTML öğelerini de yazının sonuna ekledi
  • , , , , `` yerleşimle ilgili işlevlerin CSS’e taşındığı örneklerdir
  • ve web bileşenleri spec’inin parçasıydı, ancak tamamen uygulanmadığı için gerçekten uygulayamadı
  • dizin listeleme için web sunucusu tarzı gibi görünüyordu; Eleventy statik sitesinin dizin listesi örneğinde kullandı
• ve yerine kullanılmak üzere tasarlandığından genel gövde metnine doğrudan koymak zordu; yalnızca içinde kullandı
• `` MDN açıklamasında resmi specification’ın parçası olmadığı söylendiği için çalışmayacağını bekliyordu; ancak 2023’te bazı tarayıcılarda çalışıyor gibi görünüyordu
  • Bunun `` ile karışma olasılığına karşı bir fallback olabileceğini düşündü
• `` Firefox 8–84 arasında kısmi desteklenmiş deniyor; ancak yerelde kurduğu eski sürümde bile örneği çalıştıramadı
• gibi bir fallback’e yakın olmasına rağmen deprecated; `` ise spec’te kalıyor, bu şaşırtıcıydı
• öğesinin neden özniteliği yerine ayrı bir öğe olduğu belirsizdi
  • Yazıya başladığında MDN’nin “Embedding Content” bölümündeydi; bitirdiğinde deprecated olmuştu
• `` deprecated öğeler arasında gerçekten çalışmasıyla dikkat çekiyor
  • Olduğu gibi kullanılırsa sayfanın geri kalanı kaynak kod olarak render edildiği için `` ile sardı
• ve kapanış etiketi olduğundan source code veya teletype tarzı monospace metin gösterimi için gövde metninde kullanılabiliyordu
• ve Doğu Asya karakterlerinin telaffuz gösterimi içindi; ancak spec’in sadeleştirilmiş gibi göründüğünü belirtti
• MDN listesinde olmayan `` öğesini de başka HTML etiket listelerini kontrol ederken ekledi
• MDN’nin 2013 tarihli eski listesinde , , , gibi öğeler vardı
  • `` erişilebilirlik gerekçeleriyle bugün çoğu tarayıcı tarafından yok sayılıyor
  • `` modern tarayıcılarda çalışmıyor ve CSS ile ele alınması gereken bir işlev
  • `` daha multimedya odaklı bir web belgesi vizyonunu ima ediyor
  • `` JavaScript’in olmadığı bir dünyadan gelmiş bir öğe gibi görünüyor
• `` öğesinden de söz ediyor, ancak denemiyor
• Footnote için yerel bir HTML uygulaması olmadığını sonradan keşfetti

[GN⁺]

Hacker News yorumları

• Yazar frames (çerçeveler) dönemini hatırlamak için fazla genç gibi :) Sadece Vikipedi maddesine (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)) bağlantı verecektim ama açıklaması pek iyi değil. Web ilk yaygınlaştığında çerçeveler menüler, kenar çubukları, sürekli görünen başlıklar vb. için sık kullanılırdı; üstte sabit bir başlık, solda bir kenar çubuğu, ortada da içerik çerçevesi gibi düzenler yaygındı. Her çerçeve kendi geri/ileri geçmişine sahip olacak kadar bağımsız çalışırdı; bağlantılar varsayılan olarak yalnızca o çerçeveyi değiştirirdi. Bu yüzden geri gitme, ileri gitme ve yenileme sezgisel değildi; yanlış içerik bir çerçeveye yüklenirse baştan yeniden girmek dışında toparlaması zordu. CSS’in çerçevelerin başlıca kullanım alanlarının çoğunu ikame etmiş olması iyi oldu; kullanıcı açısından çerçeveler gerçekten uğraşması acı vericiydi.

  • Hatırladığım çerçeve kullanım alanlarından biri, başka sitelerin dizin siteleriydi. Soldaki kenar çubuğunda çeşitli bağlantılar olur, ilgili site sağdaki çerçevede açılırdı. Tarayıcı sekmelerinin olmadığı dönemde oldukça iyi bir kullanım alanıydı; geçmişte ileri geri gitmekten ya da birden fazla pencere yönetmektense tek pencere içindeki bir çerçevede bağlantı listesini gözden geçirmek daha iyiydi.
  • CSS’in kralı Eric Meyer bile eski CSS referans belgesini hâlâ çerçeveli sayfa olarak tutuyor: https://meyerweb.com/eric/css/references/css1ref.html
  • 90’larda GeoCities’te ilk yaptığım web sitesi de frameset kullanıyordu ve tam olarak yukarıda söylenen düzene sahipti.
  • https://tintara.tripod.com/FramesSuck.html
  • ve artık yalnızca önerilmeyen değil, uzun zamandır kaldırılmış öğeler: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

• Kısaca değiniliyor ama ekranda gizleyip ekran okuyucular için bırakmaya yarayan basit, standart bir CSS bildiriminin hâlâ olmaması bana saçma geliyor. Şimdiye kadar gördüklerim hâlâ clip kullanmak, içeriği sayfanın dışına taşımak ya da benzeri hilelerden ibaret. Bunun neden display için alternatif bir değer ya da ek bir özellik olmadığını bilmiyorum. Bunu çözebilecek speak özelliği teorik CSS modüllerinden birinde ortalıkta dolaşıyordu ama bildiğim kadarıyla uygulama tarafında benimsenmesi neredeyse yok.

  • Bu amaç için ARIA özellikleri kullanılabilir. https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... Örnek kod: https://stackoverflow.com/questions/26032089/in-html-how-can...
  • Görsel sunumu ele alan CSS’te değil, veri·yapı·anlamla ilgilenen HTML tarafında olması gerekmez mi diye düşünüyorum. Uygun bir aria-label eklenmiş boşluk karakteriyle de benzer şekilde yapılabilir mi merak ediyorum.

• Yazarın kafasını karıştırdığı öğesine gelince, **HTML 5.2** 2021’de W3C tarafından emekliye ayrıldı ve yerini WhatWG HTML Living Standard aldı. WhatWG standardı, HTML 5.2’nin aksine öğesini kaldırmadı ve onu “kullanıcının gerçekleştirebileceği ya da etkinleştirebileceği komutları temsil eden li öğelerinden oluşan sırasız liste biçiminde bir araç çubuğu” olarak yeniden tanımladı. Vikipedi’deki öğe listesi ve HTML sürüm bilgisi burada eski kalmış gibi görünüyor; hâlâ yaşıyor. Ancak birkaç kez önerilmemiş olma geçmişi ve son tarayıcıların bile doğru anlamı vermekte kafa karışıklığı yaşamış olması düşünülürse, neredeyse her zaman uygun ARIA rolü (`toolbar`, `menu`, `menubar`) eklenmiş kullanmak daha iyi.

• Bu öğelerin çoğunun yaygın kullanılmamasının nedeni, artık var olmayan sorunları çözmeye yönelik eski girişimler olmaları, yazarın da kabul ettiği gibi CSS ile daha iyi çözülebilmeleri ya da tarayıcı uygulamasına büyük ölçüde bağımlı olmaları. Örneğin ve sürekli güncellenen tüm tarayıcılara geldiğinde umutlanmıştım ama içeriği birden açmak yerine kullanıcıyı yönlendirir gibi kayarak açmak için JavaScript gerekiyordu. Gördüğüm en iyi uygulama WAAPI kullanıyordu; Safari de kendine özgü sözde öğeler bile ekledi.

  • JavaScript olmadan da kayma animasyonu mümkün, ama kapanırken pek hoş görünmüyor; açılırken ise fena değil: https://codepen.io/dada1smo/pen/LYydWBg Kod bana ait değil; css-tricks bağlantısındaki yorumlarda buldum.
  • eskiden biçimlendirme etiketiydi, ancak HTML5’te **küçük puntolu not (fine print)** etiketi oldu.[1] gibi salt biçimlendirme etiketleri uzun zaman önce önerilmez kılındı ve ortadan kalktı. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

• / etiketleri iç içe kullanılabilir. Bir keresinde bunlarla seçimli macera oyunu yapıp şirket intranetine koymuştum. Parçaları birleştiren bir üretim betiği vardı ve gerçek metin yalnızca birkaç sayfa kadardı, ama HTML 5 MB oldu. O gün birçok tarayıcıyı epey bozdu ve sonunda silmek zorunda kaldım.

  • İlginç ama tam anlayamadım. details/summary iç içe kullanımının nasıl 5 MB HTML’e dönüştüğünü ve bunun birçok tarayıcıyı nasıl bozduğunu daha fazla duymak isterim.

• 1995 civarında HTML’i ilk öğrendiğim zamanı hatırlatıyor. Kevin Werbach’ın Barebones Guide to HTML’ini hatırlayan var mı? Neredeyse tüm HTML etiketlerini ve görevlerini listeleyen bir siteydi. O kaynak, bir metin düzenleyici ve erken sürüm Netscape Navigator ile hemen öğrenip denemeler yapabiliyordunuz.

• Birkaç gün önce web’de gezinme yapan bir yapay zeka ajanı oluşturmaya çalışırken Hacker News yorumlarının tablo içinde tablo içinde tablo olarak uygulanmış olduğunu görüp şoke oldum.

  • Bunu öğrenince aksine sevindim. HN’i daha okunabilir yapmak için userContent.css oluşturdum; gövde genişliğini sınırladım, line-height değerini 1.5em yaptım ve tüm paragraflara üstte ek boşluk verdim. Artık geniş tarayıcıda satır başına 250 karakter gösteren HN’i zahmetle okumam gerekmiyor. Her paragraf daha okunur oldu ve paragraf ayrımları da satır aralığından daha belirgin görünüyor.

• Semantik HTML büyük potansiyele sahip. Kişisel olarak gövde dipnotlarını sağ kenar boşluğuna daha küçük ya da yarı saydam bir yazı tipiyle koyan, gerekirse / açılır öğeleri ekleyen stili seviyorum. Ama bu tür bir stili gerçekten uygulamak için her seferinde CSS’i epey ayrıntılı bilmek gerekiyor gibi görünüyor.

• Öncelikle, bu gerçekten harika bir öğrenme yöntemi ve iyi bir alıştırma. Eskiden birden kullanabilir hâle gelip heyecanlandığımız, artık eski kalmış ve kullanılmayan öğelere yazarın bakıp ne işe yaradıklarını tahmin etmesi de eğlenceli. Ancak Mosaic’ten bu yana HTML’in tüm sürümlerini elle yazmış biri olarak, MDN’in description list gibi geriye dönük ad değiştirmesi hoşuma gitmiyor. Özgün spesifikasyondaki definition list daha iyi. Bana dl, dt, dd öğelerini “tanım listesi”, “tanımlanan terim”, “tanım” olarak düşünmek daha doğal geliyor. description, definitiondan daha geniş bir sözcük olsa da, definition list diye bakınca dl içinde terimler (dt) ve tanımlar (dd) olduğunu hatırlamak kolaylaşıyor. W3 de buna definition list diyor: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

• Gerçek dünyada `` noktasına kadar gelinen bir durum gördünüz mü?

  • Evet. İlk teknik işim hiper-yerel bir pazarlama ajansındaydı ve zamanımın çoğunu küçük yerel dükkânların restoran menülerini ve satış bilgilerini güncellemekle geçiriyordum. Restoran menüleri bazen akıl almaz derecede derin hiyerarşilere sahip oluyordu; çünkü birçok restoran çok fazla menü öğesi oluşturmuştu. Mozzarella çubuklarını ve arancini’yi düzgün göstermek için bazen Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy gibi bir hiyerarşi gerekebiliyor.
  • Evet. Spesifikasyonlarda veya başka teknik belgelerde karşımıza çıkıyor. Örneğin HTML spesifikasyonunun[1] kendisi böyle. [1]: https://html.spec.whatwg.org/#link-type-next
  • Sinir bozucu şeylerden biri. Neden 1–6 ile sınırlandırıldığını ve keyfi bir boyut belirtmeye yarayan bir özelliğe izin verilmediğini bilmiyorum.
  • Eski profesörüm ve patronumun yazdığı devasa bir kitabı web sürümüne dönüştürmüştüm; kesinlikle 6 başlık düzeyi kullandık ve belki daha fazlası da gerekiyordu.