HTML Listeleme Etiketi Nedir?

HTML listeleme etiketi nedir? Nasıl kullanılır? diye sorduğunuzu duyar gibiyim bunun için sizlere bu yazımda listeleme elemanları mümkün olduğunca anlatmaya çalışacağım. Bir örnek üzerinden gidecek olursan bir Web sayfanız var ve sitenizin içeriğine yemek tarifi yazacaksınız. 2 adet yumurta, 1 bardak süt diye yan yana yazmak sitenizin güzel görünümünü bozuyor alt alta başlıklar halinde düzenli ve göze hoş olacak şekilde yazmak istediniz ve bunun için bir etiket arıyorsunuz. Tam olarak buna benzer problemleri çözmek için kullanılan Listeleme etiketi aşağıda vereceğimiz örnekle kafanızda da tam olarak oturacak.

Web Sitesi içinde gruplanması gereken verileri sıralı bir şekilde alt alta sıralama, yan yana sıralama işlemi yaparak kullanıcılara hoş bir görüntü sağlamanızı sağlamaktadır. Sıralama verileri açısından kullanıcılar ve ayrıca arama motorları optimizasyonu için de gerçek anlamda faydalı olduğunu belirtmek isterim.

Listeleme Çeşitleri Nelerdir?

Listeleme çeşitleri olarak sıralı listeleme (numaralı), sırasız listeleme (nokta), iç içe listeleme olarak 3 bölüme ayrılır.

Sıralı Listeleme: Sıralı listeleme de listelenen elemanlar 1’den başlayarak maddelerin başlarında olacak şekilde 1’er 1’er artarak 1. 2. 3. … diye gitmektedir. Aşağıdaki bir örnekle gösteriyor olacağım.

Örnek;

  1. Listeleme Elemanı 1
  2. Listeleme Elemanı 2
  3. Listeleme Elemanı 3

Kaynak Kodu;

<ol>
 	<li>Listeleme Elemanı 1</li>
 	<li>Listeleme Elemanı 2</li>
 	<li>Listeleme Elemanı 3</li>
</ol>

 

Sırasız Listeleme: Sırasız listeleme de de kullanım herhangi bir önceliği olmayan maddelerde olmalıdır. Aşağıda örneğimiz mevcuttur.

Örnek;

  • Sırasız Listeleme 1
  • Sırasız Listeleme 2
  • Sırasız Listeleme 3

Kaynak Kodu;

<ul>
 	<li>Sırasız Listeleme 1</li>
 	<li>Sırasız Listeleme 2</li>
 	<li>Sırasız Listeleme 3</li>
</ul>

 

İç İçe Listeleme: Kategorilerin listelenmesinden sonra alt kategorilerin yerleştirilmesi şekilde oluşan listeleme şekline iç içe listeleme denilmektedir. Açıklayıcı ve düzenli görünümünden dolay tercih edilmektedir. Aşağıdaki örneği inceleyebilirsiniz.

Örnek;

  • Kategori 1
    • Alt Kategori 1.1
    • Alt Kategori 1.2
  • Kategori 2
    • Alt Kategori 2.1
  • Kategori 3
    • Alt Kategori 3.1
    • Alt Kategori 3.2
    • Alt Kategori 3.3

Kaynak Kodu:

<ul>
   <li>
      Kategori 1
      <ul>
         <li>Alt Kategori 1.1</li>
         <li>Alt Kategori 1.2</li>
      </ul>
   </li>
   <li>
      Kategori 2
      <ul>
         <li>Alt Kategori 2.1</li>
      </ul>
   </li>
   <li>
      Kategori 3
      <ul>
         <li>Alt Kategori 3.1</li>
         <li>Alt Kategori 3.2</li>
         <li>Alt Kategori 3.3</li>
      </ul>
   </li>
</ul>

 

Html Listeleme Örneği;

Listelemek istediğimiz örnek içerikleri bir bilgisayar parçası satan bir işletmeden baz alalım. Bilgisayarcının çeşitli kategoride farklı farklı sattığı parçalar olabilir buda düzenli olmayan bir listeleme yapısında incelerken konudan kopmanızı veya sıkılmanızı sağlayabilir. Html listeleme de genel olarak aşağıdaki gibidir.

Örnek düzgün ve anlaşılır yapıda bilgisayar parçaları satan bir işletmenin yapısını kuralım;

  • Ana Kart
    1. MSI
    2. ASUS
    3. Gigabyte
  • İşlemci
    1. Intel
    2. AMD
  • Ekran Kartı
    1. Zotac
    2. Asus
    3. ATI
    4. Nvidia
  • Ram
    1. Kingstone
    2. Corsair
    3. Gskill
  • Soğutucular
    1. Intel
    2. CoolMaster

Kaynak Kodu:

<ul>
   <li>
      <strong>Ana Kart</strong>
      <ol>
         <li>MSI</li>
         <li>ASUS</li>
         <li>Gigabyte</li>
      </ol>
   </li>
   <li>
      <strong>İşlemci</strong>
      <ol>
         <li>Intel</li>
         <li>AMD</li>
      </ol>
   </li>
   <li>
      <strong>Ekran Kartı</strong>
      <ol>
         <li>Zotac</li>
         <li>Asus</li>
         <li>ATI</li>
         <li>Nvidia</li>
      </ol>
   </li>
   <li>
      <strong>Ram</strong>
      <ol>
         <li>Kingstone</li>
         <li>Corsair</li>
         <li>Gskill</li>
      </ol>
   </li>
   <li>
      <strong>Soğutucular</strong>
      <ol>
         <li>Intel</li>
         <li>CoolMaster</li>
      </ol>
   </li>
</ul>

 

HTML Listeleme Etiketi
Etiketlendi: