HTML'de liste girintili çıkıntılı nasıl yapılır?

caged_gorillabas dedi:

ul etiketlerini iç içe yuvalamalısın, "nested" bir hale getirmelisin, şu şekilde:

HTML:Panoya kopyala

<ul type="disc">
 <li>Anakart</li>
 <li>RAM</li>
 <ul type="circle"> <!-- buraya dikkat -->
 <li>statik</li>
 <li>dinamik</li>
 </ul>
 <li>klavye</li>
 <!-- buradan devam -->
</ul>

Şöyle düşünürsen kolay anlaşılır:

Senin paylaştığın kodda, birbirinden bağımsız 2 farklı liste (ul) var.

Benim paylaştığım kodda ise tek bir ul var, bir diğer ul de onun elemanı.

Genişletmek için tıkla...

caged_gorillabas dedi:

ul etiketlerini iç içe yuvalamalısın, "nested" bir hale getirmelisin, şu şekilde:

HTML:Panoya kopyala

<ul type="disc">
 <li>Anakart</li>
 <li>RAM</li>
 <ul type="circle"> <!-- buraya dikkat -->
 <li>statik</li>
 <li>dinamik</li>
 </ul>
 <li>klavye</li>
 <!-- buradan devam -->
</ul>

Şöyle düşünürsen kolay anlaşılır:

Senin paylaştığın kodda, birbirinden bağımsız 2 farklı liste (ul) var.

Benim paylaştığım kodda ise tek bir ul var, bir diğer ul de onun elemanı.

Genişletmek için tıkla...

Syeux dedi:

HTML:Panoya kopyala

    <ul>
        <li>anakart</li>
        <li>ram
            <ul>
                <li>statik</li>
                <li>dinamik</li>
            </ul>
        </li>
        <li>klavye
            <ul>
                <li>kablolu</li>
                <li>kablosuz
                    <ul>
                        <li>wireless</li>
                        <li>bluetooth</li>
                        <li>infra red</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>klavye</li>
        <li>sabitdisk
            <ul>
                <li>ssdi</li>
                <li>sata</li>
                <li>pata</li>
            </ul>
        </li>
    </ul>

Genişletmek için tıkla...

qdexz_vl dedi:

Fark ne?

Genişletmek için tıkla...

Syeux dedi:

Ul yi div gibi düşün. Grup içinde grup oluşturuyorsun HTML'in mantığı bu. Farkındaysan hepsi tek bir ul içinde olduğu için grupluyor.

Genişletmek için tıkla...

1. İç içe geçmiş listelerin mantıksız kullanımı:
   • "Klavye" öğesi iki kez kullanılmış ve farklı listeler içinde yer almaktadır. Bu durum, içeriğin anlaşılmasını zorlaştırmaktadır.
   • Listelerin hiyerarşisi, bileşenler arasındaki ilişkiyi doğru bir şekilde yansıtmamaktadır.
2. "squared" tipi liste kullanımı:
   • HTML'de standart bir "squared" liste tipi bulunmamaktadır. Bu, tarayıcılar tarafından farklı şekilde yorumlanabilir. "square" yerine "disc" veya "circle" gibi standart tipler kullanılmalıdır.
3. Kapatılmamış listeler:
   • Kodda bazı listelerin kapanış etiketleri (</ul>) eksik veya yanlış yerde kullanılmıştır.

<ul>
    <li>Anakart</li>
    <li>RAM
        <ul>
            <li>Statik</li>
            <li>Dinamik</li>
        </ul>
    </li>
    <li>Klavye
        <ul>
            <li>Kablolu</li>
            <li>Kablosuz
                <ul>
                    <li>Wi-Fi</li>
                    <li>Bluetooth</li>
                    <li>Infra Red</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Sabit Disk
        <ul>
            <li>SSD</li>
            <li>SATA</li>
            <li>PATA</li>
        </ul>
    </li>
</ul>

• Klavye öğesi: İki farklı klavye türü olduğu için "Kablolu" ve "Kablosuz" olarak iki ayrı liste öğesi altında toplanmıştır.
• Liste hiyerarşisi: Bileşenler arasındaki ilişkiyi daha iyi yansıtmak için listelerin hiyerarşisi düzenlenmiştir. Örneğin, "Kablosuz" klavyelerin alt türleri ayrı bir liste içinde gösterilmiştir.
• Liste tipleri: Tüm listeler için standart olan "disc" veya "circle" tipleri kullanılmıştır. "squared" tipi kaldırılmıştır.
• Kapanış etiketleri: Tüm listelerin kapanış etiketleri eksiksiz ve doğru yerlerde kullanılmıştır.