Listeler

Listeler, düşündüğünüzden daha yaygındır. Daha önce programlama dersi aldıysanız ilk projeniz alışveriş listesi veya yapılacaklar listesi oluşturmak olabilir. Bunlar listelerdir. Çoktan seçmeli testler genellikle numaralandırılmış soru listeleridir: Her sorunun olası birden fazla yanıtı iç içe geçmiş listelerdir.

HTML, listeleri işaretlemek için birkaç farklı yol sunar. Sıralı listeler (<ol>), sırasız listeler (<ul>) ve açıklama listeleri (<dl>) vardır. Liste öğeleri (<li>), sıralı listeler ve sırasız listeler içinde iç içe yerleştirilir. Açıklama listesinde açıklama terimleri (<dt>) ve açıklama ayrıntıları <dd>. bulunur. Bunların hepsini burada ele alıyoruz.

HTML formlarında, <option> öğelerinin listeleri <datalist> <select> ve <select> içindeki <optgroup> öğelerinin içeriğini oluşturur. Bunlar HTML formları bölümünde ele alınmaktadır.

Menülerde ve sırasız listelerde, liste öğeleri genellikle madde işaretleriyle gösterilir. Sıralı listelerde genellikle sayı veya harf gibi artan bir sayaçla başlarlar. Madde işaretleri ve numaralandırma sırası HTML veya CSS ya da her ikisiyle de kontrol edilebilir veya tersine çevrilebilir.

Varsayılan olarak, sıralı ve sırasız liste öğelerinin önüne sayılar veya madde işaretleri eklenir. Ancak listelerin liste gibi görünmesini istemediğiniz durumlarda bile öğe listesi kullanmak isteyebilirsiniz. Örneğin, gezinme çubuklarında, madde işaretleri yerine onay kutularının bulunduğu bir yapılacaklar listesinde veya çoktan seçmeli bir testteki doğru/yanlış sorularında. Maddeler içermeyen tüm bu listeler için HTML liste öğelerini kullanmak uygundur.

Sırasız listeler

<ul> öğesi, öğelerin sırasız listelerinin üst öğesidir. <ul> öğesinin tek alt öğeleri bir veya daha fazla <li> liste öğesi öğesidir.

Bir makine listesi oluşturalım. Sıranın önemli olmaması nedeniyle sırasız liste kullanıyoruz (bunu kullanıcılara söylemeyin).

Varsayılan olarak, her sırasız liste öğesinin önüne madde işareti eklenir. Sırasız listenin öğeye özel özellikleri yoktur. Listelerinizi </ul> ile kapatmanız gerekir.

Sıralı listeler

<ol> öğesi, sıralı öğe listelerinin üst öğesidir. <ol> öğesinin tek alt öğeleri bir veya daha fazla <li> öğesi ya da liste öğesidir. Ancak bu durumda "maddeler" çok çeşitli sayılardır. Tür, CSS'de list-style-type özelliği veya type özelliğiyle tanımlanabilir.

<ol> öğesinin öğeye özgü üç özelliği vardır: type, reversed ve start.

Numaralandırılmış type özelliği, numaralandırma türünü ayarlar. type için beş geçerli değer vardır. Varsayılan değer, sayılar için 1'dir. Ancak küçük ve büyük harfler veya Romen rakamları için a, A, i veya I değerlerini de kullanabilirsiniz. list-style-type özelliği çok daha fazla değer sağlar.

Codepen'de belirtildiği gibi list-style-type özelliği, type özelliğinin değerini geçersiz kılsa da sayısal türün önemli olduğu dokümanlar (ör. yasal belgeler) yazarken type özelliğini eklemeniz gerekir.

Boole reversed özelliği eklenirse sayıların sırası tersine çevrilerek en büyük sayıdan en küçüğe doğru sıralanır. start özelliği başlangıç değerini ayarlar. Varsayılan değer 1'dir.

</ul> öğesine benzer şekilde, kapatma </ol> öğesi gereklidir.

Listeleri iç içe yerleştirebiliriz ancak bunlar bir liste öğesi içinde yerleştirilmelidir. <ul> veya <ol> öğesinin alt öğesi olabilecek tek öğenin bir veya daha fazla <li> öğesi olduğunu unutmayın.

Liste öğeleri

