Kısım II · İnşaat · Bölüm 23

HTML ve DOM: Belgenin iskeleti

Belgenin anlamından bellekteki ağaca (HTML and the DOM)

1. Kat 10Bizim uygulamamızSorular, puan, günlük seri ve can kuralları.
2. Kat 9Web ve tarayıcıHTML belgeyi, CSS sunumu, JavaScript davranışı kurar; bu bölümün çalışma alanı.
3. Kat 7–8İşletim sistemi ve ağDosyaları, süreçleri ve veri alışverişini sağlar; belge bunların üstünde çalışır.
4. Kat 0–6Bitten işlemciye, belleğe ve dillereÖnceki bölümlerde kurduğumuz temel. Tam kat planı.

Bölümün sonunda bir soru kartının kaynak HTML’ini, canlı DOM’unu ve görüntüsünü ayırabileceksin. Etiketleri zaten kullanıyor olman iyi bir başlangıç; burada her etiketin hangi işi tarayıcıya devrettiğini okuyacağız.

23.1 İşaretleme dili: etiket, öğe, nitelik

Bir soru kartında aynı anda farklı türden şeyler görürsün: bölümün adı, soru metni, seçenekler ve bir gönderme düğmesi. Hepsi ekranda yazı olsa da aynı işi yapmaz. Tarayıcıya yalnızca kelimeleri verirsen, hangisinin başlık, hangisinin kullanıcıdan cevap alan denetim olduğunu söylemiş olmazsın. İşaretleme dili (markup language) bu ayrımı metnin içine yerleştirir. HTML, HyperText Markup Language adının kısaltmasıdır: içeriğin yapısını öğelerle tarif eder. Bölüm 21.5'teki bildirimsel yaklaşımın somut karşılığı budur; işlemciye çizim komutlarını sıralamazsın, tarayıcıya belgenin ne olduğunu söylersin.¹

<h1>Hukuka Giriş</h1>
<p class="soru-metni">Bu alıştırmanın konusu nedir?</p>

İlk satır, içindeki yazıyı birinci düzey başlık olarak işaretler. İkinci satır bir paragraf kurar. <p> bir etiket (tag), yani işaretleme sınırını gösteren yazımdır. Açılış etiketi, içerik ve </p> kapanış etiketinin oluşturduğu bütüne öğe (element) denir. Etiket ile öğe aynı şey değildir: etiket dosyadaki işaret, öğe onun tarif ettiği yapısal parçadır. Bu ayrım birazdan DOM'u okurken işe yarayacak.¹

class="soru-metni", öğeye ek bilgi veren bir niteliktir (attribute). Nitelik adı class, değeri soru-metni; eşittir işareti burada bir JavaScript ataması değil, HTML niteliğinin yazımının parçasıdır. Sınıf adı, birden çok öğeye ortak bir etiket takmamızı sağlar. Buna karşılık id="soru-basligi", belge içinde tek bir öğeyi tanımlamak için kullanacağımız kimliktir. Bölüm 24'te bunlarla görünüm seçilecek; Bölüm 26'da JavaScript aynı öğeleri bulacak. Sınıf adına bakarak tarayıcı bir puan kuralı çıkarmaz: adlandırmayı ve bağlantıyı biz tasarlarız.¹

İç içelik, süs değil yapıdır

<p>Kalan can: <strong>3</strong></p>

Bu tek satırda önce paragraf açılır, onun içinde önem vurgusu taşıyan strong açılır; önce içteki, sonra dıştaki kapanır. Sonradan açtığını önce kapatman, yapıyı bir ağaç olarak kurabilmenin şartıdır. <p>…<strong>3</p></strong> yazarsan sınırlar çaprazlaşır. Tarayıcı bazı hataları toparlayabilir; fakat bunun sonucu, kafandaki ağaçla aynı olmak zorunda değildir. İyi görünen bir sayfa, kaynak HTML'in doğru kurulduğunu tek başına kanıtlamaz.¹⁶

