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 olmuş olabilir. Bunlar listelerdir. Çoktan seçmeli testler genellikle numaralı soru listeleridir: Her bir soru için olası birden çok yanıt, iç içe yerleştirilmiş listelerdir.
HTML, listeleri işaretlememiz için bize birkaç farklı yol sağlar. Sıralı listeler (<ol>), sıralanmamış listeler (<ul>) ve açıklama listeleri (<dl>) vardır.
Liste öğeleri (<li>) sıralı listeler ve sıralanmamış listeler içine yerleştirilmiştir. Açıklama listesinin içinde açıklama terimleri (<dt>) ve açıklama
ayrıntıları yer alır. <dd>. Bunların hepsini burada ele alacağız.
HTML biçimlerinde, <option> öğe listeleri bir <select> içinde <datalist>, <select> ve <optgroup> içeriğini oluşturur. Bunlar, HTML formlarında ele alınmaktadır.
Menülerde ve sıralanmamış listelerde, liste öğeleri genellikle madde işaretleri kullanılarak görüntülenir. Sıralı listelerde, listenin başında genellikle bir sayı veya harf gibi artan bir sayaç bulunur. Madde işaretleri ve numaralandırma sırası, HTML veya CSS ya da her ikisi ile kontrol edilebilir veya tersine çevrilebilir.
Varsayılan olarak, sıralı ve sıralanmamış liste öğelerinin önüne sayı veya madde işareti eklenir. Ancak listelerin liste gibi görünmesini istemeseniz bile, gezinme çubuklarındaki gibi bir öğe listesi, madde işaretleri yerine onay kutuları olan bir yapılacaklar listesi veya çoktan seçmeli bir testte doğru ve yanlış soruları istersiniz. Madde işaretli olmayan bu listelerin tümünde HTML liste öğelerinin kullanılması uygundur.
Sırasız listeler
<ul> öğesi, sıralanmamış öğe listelerinin üst öğesidir. <ul> öğesinin yalnızca alt öğeleri, bir veya daha fazla <li> liste öğesi öğesidir. Makine listesi oluşturalım. Sıra önemli olmadığı için sıralanmamış bir liste kullanırız (bunu söylemeyin):
Varsayılan olarak, sıralanmamış her liste öğesinin önüne bir madde işareti eklenir. Sıralanmamış listede öğeye özel öznitelikler yoktur.
Listelerinizi </ul> ile kapatmanız gerekir.
Sıralı listeler
<ol> öğesi, sıralı öğe listeleri için üst öğedir. Bir <ol> öğesinin alt öğeleri yalnızca bir veya daha fazla <li> öğesi ya da liste öğesidir.
Bununla birlikte, bu durumda "madde işaretleri" çok çeşitli sayılardan oluşur. Tür, CSS'de list-style-type özelliği veya type özelliği aracılığıyla tanımlanabilir.
<ol> öğesinin öğeye özgü üç özelliği vardır: type, reversed ve start.
Numaralı type özelliği, numaralandırma türünü belirler. type için beş geçerli değer vardır. Bu değerler, varsayılan olarak sayılar için 1'dir. Ancak küçük ve büyük harfler ya da Roma rakamları için de a, A, i veya I değerini kullanabilirsiniz. list-style-type özelliği çok daha fazla değer sağlar.
Kod kaleminde belirtildiği gibi, list-style-type özelliği type özelliğinin değerini geçersiz kılar. Bununla birlikte, yasal belgelerde olduğu gibi sayısal türün önemli olduğu doküman yazarken type özelliğini eklemeniz gerekir.
Boole reversed özelliği (varsa), sayıların sırasını, en büyük sayıdan en düşüğe doğru ters çevirir.
start özelliği, başlangıç değerini ayarlar. Varsayılan değer: 1.
</ul> ile benzer şekilde, </ol> kapanışı gereklidir.
Listeleri iç içe yerleştirebiliriz, ancak bunların bir liste öğesi içine yerleştirilmesi gerekir. Bir <ul> veya <ol> 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ıralanmamış listenin (<ul>), sıralı listenin (<ol>) veya menünün (<menu>) doğrudan alt öğesi olabilir. <li>, bu öğelerden birinin alt öğesi olarak iç içe yerleştirilmelidir ve başka bir yerde geçerli değildir.
Tarayıcı sonraki <li> açılış etiketiyle veya zorunlu liste kapatma etiketiyle (</ul>, </ol>, </menu>) karşılaştığında liste öğesi kapatılacağından bu spesifikasyon için liste öğesinin kapatılması gerekmez. Spesifikasyon bunu gerektirmez ve bazı şirket içi en iyi uygulamaları, birkaç bayttan tasarruf etmek için liste öğelerini kapatmamanız gerektiğini, ancak <li> etiketlerinizi de kapatın. Böylece kodunuzu kolayca okuyabilirsiniz. Hangi etiketlerin kapatılması gerektiğini ve hangilerinin isteğe bağlı bir kapanış etiketine sahip olduğunu hatırlamaktansa tüm öğeleri kapatmak daha kolaydır.
Öğeye özel yalnızca bir <li> özelliği vardır: value, bir tam sayı. value, yalnızca <li> sıralı bir liste içine yerleştirildiğinde ve sıralanmamış listeler veya menüler için bir anlamı olmadığında <li> üzerinde faydalıdır. Çakışma olması durumunda <ol> başlangıç değerini geçersiz kılar.
value, sıralı bir listedeki liste öğesinin numarasıdır. Sonraki liste öğelerinde, value özelliği ayarlanmamışsa numaralandırmaya ayarlanan değerden devam edin. Değerin düzenli olması gerekmez, ancak doğru değilse bunun iyi bir nedeni olmalıdır.
<ol> özelliğindeki reversed öğesini liste öğelerindeki value özellikleriyle birleştirdiğinizde, tarayıcı bu <li> öğesini sağlanan değere ayarlar, ardından ondan önce gelen <li> için yukarı sayar ve ardından gelenler için geri sayım yapar. İkinci liste öğesinin değer özelliği varsa sayaç bu ikinci liste öğesinde sıfırlanır ve sonraki değer bir birim azalır.
Tüm bunlar, ::marker sözde öğe için oluşturulmuş içerik sağlayan CSS sayaçlarıyla da kontrol edilebilir.
Sayı yalnızca sunum amaçlıysa CSS kullanın. Numaralandırma anlam açısından önemliyse veya başka bir anlama geliyorsa bu özellikleri kullanın.
Şu ana kadar, yalnızca metin düğümleri içeren liste öğelerini inceledik. Liste öğeleri, tüm akış içeriğini barındırabilir. Diğer bir deyişle, gövdede bulunan ve başlıklar da dahil olmak üzere <body> öğesinin doğrudan alt öğesi olarak iç içe yerleştirilebilecek herhangi bir öğe, içeriği bölümlere ayırır.
Çok Dilli Ses'te birkaç sıralanmamış listeniz var. Eğitmenler bölümündeki öğretmenler ve inceleme bölümündeki öğrenci makineleri liste halindedir. <ul> adlı öğretmenin her öğretmen için bir tane olmak üzere iki <li>'ı vardır. 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, <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ğundan üç <li> Her biri bir resim, bir blok alıntı ve iki satır sonu içeren üç satırlık bir paragraf içerir.
<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. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
Listelerin iç içe yerleştirilmesi de çok yaygın bir uygulamadır. MLW'de iç içe geçmiş listeler olmasa da bu sitenin iç içe geçmiş listesi vardır. Bu dizinin ilk bölümü olan HTML'ye Genel Bakış'ta, ana öğeler bölümünde iki alt bölüm vardır. Sıralanmamış bir liste olan içindekiler tablosunda, şu iki bölüme bağlantıları içeren iç içe yerleştirilmiş bir sıralanmamış 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>
<ul> öğesinin tek alt öğesi <li> olduğundan, iç içe yerleştirilmiş liste <li> içine iç içe yerleştirilmiştir. Hiçbir zaman <ol> veya <ul> öğesinin içinde olmaz.
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 ayarı dahil olmak üzere CSS ile liste görünümünün kaldırılması, VoiceOver'ın (iOS ve MacOS ekran okuyucusu) Safari'de örtülü anlamı kaldırmasına neden olabilir. Bu bir hata değil özelliktir.
Genel olarak, anlamsal öğeleri kullanırken gerekli olmadığı için rol özelliğini eklememeniz gerekir. Ayrıca, kullanıcının listede kaç öğe olduğunu bilmenin fayda sağlayacağı durumlar gibi, listenin gerçekten bir liste olduğunu bilmesi gerekmediği sürece, genellikle listeye bir liste eklemeniz 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şti.
Sıralı ve sırasız listelere benzer şekilde iç içe yerleştirilebilirler. Sıralı ve sırasız listelerin aksine bunlar anahtar/değer çiftlerinden oluşur.
<ul> ve <ol> ile benzer şekilde, <dl> de üst kapsayıcıdır. <dt> ve <dd> öğeleri, <dl> alt öğeleridir.
Kariyer geçmişlerini ve amaçlarını içeren bir makine listesi oluşturabiliriz. Öğrenciler için <dl> ile belirtilen açıklama listesi bir terim grubunu içerir. Bu örnekte "terimler", <dt> öğesi kullanılarak belirtilen öğrenci adlarıdır. Her bir dönem için bir açıklama ve <dd> öğeleriyle belirtilir.
Bu açıklama listesi aslında MLW sayfasının bir parçası değil. Açıklama listeleri yalnızca terimlere ve tanımlara yönelik değildir. Bu nedenle öğe adları daha genel hale getirilmiştir.
Terimler ve tanımları, açıklamaları veya benzer anahtar/değer çifti listeleri oluştururken açıklamada öğeler listelenerek uygun anlamlar sağlanır. <dt> rolünün örtülü rolü term, izin verilen başka bir rol ise listitem'dir. <dd> öğesinin örtülü rolü, definition rolüne sahiptir ve başka hiçbir role izin verilmez. <ul> ve <ol> özelliklerinin aksine <dl>, dolaylı bir ARIA rolüne sahip değildir.
Bu mantıklı, çünkü <dl> her zaman bir liste değil. Ancak bu özellik kullanıldığında list ve group rollerini kabul etmiş olur.
Açıklama listeleriyle genellikle eşit sayıda <dt> ve <dd> öğesi bulunur. Ancak açıklama listeleri her zaman değildir ve terim-açıklama çiftlerini eşleştirme zorunluluğu yoktur. Birden fazla tanımı bire bir veya birden çok sözlük terimi gibi, birden çok terimle açıklamaya uygun hale getirebilirsiniz.
Her <dt> en az bir ilişkilendirilmiş <dd> ve her <dd> en az bir ilişkilendirilmiş <dt> öğesine sahiptir. CSS ile bu öğelerin değişken sayılarını hedeflemek için bitişik eşdüzey kombinasyonunu veya :has() ilişkisel seçiciyi kullanmak mümkün olsa da gerekirse <dl> öğesinin alt öğesi olarak bir <div> öğesi ve bir veya daha fazla <dt> ya da <dd> öğesinin üst öğesine (ya da her ikisine) izin verilir. <dl> öğesinin aslında birkaç alt öğesi daha olabilir: <div>, <template> veya <script> öğesinin iç içe yerleştirilmesine izin verilir. Açıklama listesi öğelerinin hiçbirinin öğeye özel öznitelikleri yok.
Artık bağlantıları ve listeleri anladığınıza göre gezinme özelliğini oluşturmak için bu ikisini bir araya getirelim.
Öğrendiklerinizi sınayın
Listelerle ilgili bilginizi test edin.
Bir liste öğesinin içine <h2> eklemek geçerli midir?
Liste türlerini tanımlayan üç öğeyi seçin.
<il><ol><ul><dl>