HTML Öğrenme Rehberi: Temellerden Erişilebilirliğe Yol Haritası

Bu rehber neyi kapsar, neyi kapsamaz?

HTML bir işaretleme dilidir: sayfadaki içeriğin yapısını ve anlamını etiketlerle oluşturulan öğeler aracılığıyla tarif eder. Bir paragrafın paragraf, bir listenin liste, bir formun form olduğunu tarayıcıya, arama motorlarına ve ekran okuyuculara HTML söyler. Görünüm (renk, yerleşim, yazı tipi) CSS'in, davranış ise JavaScript'in işidir. Bu seri yalnızca HTML'e odaklanır: öğeler, öznitelikler, formlar, anlamsal yapı, meta veriler, medya ve erişilebilirlik.

Yerleşim ve stil konularına girmiyoruz; bir öğenin görünümünün CSS ile değiştirilebildiğini söylemekle yetiniyoruz. JavaScript tarafını ise yalnızca bir HTML özelliğinin çalışması için gereken en kısa satırlarla gösteriyoruz (örneğin bir <dialog> öğesini showModal() ile açmak). Dili baştan öğrenmek isterseniz JavaScript öğrenme rehberi ayrı bir yol haritası sunar.

HTML neden sürüm numarası taşımaz?

Eskiden HTML 4.01 ya da XHTML 1.0 gibi numaralı sürümler vardı. Bugün HTML'in tanımı WHATWG tarafından sürdürülen HTML Living Standard belgesidir ve bu belge sürekli güncellenir. Yani bir gün çıkan yeni bir sürümü beklemezsiniz; standart küçük adımlarla değişir, tarayıcılar da yeni özellikleri kendi takvimlerinde uygular. Sık duyduğunuz 'HTML5' ifadesi bugün pratikte bu güncel standardı anlatmak için kullanılır.

Bu yaklaşımın somut bir örneğini başlık öğelerinin MDN sayfasında görebilirsiniz: MDN'ye göre Mayıs 2025'ten önce standart, bir <section> ya da <article> içindeki <h1> öğesinin daha küçük yazı boyutuyla gösterilmesini öngörüyordu; bu bağlama bağlı varsayılan stil daha sonra standarttan kaldırıldı. Bu tür değişiklikler sürüm atlamadan gerçekleşir. Yeni eklenen özelliklerin (ör. <search>, closedby, commandfor) özeti HTML Living Standard ve yeni özellikler yazısında. Bu özelliklerde tarayıcı desteği için her zaman MDN uyumluluk tablosuna bakın.

MDN öğe sayfası nasıl okunur?

MDN'deki her HTML öğesi sayfası benzer bir düzen izler: kısa tanım ve etkileşimli örnek, Attributes (öğeye özel öznitelikler; her öğe ayrıca global öznitelikleri de kabul eder), Usage notes (kullanım notları), çoğu sayfada Accessibility (erişilebilirlik), Examples, sonda da Technical summary tablosu, standart bağlantısı ve tarayıcı uyumluluk tablosu. Bir öğeyi doğru kullanıp kullanmadığınızı anlamak için en çok işinize yarayacak bölüm teknik özet tablosudur.

Bu satırları okumayı öğrenmek, ezberlemekten çok daha kalıcıdır. Örneğin <a> öğesinin izin verilen içeriği 'transparent' olarak tanımlanır, ancak içinde etkileşimli içerik, başka bir <a> ya da tabindex taşıyan bir torun bulunamaz. Bu tek satır, bağlantının içine düğme koymanın neden geçersiz olduğunu açıklar. Benzer şekilde <p> yalnızca phrasing içerik alabildiği için bir paragrafın içine <div> ya da liste koyamazsınız.

İçerik kategorilerinin kendisi ayrı bir MDN rehberinde anlatılır. Yedi ana kategori vardır: metadata, flow, sectioning, heading, phrasing, embedded ve interactive. Bunlara ek olarak palpable içerik, script-supporting öğeler ve form ile ilişkili öğeler gibi gruplar ve kategorisi dışarıdan, yani üst öğeden belirlenen 'transparent' içerik modeli bulunur. Bu kategorilerin günlük hatalarla ilişkisini HTML sık yapılan hatalar ve iç içe kuralları yazısında örneklerle inceledik.

