Öğeleri listelerken sadece div yerine ul-li kullanmam gerektiğinden emin değilim. Her ikisinin de tamamen aynı görünmesini sağlayabilirim, öyleyse sırasız bir liste oluşturmanın div'leri sıraya koymanın işlevsel avantajı nerede?
Yanıtlar:
Anlamsal doğruluk için. HTML, nesnelerin listesini ifade etme yeteneğine sahiptir ve Google robotunun, ekran okuyucularının ve yalnızca sitenin sunumuyla ilgilenmeyen her tür kullanıcının içeriğinizi daha iyi anlamasına yardımcı olur.
Öğeleri sıralarken neden ul-li ve sadece div kullanmam gerektiğinden emin değilim. İkisinin de tamamen aynı görünmesini sağlayabilirim
Sorunuzda anahtar kelime var: "bak". Ayrıca bunları yapabilir yazın Braille okuyucu kullanarak kör insanlar için aynı? Bunları yapabilir ses bir metin-konuşma sentezleyici kullanılarak kör insanlar için aynı? Özel istemci tarafı CSS kullanıcı stil sayfaları kullanan görme engelli kişiler için hala aynı görünmelerini sağlayabilir misiniz ?
Bu kelime, "bak", çok tehlikeli bir kelimedir - bunu HTML ile ilişkili olarak kullandığınızda, tüm alarmlar kafanızda çalmalıdır. HTML, bir hiper ortam belgesinin anlamsal yapısını açıklayan bir dildir. Bir semantik yapısı değil var o soyut bir kavram, bir "göz".
Tüm bu anlamsal hokus odağı umursamıyor olsanız ve kör insanları umursamıyor olsanız bile, şunu düşünün: Google, Yahoo, MSN ve Co.'nun gözleri yok, oluşturulmuş CSS'nize "bakmıyorlar" .
Sorunuzun doğrudan cevabı: İşlevsel avantajı, div'lerin kendi başlarına çok az şey ifade etmeleridir, oysa ul lis açıkça "bu bir öğelerin sıralanmamış listesi" anlamına gelir.
"Anlambilim" terimi, açık bir anlam yaratmak için mevcut yapıların doğal anlamını kullanma şeklinizi ifade eder. HTML, kendi başlarına belirli şeyleri ifade eden etiketlerden oluşur. Ayrıca, yayınlanmış HTML belgenizin ne anlama gelmesini istediğinizi aktarması için bunları kullanmanın yerleşik kuralları / yönergeleri / yolları vardır.
Belgenizde bir şey listelerseniz, sıralı bir liste (UL) veya sırasız bir liste (OL) ekleyin. Öte yandan, sayfa bölme (DIV) öğesi, belirli ve ayrı bir içerik parçası oluşturmak için kullanılır.
Div elemanı "böler." Bir sayfaya baktığınızda, içerik gövdesi, altbilgi, üstbilgi, gezinme, menüler, formlar vb. Gibi belirli bölümler vardır. Bu bölümleri oluşturmak için div etiketlerini kullanabilirsiniz . Genellikle, sayfa bölümleri görsel bir düzene karşılık gelir, bu nedenle CSS'de mizanpajınızı kesmek için açık sayfa bölümlerini (DIV'ler) kullanmak doğal bir uyumdur. Bu şekilde div etiketleri yapısal hale gelir.
Div etiketini kötüye kullanırsanız veya aşırı kullanırsanız, istenmeyen anlam ve kod şişkinliği oluşturabilir.
Konuları karıştırmak için: Google , listelenen arama sonuçlarını "bölmek" için h3 ve div kullanır . ul> li> h3 + div
Yani, (/ webdeveloper araç çubuğu w Firefox'ta Shift + Cmd / Ctrl + S) tüm stilleri kapattığınızda div'ler gitmesini ve doğal olarak yığını olmalıdır. Çıplak HTML'niz yine de net bir hiyerarşi ile güzel bir sayfa oluşturmalıdır: yukarıdan aşağıya, en önemli içerik önce ve listelenen öğeler için madde işaretleri ve numaralar içeren listeler. Üst tarafa (görsel olmayan kullanıcılar için) aşağıya atlamanıza izin veren bir bağlantı eklemek iyi bir fikirdir: ana içerik, önemli formlar veya ana başlıklar (içindekiler tablosu gibi).
Son olarak, bir belge oluşturduğunuzu unutmayın. Tüm görsel efektler olmadan, yine de ikna edici bir belge olmalıdır.
Kullanmak <li>veya kullanmakla ilgili çok fazla konuşma var, <div>ancak tek bir yorum bu etiketlerin içine giren içeriğin sağlam bir örneğini vermedi. Benim hissim bu <ul>ve <li>gerçekten o kadar da önemli değil çünkü size bir web sitesinde, gazetede veya dergide - çevrimiçi veya basılı olan şeylerin bir "listesini" gerçekten en son okuduğumu söyleyemem.
<div>çok daha çok yönlüdür. Bir pasta için malzemeleri listeliyorsanız, evet bu bir listedir. Bir yürüyüş gezisi için bir şeyler listeliyorsanız, evet bu bir liste.
Ancak, örneğin, gerçekte bir liste, bir paragraf dizisi veya tüm "başlıklar" olmayan bazı rastgele şeyleri listeleyen bir kullanıcı biçimine ne dersiniz? Bazı şeyler tarih, bazıları onay kutuları ve bazıları metindir. Bana sorarsan bölün. Kör bir kişi ile o kadar işaretlenmiş ise yanlış bilgilendirilmiş olur <ul>ve <li>onlar duydu "İşte ... listesidir" bir liste gerçekten şeyler sadece karmaşık bir durum arz, olmadığı zaman.
İçine koymak istediğiniz içerik için uygun etiketleri kullanmalısınız. Bu sadece ul / li'nin listeler için daha uygun olduğu anlamına gelmez. Bu aynı zamanda listenizin içeriğini göz önünde bulundurmanız ve sırasız / sıralı veya tanımlı bir liste olup olmadığını görmeniz gerektiği anlamına gelir.
Diğer bir argüman da css'yi devre dışı bıraktığınızda. Tarayıcı, varsayılan stilini oluşturacak ve bu, alternatif tarama cihazlarının kullanılıp kullanılmadığına bakmayı daha güzel hale getirecektir. Erişilebilirliği de artırır.
Ben şahsen anlambilim için li'leri seviyorum. Kaynağı görüntülerken, eğer bir li ile sarmalanmışsa, bir şeyin bir listesine sahip olduğunuzu hemen görürsünüz. Bir div koleksiyonu anlamsal bir anlam sağlamaz ve genellikle listedeki tek anlambilim "listItem" gibi css sınıfları tarafından sunulur. Bu da açıkça bir li'nin ilk etapta kullanılması gerektiğine işaret ediyor.
Sunum mantığınızda bir döngü varsa, bir div yerine her zaman bir li'yi tercih ederim.
<li> bir listedeki bir öğe anlamına gelir ve bu, ayrıştırıcıların (tarayıcılar, arama motorları, örümcekler) öğeleri listelediğinizi bilmesini sağlar. LI yerine DIV kullanabilirsiniz, ancak bu ayrıştırıcılar bu öğelerin listelendiğini asla bilemezler ve DIV bir blok olması dışında hiçbir şeyi tanımlamaz.
Projeye göre değişir. Geçenlerde bir liste kullanılarak tasarlanmış bir menü içeren bir proje yaptım. Kayma / solma gibi bir dizi efekt eklemek istediler ve aynı zamanda birden çok seviyede katlanabilir hale getirmek istediler.
Bu durumda DIV'ler çok daha uygundu. Alt div'ler için kapsayıcılar oluşturabildim ve istenen efektleri elde etmek için jQuery uyguladım.
Projeniz henüz bu gerekliliklere sahip olmasa bile, gelecekte onu nasıl değiştirebileceğinizi düşünmek mantıklı olabilir ...
<li>(Uygun olduğunda) kullanmak <div>, web sayfalarında çok sık gördüğünüz etiket çorbasını azaltır ve bu da geliştiricilere çok yardımcı olur.
Bu <div>kötü değildir, ancak bir etiket ne zaman aşırı kullanılırsa ( <div>çoğu zaman olduğu gibi), etiketin anlamsal anlamını tamamen işe yaramaz hale getirir. Bunu yakın zamanda web uygulamamızın CSS / UI'sine yardımcı olması için tuttuğumuz bir müteahhitten öğrendim ve bunun HTML kodunun okunabilirliği / sürdürülebilirliğinde yaptığı fark benim için çok belirgindir.
Tek umursadığınız, listelerin minimum çabayla belirli bir şekilde görünmesini sağlamaksa, o zaman bu zaten zahmetsizdir: yazmaktan <li>bir karakter daha azdır <div> ve HTML'de kapanış etiketi isteğe bağlıdır.
Ve bu, diğer herkesin anlambilim hakkında söylediklerine ek olarak.
Sorunuz zaten tarafından cevaplandı, buraya iki sentimi eklemek istiyorum. Arka uç mantığını yaptığım bir proje üzerinde çalışıyordum ve verilerim tasarımcım tarafından yapılan bir sayfa şablonunda toplanıyordu. Sayfadaki her tür listeyi temsil etmek için ul ve li etiketlerini kullandı, bunlardan bazıları widget idi. Veriler, kullanıcıların html etiketleri aracılığıyla zengin metin girebildikleri bir cms'den geliyordu. Kullanıcılar içeriklerinde listeler oluşturmaya başladıklarında, listeler artık madde işaretli listeler gibi görünmüyor, tüm sayfayı alt üst ediyordu.
öğrenilen ders: içeriğiniz kendi içinde html içeriyorsa, genel css seçicilerle liste etiketlerini kullanmayın.
ul li ile ilgili başka bir şey de; ul'yi, Style sınıfını belirlemenize yardımcı olan bir kapsayıcı olarak kullanabilirsiniz.
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>Ul kullandığımda bu kalıbı seviyorum
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitemsElbette onu nasıl kullanmak istediğimize ve nasıl sevdiğimize bağlı. Bu benim sevdiğim yol
Umut yardımcı olur, teşekkürler