HTML Listeleri: Web Sayfalarınızı Düzenleyin

Bu yazının kısa özetini dinleyebilirsin.

Web geliştirme dünyasında içerik ne kadar önemliyse, o içeriğin sunumu da o kadar değerlidir. Kullanıcıların sayfayı tararken aradıklarını hızlıca bulabilmesi için listeler vazgeçilmezdir. HTML listeleri temel olarak iki ana başlık altında inceleyebiliriz: Sıralı Listeler ve Sırasız Listeler.

Bu rehberde, <ul>, <ol> etiketlerinin kullanımını, liste stillerini nasıl değiştirebileceğinizi ve SEO dostu listeler oluşturmanın inceliklerini öğreneceksiniz.

İçindekiler

1. Sıralı Listeler (Ordered Lists)

Eğer maddelerinizin belirli bir oluş sırasını, öncelik durumunu veya adım adım bir süreci takip etmesi gerekiyorsa sıralı listeler en doğru tercihtir.

Temel Kullanım: `<ol>` Etiketi

Sıralı listeler, maddelere ardışık numaralar vermek için kullanılır ve <ol> (Ordered List) etiketi ile oluşturulur. Her bir liste elemanı ise <li> etiketi içerisine yazılır.

Örnek Senaryo: “Gerçek tereyağı nasıl anlaşılır?” sorusuna verilecek cevaplar belirli bir sıra veya maddeleme gerektirebilir.

HTML

<p>Gerçek <b>tereyağı</b> nasıl anlaşılır?</p>
<ol>
  <li>Oda sıcaklığında tamamen erimez</li>
  <li>Suyun içinde tek parça halinde çözünür</li>
  <li>Tereyağı rengi sarı ya da beyaz olabilir</li>
</ol>

Bu kodun çıktısı şu şekilde görünecektir:

Sıralama Türünü Değiştirmek (`type` Özelliği)

Standart olarak sıralı listeler 1, 2, 3 şeklinde rakamlarla başlar. Ancak, type özelliğini kullanarak bu sıralamayı Romen rakamlarına veya alfabetik harflere dönüştürebilirsiniz.

Romen Rakamı İle Sıralama (type="I"): Liste başındaki sıralandırmayı Romen rakamı şeklinde yapmak için kullanılır.HTML<ol type="I"> <li>Javascript</li> <li>C#</li> <li>Php</li> </ol> Çıktı: I. Javascript, II. C#, III. Php.
Alfabetik Sıralama (type="A"): Liste elemanlarını harf sırasına göre (A, B, C) listelemek için kullanılır.HTML<ol type="A"> <li>Javascript</li> <li>C#</li> <li>Php</li> </ol> Çıktı: A. Javascript, B. C#, C. Php.

2. Sırasız Listeler (Unordered Lists)

Maddeler arasında bir öncelik sırasının olmadığı, sadece gruplamanın önemli olduğu durumlarda sırasız listeler kullanılır.

Temel Kullanım: `<ul>` Etiketi

Sırasız listeler herhangi bir numaralandırma olmadan oluşturulur ve <ul> (Unordered List) etiketi kullanılır. Tıpkı sıralı listelerde olduğu gibi, liste elemanları satırı kaplayacak şekilde blok etiket formundadır.

Örnek:

HTML

<ul>
  <li>Çay</li>
  <li>Türk Kahvesi</li>
  <li>Süt</li>
</ul>

Bu kodun çıktısı şu şekilde görünecektir:

Liste İşaretlerini Özelleştirme (`list-style-type`)

Sırasız listelerin başındaki simgeleri değiştirebilir, kare veya içi boş daire yapabilir, hatta tamamen kaldırabilirsiniz.

İşaretleri Kaldırmak (none): Özellikle menü yapımlarında sıkça tercih edilen bu yöntemle liste başındaki simgeler silinebilir. HTML <ul style="list-style-type: none"> ... </ul>
Şekli Değiştirmek (square, circle, disc): Liste başındaki simgeyi kare yapmak için square değerini kullanabilirsiniz. HTML

<ul style="list-style-type:square"> 
  <li>Telefon</li> 
  <li>Bilgisayar</li> 
  <li>Yazıcı</li> 
</ul>

3. İleri Seviye Liste Kullanımları (Tanım ve İç İçe Listeler)

Tanım Listeleri (`<dl>`, `<dt>`, `<dd>`)

Özellikle “Terim – Açıklama” formatındaki içerikler (örneğin bir sözlük veya SSS sayfası) için Tanım Listeleri kullanılır.