Öğrenme yolu: 49 yazı sekiz basamakta

Aşağıdaki sıra bir öneridir; her basamak bir öncekinin kavramlarını kullanır. Bir konuyu zaten biliyorsanız atlayabilirsiniz, ancak formlar ve erişilebilirlik basamaklarını atlamamanızı öneririz, çünkü en çok hata bu alanlarda yapılır.

1. Temeller

• HTML belge yapısı: doctype, head ve body: doctype'ın standart modunu nasıl açtığını, <html>, <head> ve <body> öğelerinin görevlerini ve HTML yorumlarının kurallarını anlatır.
• HTML başlık etiketleri h1-h6: başlık hiyerarsisini, seviye atlamamanın önemini, <hgroup> öğesini ve headingoffset özniteliğini açıklar.
• HTML metin etiketleri: strong, b, i, mark: benzer görünen ama farklı anlam taşıyan satır içi öğeleri ve <br>, <wbr> kullanımını karşılaştırır.
• HTML a etiketi: href ve target: bağlantı türlerini, sayfa içi parça bağlantılarını, mailto: ve tel: adreslerini, target ve download özniteliklerini gösterir.
• HTML listeler: ul, ol, li, dl: sırasız, sıralı ve tanım listelerini, start ve reversed gibi öznitelikleri ve iç içe liste kuralını öğretir.
• HTML semantik etiketler: header, nav, main, footer: sayfa iskeletini oluşturan öğeleri ve bunların ekran okuyuculara hangi bölge (landmark) olarak sunulduğunu anlatır.

2. Metin ve anlam

• article, section ve div farkı: bağımsız içerik, tematik bölüm ve anlamsız kap arasında nasıl seçim yapacağınızı kurallarla gösterir.
• blockquote, q, cite, code ve pre: alıntıları, eser adlarını, kod parçalarını, klavye girdisini ve program çıktısını doğru öğeyle işaretlemeyi öğretir.
• HTML time ve data etiketi: tarih ve saatleri makinenin okuyabileceği datetime biçimiyle yazmayı ve <data> öğesinin value özniteliğini açıklar.
• HTML lang ve dir özniteliği: sayfa dilini Türkçe olarak belirtmeyi, sağdan sola yazılan metni ve <bdi>, <bdo>, translate kullanımını anlatır.
• HTML global öznitelikler: her öğede kullanılabilen id, class, title, style ve diğer global öznitelikleri tek tabloda toplar.
• HTML data-* özniteliği: kendi verinizi öğelere data-* ile eklemeyi, dataset ile okumayı ve bu yöntemin sınırlarını gösterir.
• HTML details ve summary: JavaScript yazmadan açılır kapanır içerik oluşturmayı ve name özniteliğiyle akordeon kurmayı öğretir.

3. Formlar

• HTML form etiketi: action ve method: formun verileri nereye ve nasıl gönderdiğini, enctype, target ve novalidate özniteliklerini açıklar.
• HTML input türleri rehberi: <input> öğesinin tür listesini ve bütün türlerde ortak kullanılan öznitelikleri bir arada sunar.
• label, fieldset ve legend: form alanlarını etiketlemenin iki yolunu ve ilişkili alanları gruplamayı erişilebilirlik açısından anlatır.
• HTML button etiketi: type değerlerini, form gönderimini düğme bazında değiştiren öznitelikleri ve commandfor ile command özniteliklerini gösterir.
• select, option, optgroup ve datalist: açılır listeleri, çoklu seçimi, seçenek gruplarını ve öneri listelerini öğretir.
• HTML textarea: çok satırlı metin alanının rows, cols, wrap ve uzunluk sınırı özniteliklerini açıklar.

4. Form türleri ve doğrulama

