HTML listelerini doğru şekilde iç içe yerleştirmek için her alt listeyi, ait olduğu liste öğesinin içine ve bu öğenin kapanış etiketinden önce yerleştirin. Bu kılavuzda, Mac’te TextEdit ve Safari kullanarak üç düzeyli bir örneğin nasıl oluşturulacağı, kaydedileceği ve önizleneceği gösteriliyor.

İç içe yerleştirilmiş bir HTML listesi nereye ait olur?

Bir HTML listesinin iki yapısal bölümü vardır: liste kapsayıcısı ve öğeleri. Sırasız liste için <ul>, sıralı liste için <ol> kullanın. Her sıradan öğe <li> ve </li> etiketleri arasına alınır. İç içe yerleştirilmiş bir liste, bu öğelerden birinin içine aittir. Google’ın Listeler kılavuzu bu iç içe yerleştirme düzenini aynen gösterir.

Temel sıralama şöyledir: üst öğeyi açın, etiketini yazın, alt listenin tamamını ekleyin ve ardından üst öğeyi kapatın. Kapanış etiketini görünür tutmak, ilişkiyi kontrol etmeyi kolaylaştırır.

Bu doğru HTML parçasında, Grup A’nın iki alt öğesi vardır; Grup B ise dış düzeyde kalır:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Kapanış etiketlerini içten dışa doğru okuyun. Önce her alt öğe kapanır. Sonra iç liste </ul> ile kapanır. Ardından Grup A </li> ile kapanır. Grup B ancak bundan sonra başlar. Böylece pratik bir kontrol yapabilirsiniz: üst öğenin açılış ve kapanış etiketlerini bulun ve alt listenin tamamının bu etiketlerin arasında olduğundan emin olun.

HTML Standardı, listeleri de içeren akış içeriğinin <li> öğelerinde bulunmasına izin verir. <ul> ve <ol> için içerik modeli, liste öğelerine ve betik desteği sağlayan öğelere izin verir; dış kapsayıcının içine doğrudan başka bir liste kapsayıcısı yerleştirilmesine izin vermez. HTML Standardı’ndaki gruplama içeriği tanımlarına bakın.

Her düzey için liste türünü ayrı ayrı seçin

Öğelerin sırasını değiştirmek anlamlarını değiştirir mi, diye sorun. Değiştiriyorsa <ol> seçin. Öğeler, anlamı sıralamaya bağlı olmayan bir koleksiyonsa <ul> seçin. Bu soruyu her alt liste için ayrı ayrı sorun. Mozilla’nın sıralı liste belgeleri hem sıralama ölçütünü hem de liste türlerini karıştırmayı açıklar.

Aşağıdaki örnekte Grup A ve Grup B, nötr kategoriler olduğundan dış listeleri sırasızdır. Öğe A1 ve Öğe A2 de sırasız bir koleksiyondur. Öğe A2’nin altında örnek belgeyi açma işlemi, belgeyi yeniden adlandırmadan önce geldiğinden bu iki yönergede sıralı liste kullanılır.

İçerik ilişkisi Liste seçimi Yerleşim
Grup koleksiyonu <ul> Grup öğelerinin çevresinde
Grup A’ya ait öğeler <ul> Grup A’nın <li> öğesinin içinde
Öğe A2’ye ait bir işlem sırası <ol> Öğe A2’nin <li> öğesinin içinde
Grup B’ye ait öğeler <ul> Grup B’nin ayrı <li> öğesinin içinde

Madde işaretlerinden numaralara geçmek, farklı bir iç içe yerleştirme yöntemi gerektirmez. Üst öğe yine alt listenin tamamını kapsar. Mozilla’nın belgeleri, sıralı ve sırasız listelerin birden fazla düzeyde birlikte iç içe yerleştirilmesini açıkça destekler. Sıralı liste kullanım notları

TextEdit’te iç içe listelerden oluşan tam bir belge oluşturun

Aşağıdaki örnek, eksiksiz bir HTML belgesidir. Örnek etiketler kullanır; indirilen dosya ya da ek kod gerektirmez. Yapısında dört liste ve sekiz liste öğesi bulunur: iki dış grup, bu gruplara dağıtılmış dört öğe ve Öğe A2 altında iki yönerge.

TextEdit’te File > New seçin, ardından Format > Make Plain Text seçeneğine tıklayın. Aşağıdaki eksiksiz örneği yapıştırın. Apple, HTML dosyaları oluşturmak için bu düz metin iş akışını TextEdit HTML kılavuzunda belgeliyor.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

File > Save seçeneğini belirleyin, dosyaya nested-lists.html adını verin ve kolayca bulabileceğiniz bir konuma kaydedin. TextEdit hangi uzantının kullanılacağını sorarsa Use .html seçin. Bunlar, Apple’ın belgelediği HTML kaydetme adımlarıdır. Yalnızca üç ters tırnakla çevrili bloğun içindeki kodu kopyalayın; Markdown çit satırlarını eklemeyin.

Finder’da kaydedilmiş dosyayı seçin ve File > Open With > Safari seçeneğini belirleyin. Apple, Mac’te dosya açmak için uygulama seçme belgesinde File > Open With aracılığıyla uygulama seçmeyi açıklıyor.