<dl> (Description List): Listeyi başlatır.
<dt> (Description Term): Tanımlanacak terimi belirtir.
<dd> (Description Details): Terimin açıklamasını içerir.

Liste İçinde Liste (Nested Lists)

Bir maddenin altına alt maddeler eklemek istediğinizde “Nested List” yapısını kullanabilirsiniz. Bunu yapmak için, bir <li> etiketini kapatmadan içine yeni bir <ul> veya <ol> açmanız yeterlidir.

Menü ve Navigasyon Listeleri

Web sitelerinin üst kısmında gördüğünüz menüler teknik olarak genellikle Sırasız Listelerdir (<ul>). CSS kullanılarak list-style-type: none ile maddeler kaldırılır ve display: inline veya flex özellikleri ile yan yana getirilerek modern menüler oluşturulur.

Örnek

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Liste Çeşitleri</title>
</head>

<body>

    <h1>HTML Liste Örnekleri</h1>

    <h2>1. Sıralı Listeler (&lt;ol&gt;)</h2>
    <p>Maddelerin belirli bir sırayı takip ettiği listelerdir.</p>

    <h3>a. Varsayılan Sayısal Sıralama (1, 2, 3)</h3>
    <ol>
        <li>Oda sıcaklığında tamamen erimez</li>
        <li>Suyun içinde tek parça halinde çözünür</li>
        <li>Tereyağı rengi sarı ya da beyaz olabilir</li>
    </ol>

    <h3>b. Romen Rakamı ile Sıralama (I, II, III)</h3>
    <ol type="I">
        <li>Javascript</li>
        <li>C#</li>
        <li>Php</li>
    </ol>

    <h3>c. Harf ile Sıralama (A, B, C)</h3>
    <ol type="A">
        <li>Javascript</li>
        <li>C#</li>
        <li>Php</li>
    </ol>

    <hr>

    <h2>2. Sırasız Listeler (&lt;ul&gt;)</h2>
    <p>Sıralamanın önemli olmadığı, sadece gruplamanın yapıldığı listelerdir.</p>

    <h3>a. Varsayılan Daire (Disc)</h3>
    <ul>
        <li>Çay</li>
        <li>Türk Kahvesi</li>
        <li>Süt</li>
    </ul>

    <h3>b. Kare İşaretli Liste (Square)</h3>
    <ul style="list-style-type: square;">
        <li>Telefon</li>
        <li>Bilgisayar</li>
        <li>Yazıcı</li>
    </ul>

    <h3>c. İşaretsiz Liste (None)</h3>
    <ul style="list-style-type: none;">
        <li>Çay (İşaretsiz)</li>
        <li>Türk Kahvesi (İşaretsiz)</li>
        <li>Süt (İşaretsiz)</li>
    </ul>

    <hr>

    <h2>3. İç İçe Listeler (Nested Lists)</h2>
    <p>Bir liste maddesinin altına başka bir liste açmak için kullanılır.</p>

    <ol>
        <li>Frontend Teknolojileri
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend Teknolojileri
            <ol type="a">
                <li>Node.js</li>
                <li>Python</li>
                <li>PHP</li>
            </ol>
        </li>
    </ol>

    <hr>

    <h2>4. Tanım Listeleri (&lt;dl&gt;)</h2>
    <p>Terim ve açıklama ilişkisi olan içerikler için kullanılır.</p>

    <dl>
        <dt><strong>HTML</strong></dt>
        <dd>HyperText Markup Language - Web sayfalarının iskeletini oluşturur.</dd>
        <dt><strong>CSS</strong></dt>
        <dd>Cascading Style Sheets - Web sayfalarını görsel olarak şekillendirir.</dd>
    </dl>


</body>

</html>

Bu kodun çıktısı şu şekilde görünecektir:

Özet ve Sonuç

HTML listeleri, içeriğinizi yapılandırmanın en temel ve güçlü yoludur. Bir sürecin adımlarını anlatıyorsanız Sıralı Listeleri (<ol>), özelliklerin veya malzemelerin listesini veriyorsanız Sırasız Listeleri (<ul>) tercih etmelisiniz. Liste elemanlarının başındaki işaretleri type veya CSS style özellikleri ile içeriğinizin tasarımına uygun hale getirebileceğinizi unutmayın.

Doğru liste yapısını kullanmak sadece görsel bir tercih değil, aynı zamanda arama motorlarının içeriğinizi daha iyi anlamasını sağlayan önemli bir SEO kriteridir.

Etiketler: HTML Listeler

Paylaş:

Tayyip Bölük

Merhaba, ben Tayyip Bölük. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.