• HTML form doğrulama: required ve pattern: tarayıcının yerleşik kısıt doğrulamasını, required, pattern, min/max ve novalidate ile anlatır.
• input date, time ve datetime-local: tarih ve saat alanlarının türlerini ve tarayıcıya gönderilen değerlerin biçimini gösterir.
• input number ve range: sayı ve kaydırıcı alanlarını, step davranışını ve <datalist> ile işaret eklemeyi açıklar.
• checkbox ve radio button: onay kutularını, name ile gruplanan radyo düğmelerini ve gönderilen değerleri öğretir.
• input file ile dosya yükleme: dosya seçme alanını, accept, multiple, capture özniteliklerini ve gereken form kodlamasını anlatır.
• autocomplete ve şifre alanı: tarayıcının otomatik doldurma belirteçlerini ve şifre alanlarında new-password ile one-time-code kullanımını açıklar.

5. Tablolar ve medya

• HTML tablo oluşturma: <table>, satır, hücre ve başlık hücrelerini, <thead>, <tbody> ve <tfoot> gruplarını temelden kurar.
• colspan, rowspan, scope ve caption: birleşik hücreleri, başlık ilişkilerini ve ekran okuyucuların anlayabileceği erişilebilir tabloları anlatır.
• HTML img etiketi: alt metninin nasıl yazılacağını, width/height, loading, decoding ve fetchpriority özniteliklerini açıklar.
• picture ve source etiketi: farklı ekranlara farklı görsel sunmayı ve <source> öğesinin media ile type özniteliklerini gösterir.
• HTML video ve audio: ses ve video yerleştirmeyi, kontrolleri, poster görselini ve <track> ile altyazı eklemeyi öğretir.
• iframe, sandbox ve allow: başka bir sayfayı gömmeyi ve gömülen içeriğin yetkilerini sandbox ile allow üzerinden sınırlamayı anlatır.

6. head, kaynaklar ve betikler

• HTML meta etiketleri: charset, name değerleri, http-equiv, theme-color ve color-scheme gibi meta etiketlerini açıklar.
• HTML link etiketi ve rel değerleri: stil dosyası, ikon, manifest ve alternatif sürüm bağlantılarını rel değerleriyle anlatır.
• preload, preconnect ve prefetch: tarayıcıya kaynakları önceden bağlamasını ya da indirmesini söyleyen ipuçlarını karşılaştırır.
• script etiketi: async, defer, module: betiklerin ne zaman indirilip çalıştırıldığını değiştiren öznitelikleri ve <noscript> öğesini açıklar.
• HTML importmap: JavaScript modüllerinin adlarını adreslere eşleyen içe aktarma haritasını ve scopes alanını gösterir.
• integrity ve crossorigin: dış kaynakların değiştirilmediğini doğrulayan SRI karmalarını ve CORS isteği ayarlarını anlatır.

7. Etkileşim ve klavye

• HTML dialog etiketi: modal ve modal olmayan pencereleri, method="dialog" formlarını ve returnValue değerini öğretir.
• popover ve popovertarget: JavaScript yazmadan açılır katman oluşturmayı ve auto, manual, hint türlerini açıklar.
• template ve slot: sayfada hemen gösterilmeyen şablonları, <slot> yuvalarını ve bildirimsel shadow DOM'u anlatır.
• hidden ve inert: öğeleri gizlemenin ve etkileşim dışı bırakmanın farklarını, hidden="until-found" değerini gösterir.
• progress, meter ve output: ilerleme çubuğu, ölçek göstergesi ve hesap sonucu öğelerini karşılaştırır.
• tabindex ve klavye erişimi: klavyeyle gezinme sırasını, tabindex değerlerinin etkisini, autofocus ve accesskey kullanımını açıklar.

8. Erişilebilirlik, yenilikler ve hatalar

• ARIA nedir: roller ve öznitelikler: ARIA'nın ne zaman gerektiğini, 'önce yerel HTML' kuralını ve rol, durum, özellik kavramlarını anlatır.
• aria-label, aria-labelledby ve aria-describedby: bir öğenin erişilebilir adının nereden geldiğini ve bu üç özniteliğin farkını gösterir.
• web erişilebilirlik ve WCAG temelleri: WCAG'in dört ilkesini, klavye erişimini, canlı bölgeleri ve kısa bir kontrol listesini sunar.
• kullanımdan kalkan HTML etiketleri: <center>, <font>, <marquee> gibi eski öğeleri ve bugün yerlerine ne kullanılacağını listeler.
• HTML Living Standard ve yeni özellikler: sürümsüz standart fikrini ve son dönemde belgelenen yeni öğe ve öznitelikleri tarih vermeden tanıtır.
• HTML sık yapılan hatalar: içerik kategorileri üzerinden geçersiz iç içe kullanımları, tekrar eden id değerlerini ve eksik alt/etiket sorunlarını toplar.