Her öğe bu açılış–içerik–kapanış biçimini kullanmaz. meta ve input gibi içeriksiz öğeler (void elements) çocuk içerik almaz ve kapanış etiketleri yoktur. Bir girdinin adını <input>Adın</input> içine koymayız; ad için birazdan label kullanacağız. Buna karşılık script, dış dosyaya işaret etse bile içeriksiz öğe değildir; kapanış etiketi gerekir.¹²

23.2 Belge yapısı: doctype, head, body, meta

Bir HTML dosyasını, paragrafların serbestçe yan yana durduğu bir not değil, başı ve gövdesi olan bir belge olarak düşün. Aşağıdaki küçük dosya, ayrı HTML/CSS/JS dosyaları kullanan prototip için bir başlangıç örneğidir. Senin gerçek dosyanı görmedik; dosya adları ve içerik burada öğretim amacıyla seçildi.¹²

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hukuka Giriş · Alıştırma</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>Hukuka Giriş</h1>
    <p>İlk alıştırmana hoş geldin.</p>
  </main>
</body>
</html>

Bu tablodaki belge yapısı MDN'in HTML ve üst veri derslerine, mobil görünüm alanı açıklaması web.dev'in duyarlı tasarım girişine dayanır. Dış klasik betikte defer dosyanın ancak en sonda indirileceği anlamına gelmez: belge okunurken yüklenebilir, çalışması ayrıştırma sonrasına bırakılır. defer sözcüğünün yanına ="true" yazmamamızın nedeni onun Boole niteliği olmasıdır; varlığı önemlidir.¹²⁸

style.css ve script.js yollarını görünce Bölüm 16'ya dön: bunlar göreli yollardır. Bu örnekte HTML ile aynı klasördeki kaynaklara giderler. Dosyalar uzaktaki bir siteden geliyorsa tarayıcı bunları belge URL'sine göre çözer. Aynı klasörde duran iki dosya kendiliğinden birbirine bağlanmaz; bağlantıyı HTML'deki bu satırlar kurar. Dosyaları ayırmanın tasarım gerekçelerini Bölüm 27'ye bırakıyoruz.²

23.3 Anlamsal HTML ve erişilebilirlik

Anlamsal HTML (semantic HTML), öğeyi görünüşüne değil, taşıdığı anlama göre seçmektir. Bir metnin büyük görünmesini istemek başka, onun bölüm başlığı olduğunu söylemek başkadır. h1 başlık, p paragraf, nav gezinme, main ana içerik anlamı taşır. div ise özel bir anlam eklemeyen genel kapsayıcıdır. Gerektiğinde kullanılır; fakat her şeyi div yapmak, metindeki başlık ve paragraf farkını yalnızca görsel ipuçlarına bırakır.³

Erişilebilirlik (accessibility, a11y), farklı yeteneklere ve kullanım biçimlerine sahip insanların içeriğe ve işlevlere erişebilmesini gözetmektir. Ekran okuyucu kullanan biri, başlıklar arasında dolaşarak belgenin haritasını çıkarabilir. Yalnızca klavyeyle çalışan biri, düğmelere ulaşıp onları etkinleştirebilmelidir. Bu yüzden anlamsal seçim, görünümden bağımsız bir kullanım sözleşmesidir. CSS kaldırıldığında da başlığın başlık, düğmenin düğme kalması değerlidir.³

<button type="button">Sonraki soru</button>

Bu tek satırın her parçası iş yapar: button bir eylem denetimi kurar; type="button" onun bu örnekte form gönderme düğmesi olmadığını belirtir; içindeki yazı kullanıcıya eylemi adlandırır; kapanış etiketi öğeyi bitirir. Düğme, klavyeyle odaklanma ve etkinleştirilme gibi yerleşik davranışlar taşır. Aynı görünümü bir div'e verip fare tıklaması eklemek, bu davranışların hepsini kendiliğinden kazandırmaz. Hazır bir merdiven yerine boyalı bir merdiven resmi koymak gibi: benziyor, ama çıkılmıyor.³⁴

