HTML İçerik Yapılandırma Rehberi: Başlık, Liste ve Bağlantı

Konu Girişi

Web sayfaları, görsel olarak ne kadar zenginleştirilirse zenginleştirilsin, temelde bilgiyi organize edilmiş metinler aracılığıyla sunan dijital dokümanlardır.

İçerik Metin Yapılandırma Etiketleri grubu, ham veri yığınlarını ( kelimeler, cümleler, paragraflar ) anlamlı, okunabilir ve işlevsel bir yapıya dönüştüren HTML'in en temel yapı taşlarıdır.

Bilginin Organizasyonu ve Hiyerarşik Düzen

Bu etiket grubunun birincil görevi, içeriğin nasıl yapılandırıldığını ve okuyucuya hangi sırayla sunulacağını belirlemektir.

Bir web sayfası, tıpkı bir gazete veya akademik makale gibi, belirli bir hiyerarşiye ihtiyaç duyar.

Başlıklar ( h1-h6 ), paragraflar ( p ) ve listeler ( ul, ol ), içeriğin bir "bilgi duvarı" gibi görünmesini engeller; bunun yerine, içeriği sindirilebilir parçalara böler.

Bu hiyerarşi, kullanıcının sayfanın ana konusunu ( h1 ) bir bakışta anlamasını, alt başlıklar ( h2, h3 ) sayesinde ilgilendiği bölüme

hızla odaklanmasını sağlayan mimari bir haritadır.

Semantik Değer: Kullanıcılar ve Makineler İçin Anlam

Metin yapılandırma etiketleri, sadece görsel bir düzen sağlamakla kalmaz, aynı zamanda içeriğin semantik değerini ortaya koyar.

Bu, hem son kullanıcılar hem de arama motorları için hayati önem taşır.

Arama Motorları (SEO): Google botları, bir sayfanın ne hakkında olduğunu anlamak için bu etiketlere bakar.

Bir metnin <h1> etiketi içinde olması, o metnin sayfanın en önemli konusu olduğunu; bir metnin <li> içinde olması, onun diğer maddelerle ilişkili bir veri parçası olduğunu bildirir.

Yapılandırılmamış metin, arama motorları için anlamsızdır; doğru yapılandırılmış metin ise SEO başarısının temelidir.

Erişilebilirlik (Accessibility): Görme engelli kullanıcılar için sayfayı seslendiren ekran okuyucular, bu etiketleri birer navigasyon aracı olarak kullanır.

Kullanıcılar, başlıklar arasında atlayarak içerik hakkında fikir sahibi olurlar.

Bağlantı ve Etkileşim Ağı Bu grubun bir diğer kritik üyesi olan bağlantı etiketi ( a ), metinleri statik olmaktan çıkarıp interaktif hale getirir.

Web'in "World Wide Web" olarak adlandırılmasının temel nedeni, metinlerin birbirine bağlanabilme yeteneğidir.

Bu etiketler, izole edilmiş metinleri devasa bir bilgi ağının parçası haline getirir.

Hiyerarşik Düzen ve Seviyeler

HTML başlık etiketleri ( <h1>'den <h6>'ya kadar ), bir web sayfasındaki içeriğin anlamsal hiyerarşisini ve

bilgi mimarisini tanımlayan en temel yapı taşlarıdır.

Bu etiketler, tıpkı bir kitabın içindekiler bölümü veya bir akademik makalenin anahatları gibi, içeriğin iskeletini oluşturur.

HTML, önem derecesine göre sıralanmış altı farklı başlık seviyesi sunar:

<h1> (Birincil Başlık): Sayfanın en üst seviye ve en önemli başlığıdır ve sayfanın ne hakkında olduğunu tek bir ifadeyle özetler.

Tıpkı bir gazetenin manşeti veya bir kitabın adı gibidir.

<h2> (İkincil Başlıklar): Ana konuyu destekleyen temel bölümleri veya ana alt başlıkları temsil eder.

<h3> - <h6> ( Alt Başlıklar ): Bu etiketler, <h2> altındaki konuları daha küçük parçalara bölmek ve içeriği derinlemesine detaylandırmak için kullanılır.