<li> öğesini kullandık ancak henüz resmi olarak kullanıma sunmadık. <li> öğesi, sırasız bir listenin (<ul>), sıralı bir listenin (<ol>) veya bir menünün (<menu>) doğrudan alt öğesi olabilir. <li>, bu öğelerden birinin alt öğesi olarak yerleştirilmelidir ve başka hiçbir yerde geçerli değildir.

Bir liste öğesini kapatmak, tarayıcı bir sonraki <li> açılış etiketiyle veya gerekli liste kapatma etiketiyle (</ul>, </ol>, </menu>) karşılaştığında öğe örtülü olarak kapatıldığından spesifikasyon tarafından zorunlu tutulmaz. Spesifikasyon bunu zorunlu kılmasa ve bazı şirket içi en iyi uygulamalar, birkaç bayt tasarruf etmek için liste öğelerini kapatmamanızı önerse de <li> etiketlerinizi kapatmanız gerekir. Bu sayede kodunuz daha kolay okunur ve gelecekteki siz bu karardan memnun kalır.

Hangi etiketlerin kapatılması gerektiğini ve hangilerinin isteğe bağlı kapatma etiketine sahip olduğunu hatırlamaktansa tüm öğeleri kapatmak daha kolaydır.

Yalnızca bir öğeye özel <li> özelliği vardır: value (bir tam sayı). value yalnızca <li> sıralı bir liste içinde yerleştirilmişse <li> üzerinde kullanışlıdır ve sırasız listeler veya menüler için anlamı yoktur. Çakışma olması durumunda <ol> başlangıç değerini geçersiz kılar.

value, sıralı listedeki liste öğesinin numarasıdır. Sonraki liste öğelerinde, bu öğede value özelliği de ayarlanmamışsa numaralandırmaya değer kümesinden devam edin. Değerin sıralı olması gerekmez. Ancak sıralı değilse bunun iyi bir nedeni olmalıdır.

<ol> üzerindeki reversed ile liste öğelerindeki value özelliklerini birleştirdiğinizde tarayıcı, <li> değerini sağlanan değere ayarlar, ardından kendisinden önce gelen <li>'leri sayar ve kendisinden sonra gelenleri geri sayar. İkinci bir liste öğesinde değer özelliği varsa sayaç bu ikinci liste öğesinde sıfırlanır ve sonraki değer bir azalır.

Tüm bunlar, CSS sayaçları ile de kontrol edilebilir. Bu sayaçlar, ::marker sözde öğesi için oluşturulan içerik sağlar. Sayı yalnızca sunum amaçlıysa CSS kullanın. Numaralandırma anlamsal olarak önemliyse veya başka bir anlamı varsa bu özellikleri kullanın.

Şimdiye kadar yalnızca metin düğümleri içeren liste öğelerine baktık. Liste öğeleri tüm akış içeriğini içerebilir. Bu, gövdede bulunan ve başlıklar da dahil olmak üzere <body> öğesinin doğrudan alt öğesi olarak yerleştirilebilen tüm öğeler anlamına gelir. Böylece içerik bölümlere ayrılır.

MLW'de birkaç sırasız liste var. Eğitmenler bölümündeki öğretmenler ve incelemeler bölümündeki öğrenci makineleri liste olarak gösterilir. Eğitmen <ul> iki <li>'ye sahip: her öğretmen için bir tane. Her <li> içinde bir resim ve bir paragraf bulunur:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Yorumlar bölümünde üç yorum olduğu için üç <li> var. Her birinde bir resim, bir alıntı ve iki satır sonu içeren üç satırlık bir paragraf bulunur.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Listelerin içinde liste oluşturmak da çok yaygındır. MLW'de iç içe geçmiş listeler olmasa da bu sitede var. Bu serinin ilk modülü olan HTML'ye Genel Bakış'taki ana öğeler bölümü iki alt bölümden oluşur. İçindekiler tablosu, sırasız bir listedir. Bu listede, şu iki bölüme bağlantılar içeren iç içe yerleştirilmiş bir sırasız liste bulunur:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Bir <ul> öğesinin tek alt öğesi <li> olduğundan, iç içe yerleştirilmiş bir liste hiçbir zaman doğrudan <ol> veya <ul> içinde değil, <li> içinde yer alır.