Önizlemedeki ilişkileri aşağıdaki beklentilerle karşılaştırın:

  • Grup A ve Grup B, dış düzeyde kardeş öğelerdir.
  • Öğe A1 ve Öğe A2, Grup A’ya aittir.
  • Numaralı iki yönerge yalnızca Öğe A2’ye aittir.
  • Öğe B1 ve Öğe B2, Grup B’ye aittir.

Bu ilişkileri görüntünün yanı sıra kaynak kodda da kontrol edin. Örneğin açık etiketleri ve liste-üst öğe ilişkileri programatik olarak kontrol edildi; Safari’deki görünümü burada test edilmedi.

Yanlış öğeye bağlanmış bir alt listeyi teşhis edin

Mevcut bir belgede sözcükler doğru ama hiyerarşi yanlışsa aşağıdaki sırayı izleyin. Dış listeden başlayarak her seferinde tek bir üst öğe ve onun doğrudan alt öğeleri üzerinde çalışın.

1. Çok erken kapanan bir üst öğe bulun

Bu hatalı parçada alt liste başlamadan önce Grup A kapanır:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

Burada içteki <ul>, dıştaki <ul> öğesinin doğrudan alt öğesidir. Üst öğe alt listeyi kapsasın diye Grup A’nın </li> etiketini içteki </ul> etiketinin altına taşıyın. Bu düzeltme, Google’ın iç içe liste örneğinde gösterilen yerleşim kuralını izler.

2. Doğru yapıda olup yanlış üst öğeye bağlı bir liste olup olmadığını kontrol edin

Bir liste iç içe yerleştirme kurallarına uyup yine de yanlış bir ilişkiyi anlatabilir. Örneğin numaralı yönergeleri Öğe A1’in içine koymak, amaçlanan etiket Öğe A2 olsa bile onları Öğe A1’e bağlar. Yalnızca doğru söz dizimi, amaçladığınız gruplandırmayı belirleyemez.

Her alt liste için şunu sorun: “Bu listenin tamamı hangi öğenin açılış etiketiyle çevreleniyor?” O öğenin etiketini, amaçlanan üst öğeyle karşılaştırın. Eksiksiz örnekte numaralı yönergelerden dışa doğru iz sürdüğünüzde önce Öğe A2’ye, sonra Grup A’ya ulaşmanız gerekir. Başka bir etikete ulaşıyorsanız görünümünü ayarlamadan önce alt listenin tamamını doğru yere taşıyın.

3. Düzenleme sırasında kapanış etiketlerini açıkça yazın

HTML, başka bir öğenin hemen ardından gelmesi gibi belirli koşullarda öğenin kapanış </li> etiketinin atlanmasına izin verir. Bu kısa yazıma güvenmeniz gerekmez. İç içe yerleştirmeyi öğrenirken ya da düzeltirken her sınır görünür olsun diye tüm kapanış öğe etiketlerini yazın. Mozilla, atlama koşullarını liste öğesi teknik özetinde tam olarak sıralar.

Düzenlemeye yardımcı olması için tutarlı girinti kullanın: alt listeyi üst öğe etiketinin altında girintileyin, eşleşen açılış ve kapanış liste etiketlerini de hizalayın. Ardından gerçek etiket sınırlarını kontrol edin. Girinti, amaçlanan ilişkiyi okumayı kolaylaştırır; ilişkiyi belirleyen, öğeleri çevreleyen etiketlerdir.

4. Paragraf sarmalayıcılarını kendi sınırları içinde tutun

Üst öğe etiketi için bir paragraf gerekiyorsa, üst öğenin içinde kalmalarını sağlayarak alt listeyi açmadan önce paragrafı kapatın. HTML Standardı, liste kapsayıcılarının <p> öğelerinin alt öğesi olamayacağını belirtir. HTML paragraf içerik kuralları

Bu geçerli parçada etiket paragrafı ve alt liste, Grup A’nın içinde birlikte tutulur:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Kaynağı yeniden açın ve değişiklikler sırasında hiyerarşiyi koruyun

Dosyayı TextEdit’te yeniden açtığınızda etiketler yerine biçimlendirilmiş içerik görünüyorsa File > Open seçeneğini belirleyin, dosyayı seçin, Show Options düğmesine tıklayın, Ignore rich text commands seçeneğini işaretleyin ve Open düğmesine tıklayın. Apple, gelecekteki dosyalar için TextEdit > Settings > Open and Save yolunu ve Display HTML files as HTML code instead of formatted text seçeneğini de sunuyor. TextEdit’te HTML’yi kod olarak görüntüleme

Bir öğeyi taşırken içerdiği alt listeler de dahil olmak üzere <li> bloğunun tamamını taşıyın. Örneğin Öğe A2’yi taşımak, iki yönergesini de beraberinde götürmeyi gerektirir. Yalnızca etiketi taşımak bu yönergeleri geride bırakır ve belgenin amaçlanan gruplandırmasını değiştirir.

Bir değişikliği kaydetmeden önce üç şeyi kontrol edin: her alt liste amaçlanan üst öğe tarafından çevreleniyor; kardeş öğeler gerekli sırada kalıyor; her liste, sıralamanın önemli olup olmadığına göre madde işareti ya da numara kullanıyor. Dosyayı kaydedin, Safari’de yeniden açın ve görünen grupları amaçladığınız taslakla karşılaştırın. Her üst öğeyi ve onun tüm alt ağacını birlikte tutmak, gelecekteki düzenlemeleri doğrulamayı kolaylaştırır.

Kaynaklar