<h6> seviyesi ise, en düşük öneme sahip başlık seviyesidir.

SEO ve Erişilebilirlik İçin Kritik Rolü

Başlık etiketlerinin doğru kullanımı, sadece görsel bir düzenleme değil, aynı zamanda teknik bir zorunluluktur.

Arama Motoru Optimizasyonu (SEO): Google ve diğer arama motoru botları, sayfanın konusunu anlamak için başlık etiketlerini tarar.

Anahtar kelimelerin <h1> veya <h2> içerisinde yer alması, arama motoruna güçlü bir alaka sinyali gönderir.

Erişilebilirlik (Accessibility): Görme engelli kullanıcılar, web sayfalarını gezmek için ekran okuyucular kullanır.

Bu teknolojiler, kullanıcının doğrudan bir başlıktan diğerine atlamasına olanak tanır.

Eğer başlıklar hiyerarşik olarak doğru kullanılmazsa, bu kullanıcılar için sayfa yapısı anlaşılamaz hale gelir.

En İyi Kullanım Kuralları (Best Practices)

Profesyonel ve standartlara uygun bir web sayfası için şu kurallara dikkat edilmelidir:

Tek <h1> Kuralı: Her sayfada, o sayfanın ana konusunu belirten yalnızca bir tane <h1> etiketi bulunmalıdır.

Birden fazla kullanımı, arama motorlarının odak noktasını anlamasını zorlaştırabilir.

Sıralı Hiyerarşi: Başlıklar, boyutlarına göre değil, anlam sırasına göre kullanılmalıdır.

Hiyerarşiyi bozarak atlama yapılmamalıdır; yani <h2> etiketinden sonra doğrudan <h4> gelmemelidir.

Görünüm İçin Değil, Anlam İçin: Asla bir metni sırf "büyük ve kalın" görünsün diye başlık etiketi içine almamalısınız.

Görsel boyutlandırma işlemleri CSS ( font-size ) ile yapılmalı, HTML etiketleri sadece içeriğin yapısını belirtmek için kullanılmalıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Başlıklar ve Paragraflar</title>
</head>
<body>

    <h1>HTML Öğrenme Rehberi</h1>
    
    <section>
        <h2>Metin Yapılandırma</h2>
        
        <h3>Başlık Hiyerarşisi</h3>
        <p>Bu başlık, ana konumuzun bir alt başlığıdır (h2).</p>

        <h4>Vurgulama Etiketleri</h4>
        <p>Bu başlık, h3'ün de alt başlığıdır. Hiyerarşi bu şekilde ilerler.</p>
    </section>

</body>
</html>

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

<head>
    <meta charset="UTF-8">
    <title>Başlık Hiyerarşisi Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="article-box">

        <h1>Modern Web Tasarımı</h1>

        <p>
            Web tasarımı sürekli değişen ve gelişen bir alandır.
            Başarılı bir tasarım için temel prensipleri anlamak gerekir.
        </p>

        <h2>1. Renk Teorisi</h2>
        <p>Renkler, kullanıcıların duygularını ve davranışlarını doğrudan etkiler.</p>

        <h3>1.1. Kontrastın Önemi</h3>
        <p>Okunabilirlik için metin ve arka plan arasındaki kontrast oranı yüksek olmalıdır.</p>

        <h2>2. Tipografi (Yazı Tipi)</h2>
        <p>Doğru font seçimi, sitenin karakterini yansıtır.</p>

        <h3>2.1. Hiyerarşi</h3>
        <p>Başlıklar ve paragraflar arasındaki boyut farkı, okuyucunun gözünü yönlendirir.</p>

    </div>
</body>

</html>