Bu son örnekte, role="list" öğesinin <ul> üzerinde yer aldığını fark etmiş olabilirsiniz. Hem <ul> hem de <ol> öğelerinin örtülü rolü list olsa da display: grid veya list-style-type: none ayarlanması da dahil olmak üzere CSS ile liste görünümünün kaldırılması, VoiceOver'ın (iOS ve macOS ekran okuyucusu) Safari'deki örtülü semantiği kaldırmasına neden olabilir. Bu bir özelliktir, hata değildir. Genel olarak, anlamsal öğeleri kullanırken rol özelliğini eklemeniz gerekmez. Ayrıca, kullanıcının gerçekten bir liste olduğunu bilmesi gerekmediği sürece (ör. listede kaç öğe olduğunu bilmek kullanıcının işine yarayacaksa) listelere eklemeniz de genellikle gerekmez.

Açıklama listeleri

Açıklama listesi, bir dizi (sıfır veya daha fazla) açıklama terimi (<dt>) ve bunların açıklama ayrıntılarını (<dd>) içeren bir açıklama listesi (<dl>) öğesidir. Bu üç öğenin orijinal adları "tanım listesi", "tanım terimi" ve "tanım tanımı"dır. Yaşam standardında ad değişikliği yapıldı.

Sıralı ve sırasız listelere benzer şekilde iç içe yerleştirilebilirler. Sıralı ve sırasız listelerden farklı olarak anahtar/değer çiftlerinden oluşurlar. <ul> ve <ol>'ye benzer şekilde <dl> üst kapsayıcıdır. <dt> ve <dd> öğeleri, <dl> öğesinin alt öğeleridir.

Kariyer geçmişleri ve hedefleriyle birlikte makinelerin listesini oluşturabiliriz. <dl> ile gösterilen öğrencilerin açıklama listesi, <dt> öğesi kullanılarak belirtilen bir terim grubunu ve <dd> öğeleriyle belirtilen her terimin açıklamasını içerir. Bu durumda, "terimler" öğrenci adları, açıklamalar ise her öğrencinin kariyer hedefleridir.

Bu açıklama listesi aslında MLW sayfasının bir parçası değildir. Açıklama listeleri yalnızca terimler ve tanımlar için kullanılmaz. Bu nedenle, öğelerin adları daha genel hale getirilmiştir.

Terimlerin ve tanımlarının veya açıklamalarının listesini ya da benzer anahtar/değer çifti listelerini oluştururken açıklama listesi öğeleri uygun semantiği sağlar. <dt> kullanıcısının örtülü rolü term'dir. listitem ise izin verilen başka bir roldür. <dd> rolünün örtülü rolü, başka role izin verilmeyen definition rolüdür. <ul> ve <ol>'den farklı olarak <dl>'nin örtülü bir ARIA rolü yoktur. Bu durum, <dl> her zaman bir liste olmadığı için mantıklıdır. Ancak bu durumda list ve group rollerini kabul eder.

En sık olarak, eşit sayıda <dt> ve <dd> öğesi içeren açıklama listeleriyle karşılaşırsınız. Ancak açıklama listeleri her zaman terim-açıklama çiftleriyle eşleşmek zorunda değildir. Bir terime birden fazla açıklama veya bir açıklamaya birden fazla terim ekleyebilirsiniz. Örneğin, bir sözlük teriminin birden fazla tanımı olabilir.

Her <dt> öğesinin en az bir ilişkili <dd> öğesi, her <dd> öğesinin ise en az bir ilişkili <dt> öğesi vardır. CSS ile bu öğelerin değişken sayılarını hedeflemek için bitişik kardeş kombinatörünü veya :has() ilişkisel seçiciyi kullanmak mümkün olsa da gerekirse <div> öğesini <dl> öğesinin alt öğesi olarak ekleyebilirsiniz. Bir veya daha fazla <dt> ya da <dd> öğesinin (veya her ikisinin) üst öğesi olmasına izin verilir. <dl> aslında birkaç başka çocuğa sahip olabilir: <div>, <template> veya <script> öğesinin yerleştirilmesine izin verilir. Açıklama listesi öğelerinin hiçbirinde öğeye özgü özellik yok.

Artık bağlantılar ve listeler hakkında bilgi sahibi olduğunuza göre gezinme oluşturmak için bu iki öğeyi bir araya getirebiliriz.

Anlayıp anlamadığınızı kontrol etme

Listelerle ilgili bilginizi test edin.