HTML Listeler – Tasarım Kodlama
HTML

HTML Listeler

Listeler, birbirleriyle net bir şekilde ilişkilendirilmeleri ve okunmaları kolay olması için ilgili bilgi parçalarını bir arada gruplandırmak için kullanılır. Modern web geliştirmede listeler, genellikle gezinme(menü) ve genel içerik için kullanılan en önemli öğelerdir.

HTML Listeler, iyi yapılandırılmış, daha erişilebilir, bakımı kolay bir belge oluşturmaya yardımcı oldukları için yapısal açıdan iyidir. CSS stilleri ekleyebileceğiniz özel öğeler sağladıkları için de kullanışlıdırlar. Son olarak, anlamsal olarak doğru listeler, ziyaretçilerin web sitenizi okumasına yardımcı olur ve sayfalarınızın güncellenmesi gerektiğinde bakımı basitleştirir.

HTML Liste Türleri

HTML’de üç liste türü vardır:

  • sırasız liste(UL) – belirli bir sıra olmadan bir dizi ilgili öğeyi gruplamak için kullanılır.
  • sıralı liste(OL) – bir dizi ilgili öğeyi belirli bir sırayla gruplamak için kullanılır.
  • açıklama listesi(DL) – terimler ve tanımlar gibi ad / değer çiftlerini görüntülemek için kullanılır.

Her liste türünün bir web sayfasında belirli bir amacı ve anlamı vardır.

HTML Sırasız Listesi (Unordered List)

Sırasız bir liste <ul> etiketiyle başlar. Her liste öğesi <li> etiketiyle başlar.

Liste öğeleri varsayılan olarak madde işaretleriyle (küçük siyah daireler) işaretlenecektir:

Çıktı:

html liste örnekleri 1

Örnek:

Çıktı:

HTML Liste örnekleri 3

HTML Liste örnekleri 3

HTML  Sıralı Listesi (Ordered List)

Sıralı bir liste <ol> etiketiyle başlar. Her liste öğesi <li> etiketiyle başlar.

Liste öğeleri varsayılan olarak numaralarla işaretlenecektir:

Çıktı:

html liste örnekleri 2

Örnek:

Çıktı:

HTML liste örnekleri 4

 

HTML Açıklama Listeleri (Description List)

HTML ayrıca açıklama listelerini de destekler.

Bir açıklama listesi, her terimin açıklamasını içeren bir terim listesidir.

<dl> etiketi açıklama listesini, <dt> etiketi terimi (adı) ve <dd> etiketi her terimi açıklar:

Çıktı:

dt list html örnekleri

HTML Liste Örnekleri

Örnek 1:

 

Örnek 2:

 

Örnek 3:

 

Örnek 4:

 

 

 

 

 

 

 

Yorum bırak