Bu seçimler erişilebilirliğin tamamını çözmez. Başlık sırası, açıklayıcı bağlantı metni, odak görünürlüğü, okunaklı renkler ve hata mesajları da önemlidir. Buradaki ilk ilke, tarayıcının ve yardımcı teknolojilerin zaten anladığı yapıyı kullanmak. Soru doğruysa yalnızca yeşile boyamak yerine yazıyla da “Doğru cevap” demeyi örneğimizin tasarım şartı yapacağız; görünüm ayrıntıları Bölüm 24'te, etkileşim Bölüm 26'da gelecek.³

23.4 Formlar ve girdiler

Bir soru kartının cevabı, yalnızca ekrana konan yazı değildir; kullanıcıdan yapılandırılmış girdi alınır. Form (form), bu girdileri bir arada düzenler ve gönderme davranışı sağlar. Girdi (input) öğesinin type niteliği, istenen denetim biçimini belirler: metin, e-posta, tek seçim gibi. Çoktan seçmeli soruda aynı gruptan yalnızca bir cevap istiyorsak tek seçim düğmeleri, yani radio girdileri uygun bir başlangıçtır.⁴⁵

<form id="cevap-formu">
  <fieldset>
    <legend>Bu örnekte “kural” etiketini hangi şıkla eşleştiriyoruz?</legend>
    <input type="radio" id="sik-a" name="cevap" value="0" required>
    <label for="sik-a">Genel ifade</label>
    <input type="radio" id="sik-b" name="cevap" value="1">
    <label for="sik-b">Tekil olay</label>
  </fieldset>
  <button type="submit">Cevabı kontrol et</button>
</form>

Bu, hukuk bilgisi ölçen gerçek bir soru değil, bir yazılım örneğinin yapay verisidir; bu örnekte ilk şıkkı doğru kabul edeceğiz. İlk satır formu açar ve JavaScript'in daha sonra bulacağı kimliği koyar. fieldset denetimleri bir gruba toplar; legend grubun açıklamasıdır. İlk input tek seçim denetimi açar; id bu denetimin kimliğidir. Hemen sonraki label'ın for değeri bu kimlikle aynı olduğu için yazı o denetime bağlanır. Etikete tıklamak da ilgili seçeneği seçebilir; ekran okuyucu da denetimin adını bu bağdan alır.⁴⁵

İki girdide de name="cevap" yazması, bunların aynı tek seçim grubuna ait olduğunu söyler. Farklı id değerleri ise etiketlerin hangi girdiye ait olduğunu ayırır. value="0" ve value="1" kullanıcıya gösterilen açıklamalar değil, programın alacağı değerlerdir. Seçili girdinin adı ve değeri, form verisindeki çifti oluşturur. Seçim yoksa o grubun değeri gönderilecek veride bulunmaz. Birbirinin yerine id, name ve value yazmak bu yüzden çözüm değildir.⁵

required bu grupta bir seçim yapılmasını ister; bütün şıkların aynı anda seçilmesini istemez. Burada da Boole niteliğinin varlığı önemlidir: required="false" yazmak gerekliliği kaldırmaz. button type="submit" formun gönderme girişimini başlatır. Grup ve form kapanışları, denetimlerin hangi formun içinde kaldığını tamamlar. Tarayıcı seçimi ve bu tür yerleşik doğrulamayı JavaScript yazmadan da yönetebilir; fakat hangi cevabın doğru olduğunu, kaç puan verileceğini HTML'den kendiliğinden öğrenmez.¹⁵

Göndermek ile değerlendirmek ayrı işlerdir

Formun action niteliği gönderme adresini, method ise HTTP yöntemini belirleyebilir. Bu örnekte ayrı bir sunucu adresi vermiyoruz; yerel etkileşim için Bölüm 26.2'de gönderme olayını karşılayıp varsayılan gönderme davranışını durduracağız. Şimdilik örnekteki düğmeye basmanın puanı hesaplamasını bekleme. Henüz tarif ettiğimiz şey, cevabın nasıl alınacağı; doğru–yanlış kuralı değil.⁴

23.5 DOM: HTML'in bellekteki ağaç hali

