Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
HTML'de 2023–2026 Arası Gelenler: search, popover, Invoker Commands, Customizable Select ve Ufuktakiler
HTML'de sürüm yok, Baseline tarihi var: 2023–2026 arasında search, inert, exclusive details, popover, requestClose, Invoker Commands, :open ve autocorrect Baseline oldu; ama Angular 22 widely available'ı hedeflediği için bunlardan yalnız search ve inert onun desteklediği her tarayıcıda var. Bu yazıda kronolojiyi, henüz Baseline olmayanları, Interop 2026'yı ve web-features verisiyle Bookstore için bir karar tablosunu çıkarıyoruz.
Accessible Markup Temelleri ve Framework'lerde HTML: Native Önce, Accessibility Tree, Angular Host Element'leri ve Razor
Erişilebilir markup'ın temeli önce native element kullanmak, gizlemek için hidden ya da inert seçmek, pozitif tabindex'ten kaçınmak, lang ve dir'i doğru vermek ve framework'ün ürettiği HTML'i tarayıcıdaki çıktıdan okumaktır. Bu yazıda aria-hidden içindeki odaklanabilir butonu, lang="tr" ile değişen büyük İ'yi, Angular'da ul içinde listitem'sız host element'leri ve aria-invalid üretmeyen Razor Tag Helper'larını ölçüp angular-eslint ve Nu Html Checker'ı CI'a alıyoruz.
Table'lar ve Tabular Data: caption, thead, th scope, colgroup ve Responsive Table
Veri tablosunun adı caption'dan, satır ve sütun ilişkisi th scope'tan gelir; dar ekranda tablo tabindex, role="region" ve adı olan kaydırılabilir bir wrapper'a konur. Bu yazıda Bookstore'un sipariş geçmişini accessibility tree'de okuyor, col'a verilen text-align'ın işlemediğini, headers/id hatasını, WebKit'in düz wrapper'a odak vermediğini ve Angular'da tr yerine host element kullanan satırın tabloyu nasıl boşalttığını ölçüyoruz.
head ve Meta Tag'ler: charset, viewport, title, description, Open Graph, theme-color ve link rel'leri
İyi bir head meta charset ile başlar, zoom'u kapatmayan tek bir viewport, sayfaya özel title ve tek bir description taşır, Open Graph tag'lerini de sunucudan gelen HTML'de verir. Bu yazıda charset'siz sayfanın Türkçe karakterleri bozduğunu, viewport'suz telefonun 980 piksel çizdiğini, JavaScript ile eklenen Open Graph'ı botun görmediğini, color-scheme'i ve Razor layout'ta tekrar eden meta'ları Nu Html Checker ve axe ile ölçüyoruz.
Image ve Media: img, picture, srcset/sizes, video, audio, track ve iframe
Her img'e width ve height yaz, alt'ı görselin sayfadaki işine göre seç, ekran boyutu değişen görselde srcset'i sizes ile ver ve ilk ekrandaki görsele asla loading="lazy" koyma. Bu yazıda bu kuralları Chromium ve WebKit'te ölçüyoruz: boyutsuz görselin 0.14'lük layout shift'i, sizes="auto", picture'da AVIF/WebP/JPEG XL sırası, lazy LCP görselinin yarım saniyelik gecikmesi, track ile altyazı ve iframe title.
Native Interaktif Element'ler 2: select, datalist, Customizable Select ve output/progress/meter
Seçim için select, öneri için datalist kullanılır: datalist listede olmayan değeri de gönderir, required select ise yalnız value="" olan ilk option'ı placeholder sayar. Bu yazıda katalog filtresini, appearance: base-select ile kapak görselli customizable select'i (Chrome 135 ve Safari 27, Firefox yok) ve output/progress/meter'ı Chromium ve WebKit'te ölçüyor, disabled placeholder tuzağını ve submit edilmeyen output'u gösteriyoruz.
Native Interaktif Element'ler 1: details/summary, dialog, popover ve Invoker Commands
Modal, popover ve accordion artık HTML'de var: Invoker Commands (command/commandfor, Baseline 2025-12) ile dialog ve popover tek satır JavaScript yazmadan açılıp kapanıyor, odak ve inert'i tarayıcı yönetiyor. Bu yazıda Bookstore'un "Kitabı sil" onayını, mini sepetini ve SSS accordion'unu Chromium'da ölçüyor; returnValue tuzağını, requestClose()'u, :open'ı ve Safari'de olmayan closedby, popover="hint" ve hidden="until-found"'ı progressive enhancement olarak ele alıyoruz.
HTML Form'ları 2: Native Validation, Constraint Attribute'ları, :user-invalid ve Server ile İş Bölümü
Tarayıcı required, pattern, min/max ve input type kurallarını JavaScript'siz uygular, ama bu doğrulama kullanıcı deneyimi içindir, güvenlik değil; hata stili için :invalid yerine kullanıcı dokunduktan sonra eşleşen :user-invalid kullanılır. Bu yazıda checkout form'unda native mesajların tarayıcı diline bağlı olduğunu, formnovalidate'i, "Şule"yi reddeden pattern'i ve v flag tuzağını, field-sizing ile büyüyen textarea'yı Chromium ve WebKit'te ölçüyoruz.
HTML Form'ları 1: Input Type'ları, label, fieldset, autocomplete ve inputmode
Erişilebilir ve hızlı doldurulan bir form'un temeli her alanda görünen bir label, doğru input type'ı ve spec'teki autocomplete token'larıdır; posta kodu için type="number" baştaki sıfırı kaybeder, type'ı yazılmamış button ise form'u gönderir. Bu yazıda Bookstore'un checkout form'unu fieldset/legend, inputmode, enterkeyhint, autocorrect (Baseline 2026-09) ve form attribute'uyla kuruyor, her davranışı Chromium'da gerçek bir testle ölçüyoruz.
Metin Semantiği: Heading, Paragraph, List, Link, Button ve Inline Element'ler
Kullanıcıyı başka bir adrese götüren şey a, sayfada bir aksiyon yapan şey button'dır; href="#" ve tıklanabilir div klavyeyle ya hiç ya da yarım çalışır. Bu yazıda strong/em ile b/i farkını, dl ile kitap künyesini, time, abbr, code/kbd/samp, blockquote/q/cite ve figure'ı Chromium'un accessibility tree'sinde görüyor, link ile button farkını gerçek bir klavye testiyle ve target="_blank"'in implicit noopener davranışını iki motorda ölçüyoruz.
Semantic HTML ve Landmark'lar: header, nav, main, article, section, aside, footer ve search
Semantic element'ler accessibility tree'de landmark'a dönüşür; ama adsız section region olmaz, article içindeki header banner olmaz ve section içindeki h1 hâlâ birinci seviyedir. Bu yazıda Bookstore'un kitap detay sayfasını div soup'tan semantic yapıya taşıyor, her adımı Chromium'un accessibility tree'sinden okuyor, section/article/div kararını, search element'ini, tek main kuralını ve outline algoritması olmadan heading hiyerarşisini kuruyoruz.
HTML Nasıl Çalışır? Living Standard, Document Yapısı ve Parser'ın Hatayı Affetmesi
HTML'in sürümü yok: WHATWG'nin sürekli güncellenen Living Standard'ı esas, bir özelliği kullanıp kullanamayacağını ise Baseline söyler. Bu yazıda minimum geçerli document'ı, element/attribute/void element/content model kavramlarını ve parser'ın hatalı markup'ı nasıl sessizce düzelttiğini Chromium ve WebKit'te gerçek DOM çıktısıyla görüyor, hataları Nu Html Checker ile yakalıyoruz.