Bu seriyle nasıl çalışmalısınız?

Her yazıdaki örnekleri bir metin düzenleyicide .html uzantılı bir dosyaya kopyalayıp tarayıcıda açarak deneyin. Örnekleri MDN sayfalarındaki izin verilen öznitelik ve içerik kurallarına göre yazdık ve etiket yapılarını bir HTML ayrıştırıcıyla denetledik; yani kapanmamış etiket, boş öğeye yazılmış kapanış etiketi ya da tekrar eden id içermezler. Kendi sayfalarınızda da aynı alışkanlığı edinin: bir öğeyi ilk kez kullanırken MDN sayfasının teknik özetine bakın.

İkinci önerimiz, her konuyu klavyeyle ve mümkünse bir ekran okuyucuyla denemektir. HTML'in gücü, doğru öğe seçildiğinde erişilebilirliğin büyük kısmını ücretsiz vermesidir: bir <button> fare, klavye, dokunma ya da sesli komutla etkinleştirilebilir, bir <label> alan odaklandığında ekran okuyucu tarafından okunur, bir <nav> gezinme bölgesi olarak listelenir. Bir <div> ile aynı davranışı elde etmek için ise ARIA ve JavaScript gerekir. Bu yüzden serinin pek çok yazısında 'önce doğru yerel öğe' ilkesine dönüyoruz.

Üçüncüsü, yeni özelliklerle çalışırken temkinli olun. HTML sürekli gelişen bir standart olduğundan bazı öğe ve öznitelikler her tarayıcıda aynı anda bulunmaz. popover özniteliğinin hint değeri, closedby, commandfor/command, interestfor, <selectedcontent> ve headingoffset gibi özelliklerde yazılarımızda tarayıcı desteği için MDN uyumluluk tablosuna bakmanızı hatırlatıyoruz. Desteklemeyen tarayıcıda sayfanın yine anlamlı kalmasını sağlamak sizin sorumluluğunuzdadır.

Sık Sorulan Sorular

HTML öğrenmek için önce CSS veya JavaScript bilmem gerekir mi?

Hayır. HTML bu üçlünün temelidir ve tek başına öğrenilebilir. CSS ve JavaScript, HTML'in oluşturduğu öğeler üzerinde çalışır; bu yüzden önce öğeleri ve anlamlarını öğrenmek sonraki adımları kolaylaştırır.

HTML5 ile HTML arasında fark var mı?

Günümüzde ayrı bir 'HTML5 sürümü' izlemezsiniz; HTML, WHATWG'nin sürekli güncellenen HTML Living Standard belgesiyle tanımlanır. 'HTML5' ifadesi bu güncel standardı anlatmak için kullanılmaya devam eder. Ayrıntıları Living Standard yazısında bulabilirsiniz.

Bir öğeyi doğru kullanıp kullanmadığımı nasıl anlarım?

MDN'de o öğenin sayfasını açıp teknik özetteki 'Permitted content' ve 'Permitted parents' satırlarını kontrol edin. Ardından öğenin içine koyduğunuz her öğe için aynı kontrolü yapın. Sık karşılaşılan geçersiz kullanımların listesi sık yapılan hatalar yazısında.

Yazıları hangi sırayla okumalıyım?

Yeni başlıyorsanız yukarıdaki sekiz basamağı sırasıyla izleyin. Belirli bir sorunu çözmeye çalışıyorsanız doğrudan ilgili yazıya gidin; her yazı kendi kapsamı dışındaki konular için kardeş yazılara bağlantı verir.

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 ile web sayfası oluşturma · HTML belge yapısı · HTML semantik etiketler · JavaScript öğrenme rehberi