Şimdi dosyadan çalışan tarayıcıya geçelim. HTML, diskte ya da HTTP yanıtında duran kaynak metindir. Tarayıcı onu ayrıştırınca bellekte bir belge modeli kurar. Belge Nesne Modeli (DOM, Document Object Model), belgenin programlar tarafından okunup değiştirilebilen temsilidir. Bir düğüm (node), bu modelin bir parçasıdır; öğe düğümü, metin düğümü, yorum düğümü gibi farklı düğümler vardır. Her düğüm bir HTML etiketi değildir.⁶⁷

<p id="puan">Puan: <strong>10</strong></p>

p öğesi (id="puan")
├── metin düğümü: "Puan: "
└── strong öğesi
    └── metin düğümü: "10"

İlk satır dosyadaki HTML'dir; altındaki çizim, yalnızca o parçanın sadeleştirilmiş DOM ağacıdır. p, iki çocuk düğümün ebeveynidir: bir metin düğümü ve strong öğesi. strong'un kendi metin çocuğu vardır. id bu çizimde ayrı bir çocuk kutu değil, öğenin niteliğidir. Bölüm 11'deki ağaç fikri artık tarayıcının çalışma verisi oldu: belge bütünü, parçalar ve bunların ilişkileri.⁶⁷

Ağaç temsilinin yararı şudur: program, HTML dosyasını baştan sona bir karakter yığını olarak yeniden aramak yerine “şu kimliğe sahip öğeyi bul, onun metnini değiştir” diyebilir. DOM, JavaScript dilinin kendisi değildir; tarayıcının sunduğu bir API'dir, yani programların kullanacağı işlemler ve nesneler sözleşmesidir. JavaScript'te toplama yapmak için belgeye gerek yoktur. Bir sayfanın başlığını değiştirmek için ise o belgeyi temsil eden bu katmana uzanırsın.⁶

Kaynak, canlı model ve görüntü: üç farklı şey

Tarayıcı eksik ya da hatalı işaretlemeyi belirli kurallarla toparladığı için DOM kaynakla birebir aynı görünmeyebilir. Örneğin kaynakta belirtilmeyen bir tbody, tablo ayrıştırılırken modele eklenebilir. Satır sonları ve bazı boşluklar da metin düğümleri oluşturur; bu bölümün çizimlerinde ilgisiz boşluk düğümlerini göstermiyoruz. Bu sebeple “kaynakta bu satır yok ama denetleyicide var” gözlemi tek başına gizem değildir: önce ayrıştırmanın, sonra çalışan JavaScript'in etkisini ayır.⁷

Modeli değiştirmek, kaynak dosyasını diskte düzenlemek değildir. Bir prototipte puan metninin 10'dan 20'ye çıkması, index.html dosyanın kaydedildiğini göstermez. Sayfayı yeniden açtığında başlangıç kaynağı yeniden okunur; değişikliği ayrıca saklamak gerekecek. Kalıcılıkla canlı bellek arasındaki eski ayrım, burada da karşımıza çıkar. Saklamayı Bölüm 26.4'te işleyeceğiz.⁶

23.6 Kerem'in prototipinin HTML'ini birlikte okumak

Senin prototipinin dosyası elimizde olmadığı için “sen burada bunu yazmışsın” diyemeyiz. Bunun yerine aşağıdaki temsilî soru kartını birlikte okuyalım. Sonra aynı okuma sırasını kendi index.html dosyana taşıyabilirsin. Kartın anlamı, girdisi ve görünüm için bıraktığı adlar bilinçli olarak ayrılıyor; bu örnek, önceki alt bölümlerdeki öğe ve form davranışlarını kullanıyor.¹³⁵

<main class="calisma">
  <h1>Hukuka Giriş</h1>
  <p class="istatistikler">
    Puan: <span id="puan">0</span>
    · Günlük seri: <span id="seri">7</span>
    · Can: <span id="can">3</span>
  </p>
  <section class="soru-karti" aria-labelledby="soru-basligi">
    <h2 id="soru-basligi">Soru 1</h2>
    <form id="cevap-formu">
      <fieldset>
        <legend id="soru-metni">Bu örnekte “kural” etiketi hangi şıkla eşleşiyor?</legend>
        <div class="siklar">
          <label class="sik">
            <input type="radio" name="cevap" value="0" required>
            Genel ifade
          </label>
          <label class="sik">
            <input type="radio" name="cevap" value="1">
            Tekil olay
          </label>
        </div>
      </fieldset>
      <button type="submit">Cevabı kontrol et</button>
    </form>
    <p id="sonuc" role="status"></p>
  </section>