/* Genel Sayfa Düzeni */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.article-box {
    background-color: #fff;
    padding: 40px;
    width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* H1: Sayfanın EN ÖNEMLİ Başlığı */
h1 {
    color: #2c3e50;
    /* Koyu bir renk */
    font-size: 2.5em;
    /* En büyük boyut */
    text-align: center;
    border-bottom: 2px solid #3498db;
    /* Altına çizgi çekerek vurgula */
    padding-bottom: 15px;
    margin-bottom: 30px;
}

/* H2: Ana Bölüm Başlıkları */
h2 {
    color: #e67e22;
    font-size: 1.8em;
    margin-top: 30px;
    border-left: 5px solid #e67e22;
    padding-left: 10px;
}

/* H3: Alt Konu Başlıkları */
h3 {
    color: #7f8c8d;
    /* Daha soluk gri/mavi */
    font-size: 1.3em;
    margin-top: 20px;
}

/* Paragraf Stili */
p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

Yapısal İşlev ve Okunabilirlik

<p> etiketi, bir HTML belgesindeki metinleri "mantıksal bloklara ayırmak" ve yapısal olarak bir "paragraf olduğunu tanımlamak" için kullanılan temel elementtir.

Web içeriğinin okunabilirliğini sağlayan en önemli yapı taşıdır.

Bir kitapta veya makalede olduğu gibi, web sayfalarında da metinler tek bir devasa blok halinde sunulmaz.

<p> etiketi, ilişkili cümleleri bir araya getirerek bir düşünce bütünlüğü oluşturur.

Blok Seviyesi (Block-level): <p> etiketi bir blok seviye bir elementtir.

Bu, tarayıcının paragrafı her zaman yeni bir satırdan başlattığı ve paragraf bittiğinde otomatik olarak bir sonraki içeriği alt satıra ittiği anlamına gelir.

Otomatik Boşluk (Margin): Tarayıcılar, <p> etiketiyle tanımlanan metinlerin altına ve üstüne varsayılan olarak bir miktar boşluk ekler.

Bu "beyaz boşluk", metnin nefes almasını sağlar ve kullanıcıların içeriği gözleriyle takip etmesini kolaylaştırır.

Yaygın Hata: <br> ve <p> Ayrımı (Anti-Pattern)

Web geliştirmeye yeni başlayanların sıkça yaptığı bir hata, paragraflar arasında boşluk bırakmak için art arda <br> etiketi kullanmaktır fakat bu,

semantik açıdan yanlıştır.

<br> Etiketi: Sadece satırı kırmak içindir.

<p> Etiketi: Düşünceyi gruplamak içindir.

Neden Önemli? Eğer boşluk bırakmak için <br> kullanırsanız, CSS ile paragraflar arası mesafeyi yönetemezsiniz.

Ancak <p> kullanırsanız, tüm paragrafların aralığını CSS ile tek bir yerden kontrol edebilirsiniz.

Erişilebilirlik ve SEO Katkısı

<p> etiketinin doğru kullanımı, sadece görsel düzen için değil, makinelerin içeriği anlamasıiçin de kritiktir.

Ekran Okuyucular: Ekran okuyucular, <p> etiketinin sonuna geldiğinde kısa bir duraksama verir.

Bu, dinleyicinin bir düşüncenin bittiğini ve yeni bir paragrafın başladığını anlamasını sağlar.

SEO: Arama motorları, <p> etiketi içindeki metni sayfanın asıl içeriği olarak değerlendirir.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraf Örneği</title>
</head>

<body>
    <h2>Giriş</h2>

    <p>
        Bu, metin içeriğimizin ilk paragrafıdır. HTML'de <p> etiketini kullanmak,
        metnimize semantik bir yapı kazandırır ve okunabilirliği artırır.
    </p>

    <p>
        İkinci paragrafımız başlıyor. Tarayıcılar, bu iki paragraf arasına otomatik
        olarak dikey boşluk (margin) ekleyecektir.
    </p>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>Paragraf Stili Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="article-container">
        <h2>Tipografinin Gücü</h2>

        <p class="intro">
            Web tasarımında metin, içeriğin kralıdır. Ancak bu metnin nasıl sunulduğu, en az içeriğin kalitesi kadar
            önemlidir. İyi bir paragraf yapısı, okuyucuyu yormadan içeriğe çeker.
        </p>

        <p class="drop-cap">
            İyi yapılandırılmış bir paragraf, doğru satır aralığı (line-height) ve harf boşlukları ile başlar. Eğer
            satırlar birbirine çok yakınsa, okuyucunun gözleri yorulur ve satır takibi zorlaşır. 
        </p>

        <p class="highlight-box">
            <strong>İpucu:</strong> Paragraflar arasında boşluk bırakmak için asla art arda <code>&lt;br&gt;</code>
            etiketi kullanmayın. Bunun yerine, CSS'in <span class="mark-css-property">margin: bottom;</span>özelliğini kullanarak paragraflarınıza
            nefes alma alanı bırakın.
        </p>

        <p>
            Sonuç olarak, metinleri bloklara ayırmak, kullanıcının bilgiyi sindirmesini kolaylaştırır. Uzun metin
            duvarları yerine, kısa ve öz paragraflar tercih edilmelidir.
        </p>
    </div>

</body>

</html>

body {
    font-family: 'Georgia', serif;
    background-color: #fdfbf7;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.article-container {
    background-color: #fff;
    width: 600px;
    padding: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}

h2 {
    font-family: 'Segoe UI', sans-serif;
    color: #2c3e50;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* --- PARAGRAF GENEL STİLİ --- */
p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
}

/* ÖZEL DURUM 1: Giriş Paragrafı (Lead Paragraph) */
.intro {
    font-size: 1.25em;
    color: #555;
    font-style: italic;
    opacity: 0.9;
}

/* ÖZEL DURUM 2: Vurgulu Paragraf */
.highlight-box {
    background-color: #e8f6f3;
    padding: 20px;
    border-left: 5px solid #1abc9c;
    border-radius: 4px;
    color: #16a085;
}

.drop-cap::first-letter {
    font-size: 3.5em;
    float: left;
    margin-right: 10px;
    margin-top: -5px;
    line-height: 0.8;
    color: #e67e22;
    font-weight: bold;
}

Konuya Giriş Açıklaması

<a> ( Anchor - Çapa ) etiketi, HTML’in ve genel anlamda internetin temel çalışma prensibi olan "Hypertext" kavramının somutlaşmış halidir.

Bu etiket, web sayfalarını izole edilmiş dijital belgeler olmaktan çıkarıp, birbirine bağlı devasa bir bilgi ağına dönüştüren mekanizmadır.

Kullanıcıların bulundukları sayfadan başka bir web sitesine, site içindeki farklı bir sayfaya, aynı sayfanın alt bölümlerine, indirilebilir bir dosyaya veya harici bir uygulamaya ( e-posta telefon araması vb. ) geçiş yapmasını sağlayan "köprüleri" tanımlar.

Eğer <a> etiketi olmasaydı, internette gezinmek için her bir sayfanın adresini tek tek elle yazmak zorunda kalırdık; bu da web'in etkileşimli doğasını tamamen ortadan kaldırırdı.

Hedefin Belirlenmesi ve href Niteliğinin Çok Yönlülüğü

Bir bağlantının işlevsel olabilmesi için olmazsa olmaz tek bir kural vardır: href niteliğinin kullanılması.

Bu nitelik, oluşturulan köprünün "nereye" gideceğini belirleyen teknik adrestir.

Bu adresleme yapılırken geliştiricilere geniş bir esnekliksunulur.

Örneğin: Başka bir web sitesine yönlendirme yapmak için Mutlak URL ( [https://www.google.com](https://www.google.com) ) kullanılırken, kendi siteniz içindeki sayfalar arasında hızlı geçişler için Göreli URL ( /hakkimizda.html ) tercih edilir.

href niteliği sadece sayfalar arası geçişle sınırlı değildir; #bolum-2 gibi bir yapı kullanılarak "Sayfa İçi Çapa" oluşturulabilir ve kullanıcı sayfanın belirli bir noktasına kaydırılabilir.

Ayrıca, web protokollerinin ötesine geçerek mailto: ile kullanıcının varsayılan e-posta uygulamasını veya tel: ile mobil cihazlarda arama ekranını tetikleyerek cihazın yerel özellikleriyle etkileşime girebilir.

Kullanıcı Deneyimi, SEO ve Erişilebilirlik

Bağlantıların nasıl davranacağı ve nasıl tanımlandığı, kullanıcı deneyimi ve Arama Motoru Optimizasyonu açısından kritik bir rol oynar.

target niteliği, bağlantının açılma davranışını kontrol eder; varsayılan olarak aynı sekmede açılırken, site dışı linklerde genellikle yeni sekme tercih edilir.

Teknik ayarların ötesinde, <a> ve </a> etiketleri arasına yazılan metin, hem arama motorları hem de ekran okuyucular için hayati önem taşır.

"Tıklayın" gibi bağlamdan kopuk ifadeler yerine, "HTML Eğitim Setini İncele" gibi açıklayıcı metinler kullanmak, hedef sayfanın

içeriğini anlamlandırmayı sağlar ve erişilebilirliği maksimize eder.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bağlantı Örneği</title>
</head>

<body>
    <p>
        Daha fazla bilgi için
        <a href="https://www.google.com" target="_blank" title="Google'ı yeni sekmede açar.">Google Arama Motorunu</a>
        ziyaret edebilirsiniz.
    </p>

    <p>
        Sayfa içi bağlantı örneği:
        <a href="#alt-bilgi">Alt Bilgiye Git</a>
    </p>

    <h2 id="alt-bilgi">Sayfanın Alt Bilgisi</h2>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>Link (Anchor) Örneği</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="link-card">
        <h3>Bağlantı Türleri</h3>

        <p>
            Web geliştirme hakkında daha fazla bilgi almak için
            <a href="https://developer.mozilla.org" target="_blank" title="MDN Web Docs'a gider" class="text-link">
                MDN Dokümantasyonu
            </a> sayfasını ziyaret edebilirsiniz.
            (Bu link yeni sekmede açılır).
        </p>

        <p>
            Hemen kaydolun ve avantajlardan yararlanın:
        </p>
        <a href="/kayit-ol" class="btn-link">Ücretsiz Hesap Oluştur</a>

        <div class="contact-section">
            Sorularınız mı var?
            <a href="mailto:destek@ornek.com" class="mail-link">destek@ornek.com</a>
            adresine yazın.
        </div>
    </div>
</body>

</html>

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f0f2f5;
    padding: 40px;
    display: flex;
    justify-content: center;
}

.link-card {
    background-color: #fff;
    padding: 30px;
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

h3 {
    color: #2c3e50;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-top: 0;
}

p {
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

/* 1. STANDART METİN LİNKİ */
a.text-link {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

a.text-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* 2. BUTON GÖRÜNÜMLÜ LİNK (Call to Action) */
a.btn-link {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
    box-sizing: border-box;
}

a.btn-link:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

/* 3. İLETİŞİM LİNKİ (Mailto) */
.contact-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
    font-size: 0.9em;
    text-align: center;
}

a.mail-link {
    color: #7f8c8d;
    text-decoration: none;
}

a.mail-link:hover {
    color: #2c3e50;
}

Genel Açıklama

<ul> etiketi, web sayfalarında maddeler arasındaki sıralamanın veya öncelik derecesinin önemli olmadığı içerik gruplarını tanımlamak için kullanılan yapısal bir elementtir.

Bu etiket, bir alışveriş listesi, bir makalenin özellikler bölümü veya bir navigasyon menüsü gibi, öğelerin yer değiştirmesinin anlamı bozmadığı durumlar için idealdir.

<ul> etiketi, tek başına bir içerik barındırmaz; bunun yerine, listenin her bir maddesini temsil eden <li> etiketlerini kapsayan bir "ebeveyn" görevi görür.

Yani, <ul> listeyi başlatır, <li> ise maddeleri oluşturur.

Görsel Sunum ve Yapısal Esneklik

Tarayıcılar, <ul> etiketiyle oluşturulan listeleri varsayılan olarak her maddenin başında bir madde işareti olacak şekilde ve sol taraftan girintili olarak görüntüler.

Ancak bu varsayılan görünüm, <ul> etiketinin kullanım alanını sınırlamaz.

Modern web tasarımında bu etiket, CSS ile birleştiğinde en çok yönlü araçlardan birine dönüşür.

Özellikle web sitelerinin üst kısmında yer alan navigasyon menüleri, aslında CSS ile madde işaretleri kaldırılmış ( list-style: none ) ve yan yana dizilmiş <ul> listeleridir.

Bu nedenle, <ul> etiketi sadece basit maddeler için değil, web sitesinin iskeletindeki hemen hemen tüm

"gruplandırılmış linkler ve öğeler" için standart bir mimari çözümdür.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sırasız Liste Örneği</title>
</head>
<body>

    <h2>Alışveriş Listesi</h2>
    
    <ul>
        <li>Elma</li>
        <li>Süt</li>
        <li>Ekmek</li>
        <li>Peynir</li>
    </ul>

</body>
</html>

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

<head>
    <meta charset="UTF-8">
    <title>UL Navigasyon Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

    <nav class="navbar">
        <ul class="menu">
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Hizmetler</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>

    <p>
        Yukarıdaki menü aslında bir <code>&lt;ul&gt;</code> listesidir.
        CSS ile noktalar kaldırılmış ve yan yana dizilmiştir.
    </p>

</body>

</html>

body {
    font-family: 'Segoe UI', sans-serif;
    padding: 40px;
    background-color: #f4f4f4;
}


.navbar {
    background-color: #ffffff;
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: fit-content;

}

ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

ul.menu li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

ul.menu li a:hover {
    background-color: #3498db;
    color: white;
}

p {
    margin-top: 20px;
    color: #666;
}

Genel Açıklama

<ol> etiketi, web sayfalarında maddeler arasındaki sıralamanın, öncelik derecesinin veya takip edilmesi gereken

"adım sırasının kritik olduğu" içerik gruplarını tanımlamak için kullanılan yapısal bir elementtir.

Maddelerin yer değiştirmesinin anlamı bozmadığı sırasız listelerin ( <ul> ) aksine, <ol> etiketinde maddelerin sırası içeriğin mantığını

doğrudan etkiler.

Bu etiket; bir yemek tarifi, bir yazılım kurulum kılavuzu, En Çok Satanlar sıralaması gibi, içeriğin belirli bir akışı takip ettiği durumlar için tasarlanmıştır.

Tıpkı sırasız listelerde olduğu gibi, <ol> etiketi de tek başına metin içeriği barındırmaz; bunun yerine her bir adımı temsil eden <li> etiketlerini kapsayan bir ebeveyn görevi görür.

Tarayıcılar, bu etiketi işlerken varsayılan olarak her maddenin başına otomatik artan ondalık sayılar ( 1., 2., 3...) ekler.

Ancak bu numaralandırma stili, type niteliği veya CSS kullanılarak değiştirilebilir; ihtiyaca göre harfler ( A, B, C ) veya Roma rakamları

( I, II, III ) kullanılabilir.

Bu yapı, okuyucuya içeriğin bir başlangıcı, gelişimi ve sonucu olduğu mesajını görsel ve anlamsal olarak iletir.

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

<head>
    <meta charset="UTF-8">
    <title>OL Sıralama Örneği</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="leaderboard">
        <h3>Haftanın En Çok Okunanları</h3>

        <ol class="ranking">
            <li>Simyacı - Paulo Coelho</li>
            <li>1984 - George Orwell</li>
            <li>Şeker Portakalı - Jose Mauro de Vasconcelos</li>
            <li>Dönüşüm - Franz Kafka</li>
            <li>Küçük Prens - Antoine de Saint-Exupéry</li>
        </ol>

        <p>
            * Liste satış rakamlarına göre sıralanmıştır.
        </p>
    </div>
</body>

</html>

body {
    font-family: 'Segoe UI', sans-serif;
    padding: 40px;
    background-color: #fdfbf7;
}

.leaderboard {
    background-color: #fff;
    width: 350px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-top: 5px solid #e67e22;
}

h3 {
    color: #d35400;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

ol.ranking {
    list-style-type: decimal-leading-zero;
    color: #e67e22;
    font-weight: bold;
    font-size: 1.1em;
    padding-left: 40px;
}

ol.ranking li {
    padding-left: 10px;
    margin-bottom: 10px;
    color: #333;
    font-weight: normal;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 5px;
}

ol.ranking li:nth-child(1) {
    font-weight: bold;
    color: #2c3e50;
}

p {

    font-size: 0.8em;
    color: #999;
    margin-top: 20px;
}

Genel Açıklama

<li> etiketi, HTML'deki listeleme yapılarının "atomik parçası" ve en temel yapı taşıdır.

Sıralı ( <ol> ) veya sırasız ( <ul> ) olarak tanımlanan herhangi bir listenin içerisindeki her bir bireysel maddeyi temsil eder.

Bir listeyi bir kitaplık rafı olarak düşünürsek; <ul> veya <ol> rafın kendisi, <li> etiketleri ise o rafa dizilen kitaplardır.

Bu etiket olmadan, liste kapsayıcıları boş ve anlamsız kalır.

Bağlamsal Rol ve Kapsayıcı Esnekliği

<li> etiketinin en belirleyici özelliği, bağlamsal bir element olmasıdır.

Tek başına kullanıldığında bir anlam ifade etmez ve web standartlarına aykırıdır; mutlaka bir ebeveyn etiketinin ( <ul>, <ol> veya <menu> ) doğrudan çocuğu olarak liste etiketinin ( <ul>, <ol> veya <menu> ) doğrudan çocuğu olarak kullanılmalıdır.

Tarayıcılar, <li> etiketinin görsel sunumunu, içinde bulunduğu ebeveyn etikete göre otomatik olarak şekillendirir:

Sırasız Listeler ( <ul> ) İçinde:

Tarayıcı, <li> elementini sıranın önemsiz olduğu bir grubun parçası olarak algılar ve maddenin başına varsayılan olarak bir madde işareti ekler.

Sıralı Listeler ( <ol> ) İçinde:

Tarayıcı, <li> elementini bir sürecin veya hiyerarşinin parçası olarak algılar ve maddeleri otomatik olarak numaralandırır.

( 1 , 2 , 3... veya A , B , C... ).

Ayrıca <li>, oldukça esnek bir kapsayıcıdır.

Bir liste öğesinin içine paragraflar , görseller, bağlantılar ve hatta başka bir liste yapısı yerleştirilebilir.

Bu özellik, web sitelerindeki karmaşık açılır menülerin ve kategori ağaçlarının oluşturulmasını sağlayan temel mekanizmadır.

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

<head>
    <meta charset="UTF-8">
    <title>OL Sıralama Örneği</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="leaderboard">
        <h3>Haftanın En Çok Okunanları</h3>

        <ol class="ranking">
            <li>Simyacı - Paulo Coelho</li>
            <li>1984 - George Orwell</li>
            <li>Şeker Portakalı - Jose Mauro de Vasconcelos</li>
            <li>Dönüşüm - Franz Kafka</li>
            <li>Küçük Prens - Antoine de Saint-Exupéry</li>
        </ol>

        <p>
            * Liste satış rakamlarına göre sıralanmıştır.
        </p>
    </div>
</body>

</html>

body {
    font-family: 'Segoe UI', Helvetica, sans-serif;
    background-color: #fdfbf7;
    padding: 40px;
    display: flex;
    justify-content: center;
}

.project-card {
    background-color: #fff;
    width: 500px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-top: 5px solid #2c3e50;
}

h3 {
    color: #2c3e50;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}


ol.phases {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.1em;
    margin-left: 20px;
}

ol.phases>li {
    margin-bottom: 20px;
}


ol.phases ul {
    list-style-type: square;
    font-weight: normal;
    color: #555;
    font-size: 0.9em;
    margin-top: 5px;
    line-height: 1.6;
}

ol.phases ul li {
    padding-left: 5px;
}

.done {
    text-decoration: line-through;
    color: #aaa;
}

Genel Açıklama

HTML'de listeleme denildiğinde akla ilk gelenler madde işaretli ( <ul> ) veya numaralı ( <ol> ) listeler olsa da, web'in bilgi mimarisinde

"Anahtar-Değer" ilişkisine dayalı verileri sunmak için tasarlanmış özel bir yapı daha vardır.

Bu yapı, <dl>, <dt> ve <dd> etiketlerinin birlikteliğinden oluşur.

HTML5 standartlarıyla birlikte, sadece sözlük tanımları için kullanılan "Definition List" kavramı genişletilmiş ve "Description List" adını alarak her türlü terim-açıklama eşleşmesi için standart hale gelmiştir.

Üçlü Yapının Hiyerarşisi ve İşlevi

Bu liste türü, diğerlerinden farklı olarak tek bir öğe (<li>) yerine, birbiriyle ilişkili iki farklı veri parçasını (Terim ve Açıklama) eşleştirmek üzerine kuruludur.

<dl> (Description List): Listenin tamamını kapsayan ana konteynerdir.

Tıpkı <ul> gibi, listenin başladığını ve bittiğini belirtir.

İçerisinde sadece <dt> ve <dd> grupları (veya bunları gruplayan <div>) yer alabilir.

<dt> (Description Term): Tanımlanacak veya açıklanacak olan terimi, başlığı veya soruyu temsil eder.

<dd> (Description Details): Kendisinden hemen önce gelen <dt> etiketindeki terimin tanımını veya verisini içerir.

Semantik Kullanım Alanları ve Görsel Sunum

Bu etiket grubunun kullanım alanı klasik sözlüklerin çok ötesindedir.

Bir ürünün teknik özelliklerini listelerken, bir Sıkça Sorulan Sorular sayfası oluştururken veya bir makalenin meta verilerini sunarken bu yapı semantik olarak en doğru tercihtir.

Tarayıcılar, bu etiketleri varsayılan olarak işlerken <dt> ( Terim ) öğesini satır başına yaslar, <dd> ( Açıklama ) öğesini ise bir alt satıra atarak ve belirgin bir bırakarak görüntüler.

Bu görsel hiyerarşi, okuyucunun başlık ile açıklamayı gözle kolayca ayırt etmesini sağlar.

Ayrıca bu yapı esnektir; tek bir terim birden fazla açıklamaya sahip olabileceği gibi, tersi de mümkündür.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DL Temel Örnek</title>
</head>

<body>
    <h3>Web Terimleri Sözlüğü</h3>
    <p>Aşağıdaki terimler ve tanımları varsayılan tarayıcı stiliyle gösterilmektedir:</p>

    <dl>
        <dt>HTML</dt>
        <dd>Web sayfalarının iskeletini oluşturan işaretleme dilidir.</dd>

        <dt>CSS</dt>
        <dd>Web sayfalarının görsel stilini ve düzenini belirleyen dildir.</dd>

        <dt>JavaScript</dt>
        <dd>Web sayfalarına etkileşim ve dinamizm katan programlama dilidir.</dd>
    </dl>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>DL Özellik Listesi</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="product-card">
        <h3>💻 Teknik Özellikler</h3>

        <dl class="specs">
            <dt>İşlemci</dt>
            <dd>Intel Core i7 12. Nesil</dd>

            <dt>RAM Bellek</dt>
            <dd>16 GB DDR4</dd>

            <dt>Depolama</dt>
            <dd>512 GB NVMe SSD</dd>

            <dt>Ekran Kartı</dt>
            <dd>NVIDIA GeForce RTX 3050</dd>

            <dt>İşletim Sistemi</dt>
            <dd>Windows 11 Home</dd>
        </dl>
    </div>
</body>

</html>

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f7f6;
    padding: 40px;
    display: flex;
    justify-content: center;
}

.product-card {
    background-color: #fff;
    width: 450px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

h3 {
    color: #2c3e50;
    margin-top: 0;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

dl.specs {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px 20px;
    margin: 0;
}

dl.specs dt {
    font-weight: bold;
    color: #34495e;
    text-align: right;
}

dl.specs dd {
    margin: 0;
    color: #7f8c8d;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

dl.specs dd:last-child {
    border-bottom: none;
}