</main>

1. Ana içeriği bul: ilk satır main açar ve görünüm grubuna calisma adını verir; ikinci satır sayfanın başlığıdır. h1'i büyük çizdirmek CSS'in işi, başlık olduğunu söylemek HTML'in işidir.
2. Verinin konacağı yerleri ayır: p, istatistik cümlesini açar. Sonraki üç satırdaki span'ler, puan, günlük seri ve can için ayrı kimliklerdir. Örneğin 7, burada verilmiş bir başlangıç değeridir; her doğru cevapta artan bir sayaç değil, günlük seri göstergesidir. Gerçek seri kuralını bu örnek hesaplamaz.
3. Kart sınırını oku: section ilişkili içeriği toplar. aria-labelledby içindeki kimlik, bu alanın adının bir sonraki h2'den alınmasını ister. Bu, yerleşik öğe anlamını tamamlayan erişilebilir adlandırmadır; rastgele CSS sınıfı değildir.
4. Girdi grubunu izle: form cevabın sınırını, fieldset ve legend seçeneklerin ortak sorusunu kurar. div class="siklar" yalnızca CSS'in iki şıkkı birlikte düzenleyebilmesi için genel bir kaptır; soru anlamını legend taşır.
5. Etiketleme biçimini tanı: burada her input kendi label'ının içindedir. Bu da girdiyi etiketiyle bağlamanın bir yoludur; önceki örnekteki ayrı for/id çiftine bu biçimde ihtiyaç yoktur. İki label kapanışı iki şıkkı ayırır.
6. Eylem ve çıktı yerini bul: gönderme düğmesi formun içindedir; ardından form kapanır. sonuc paragrafı, sonradan yazılacak geri bildirimin yeridir. role="status", bu alanı durum bildirimi olarak tanımlar; JavaScript'in metni değiştirebilmesi için ayrıca id verilmiştir. Son kapanışlar kartı ve ana içeriği tamamlar.

Bu okuma, MDN'in anlamsal yapı ve form etiketleme açıklamalarının kendi örneğimize uygulanmasıdır. Durum bildirimini otomatik duyurma davranışı için kullanılan status rolü MDN'in ilgili rol belgesinde tanımlanır. Yardımcı teknolojilerde gerçek kullanım denemesi yine gereklidir; yalnızca bir nitelik ekledik diye bütün erişilebilirliği doğrulamış sayılmayız.³⁴⁹

Bu bölümde neler kuruldu

HTML anlamlı öğeler ve niteliklerle belgeyi tarif eder; head belge hakkındaki bilgileri, body içeriği taşır. Anlamsal seçimler ve doğru form etiketleri, kullanıcı girdisinin yapısını ve erişilebilirliğin zeminini kurar. Tarayıcı bu kaynağı bellekte düğümlerden oluşan DOM’a çevirir; kaynak metin, canlı model ve ekran görüntüsü aynı şey değildir.

Terimler sözlükte, Bölüm 23 başlığı altında. İkinci anlatım için CS50’nin yazılı Hafta 8 notlarındaki ilgili HTML/CSS/JavaScript bölümleri de bu iş bölümünü örnekler.¹⁰

Kaynaklar

1. MDN · Basic HTML syntax.
2. MDN · Webpage metadata.
3. MDN · HTML: A good basis for accessibility.
4. MDN · Your first form.
5. MDN · input type="radio".
6. MDN · Introduction to the DOM.
7. javascript.info · DOM tree.
8. web.dev · Introduction to responsive design.
9. MDN · ARIA: status role.
10. CS50 · Lecture 8 notes, HTML ve JavaScript başlıkları.