İçindekiler
Açıklama ve Örnekler

Metin Biçimlendirme Etiketleri

Metin biçimlendirme etiketleri, HTML'de metinlerin biçimlendirilmesini sağlayan etiketlerdir. Bu etiketler, HTML'in temel yapı taşlarından biridir. Bu bölümde, metin biçimlendirme etiketleri hakkında bilgi verilecektir.

Ana Konu
Seviye 3

Html <strong> Etiketi Güçlü Önem Vurgusu

Semantik Rol: Anlamsal Değer

<strong> etiketi, HTML metin biçimlendirme elementlerinin en önemlilerinden biridir.

Bu etiketin temel ve semantik amacı, içerisinde bulunduğu metin parçasının içeriğin geri kalanına göre büyük bir öneme sahip olduğunu belirtmektir.

<strong> etiketi, sadece görsel bir biçimlendirme aracı değildir; metnin anlamını tanımlar.

Tarayıcılara, arama motorlarına ve yardımcı teknolojilere bu metnin sadece kalın değil, aynı zamanda kritik olduğunu bildirir.

Örneğin: Bir güvenlik uyarısındaki anahtar kelimeler veya bir kılavuzdaki uyarılar bu etiketle çevrelenmelidir.

Semantik Rol: Görsel Sunum

Tarayıcılar, <strong> etiketini varsayılan olarak metni kalın ile görüntüleyerek işlerler.

Bu görsel biçimlendirme, metnin önemini vurgular ve okuyucunun dikkatini çeker.

Ancak bu görsel stil, CSS ile tamamen değiştirilebilir; ancak semantik anlamı korunur.

</>
<strong> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <p>Lütfen aşağıdaki uyarıyı dikkate alınız:</p>
    <p>
        <strong>DİKKAT:</strong> Hesabınızı silerseniz, verileriniz <strong>kalıcı olarak</strong> kaybolacaktır.
    </p>
</body>

</html>
</>
<strong> Etiketi Uygulama Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="uyari-kutusu">
        <h3>Güvenlik Uyarısı</h3>
        <p>
            Hesap güvenliğiniz için, parolanızı en az 90 günde bir değiştirmeniz gerekmektedir.
            Lütfen unutmayın: **<code><strong></code>**Bu adımın atlanması hesap dondurulmasıyla sonuçlanabilir.**
        </p>
    </div>

</body>

</html>
body {
    font-family: Arial, sans-serif;
    background-color: #fffaf0;
    padding: 20px;
}

.uyari-kutusu {
    border: 2px solid #e74c3c;
    padding: 15px;
    background-color: #fcebeb;
    border-radius: 5px;
}

p {
    line-height: 1.6;
}

strong {
    color: #c0392b;
    font-weight: 700;
}
Seviye 3

Html <b> Etiketi Görsel Dikkat Çekme

Görsel Rolü ve Kullanımı

<b> etiketi, içerisindeki metin parçasını kalın font ile görüntülemek için kullanılan bir HTML elementidir.

Bu etiket, metnin içeriğine anlamsal olarak herhangi bir önem veya ciddiyet atfetmeksizin, yalnızca görsel dikkat çekme amacı taşır.

<b> etiketinin temel rolü görünümle ilgilidir.

Bir kullanıcıya, çevresindeki metin akışından ayrılan ve gözün kolayca yakalaması gerekenbir kelime veya kelime grubunu işaret eder.

Amaç: Metnin görsel stilini, bir makale başlığındaki anahtar terimler veya bir listedeki ürün isimleri gibi, belgenin okunabilirliğini artırmak için değiştirmektir.

Anlamsızlık: Bir dökümanda <b> ile vurgulanan metin, HTML yapısı veya yardımcı teknolojiler için diğer metinlerden daha önemli değildir.

Bu, <b> etiketinin tamamen sunum katmanına ait olduğu anlamına gelir.

Modern web geliştirmede, bir metni kalınlaştırmak için genellikle CSS kullanılması en yaygın pratik olsa da, <b> etiketi, metin anlamını değiştirmeden hızlı bir şekilde görsel değişiklik yapılması gerektiği durumlarda geçerliliğini korur.

Etiketler Arasındaki Fark Tablo Gösterimi <b> ve <strong>
Nitelik
<b> Etiketi
<strong> Etiketi
Temel Amaç

Görsel dikkat çekme veya stil amacıyla kullanılır.

Yalnızca metin görünümünü değiştirir; anlamsal bir katkı sunmaz.

Anlamsal önem vurgusu ( Strong Importance ) taşır.

Metnin anlamını tanımlar ve tarayıcı/ekran okuyucuya bu bilgiyi iletir.
Semantik Rol

Semantik olarak yoktur.

Metin, yanındaki metinle aynı öneme sahiptir.

Sadece görsel bir alternatiftir; erişilebilirlik açısından ek bilgi taşımaz.

Semantik bakımından kritiktir.

İçerik, güvenlik veya mantık açısından büyük öneme sahiptir.
Sesli Okuyucular

Genellikle sadece sesi biraz yükselterek veya hiç vurgu yapmadan okur.

Okuma hızını yavaşlatarak veya ses tonunu değiştirerek kelimeyi vurgular.
En İyi Kullanım

Bir makaledeki anahtar kelime listeleri, kitap isimleri veya belgede görsel hiyerarşi sağlamak için uygundur.

Uyarılar, güvenlik mesajları, yasal sorumluluklar veya kritik talimatlar için tercih edilmelidir.
Örnek

Monaco bir şehir devletidir. ( Sadece şehir ismini vurgular.)

UYARI! İşlem geri alınamaz.
</>
<b> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <p>Bu haftanın en çok satan kitapları:</p>
    <ul>
        <li><b>Suç ve Ceza</b> - Dostoyevski</li>
        <li><b>Sefiller</b> - Victor Hugo</li>
    </ul>
</body>

</html>
</>
<b> Etiketi Uygulama Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="tanitim-metni">
        <h3>Edebiyat Eleştirisi</h3>
        <p>
            Yazarın son eseri, distopik kurgusuyla dikkat çekiyor.
            Eleştirmenler, özellikle kitabın ana temasını oluşturan <code><b></code>Kayıp Zamanların İzinde</b>
            bölümünün, yazarın edebi kariyerinin zirvesi olduğunu düşünüyor.
        </p>
    </div>

</body>

</html>
body {
    font-family: Georgia, serif;
    background-color: #f7f9fc;
    padding: 20px;
}

.tanitim-metni {
    padding: 15px;
    border-left: 3px solid #3498db;
    background-color: #ecf0f1;
    border-radius: 5px;
}

p {
    line-height: 1.5;
}

b {
    font-weight: 600;
    font-style: italic;
}
Seviye 4

Html <em> Etiketi Anlamsal Vurgu (Emphasis)

Semantik Rol ve Anlam: Sözlü Vurgu

<em> etiketi, metin içerisindeki belirli bir kelimenin veya kelime grubunun anlamsal olarak vurgulanması gerektiğini belirtir.

Bu etiket, sadece görsel bir stil vermekten öte, cümlenin okunuş tonunu ve anlamını değiştirir.

<em> etiketi, konuşma dilinde bir kelimeye bastırarak söylemekle eşdeğerdir.

Cümledeki vurgunun yerini değiştirmek, cümlenin tüm anlamını değiştirebilir. ( "Sen gitmedin mi?" ile "Sen gitmedin mi?" arasındaki fark ).

Semantik Rol ve Anlam: Görsel Sunum

Tarayıcılar, <em> etiketini varsayılan olarak italik yazı tipiyle görüntüler.

Ancak bu görsel stil, CSS ile değiştirilebilir.

Önemli olan, görsel şekli değil, taşıdığı "vurgu" anlamıdır.

Ekran okuyucular , <em> etiketiyle karşılaşınca genellikle ses tonunu değiştirir veya kelimeyi bastırarak okur.

Bu, görme engelli kullanıcıların cümlenin duygusunu veya ince detayını anlamasını sağlar.

</>
<em> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <p>
        Ben sana gitme demedim, <em>o saatte</em> gitme dedim.
    </p>
</body>

</html>
Seviye 5

Html <i> Etiketi Deyimsel Metin ve Alternatif Ses Tonu

Genel Açıklama:

HTML5 standartlarının gelişmesiyle birlikte, <i> etiketi, geçmişteki "sadece metni eğik yazma" görevinden sıyrılarak çok daha derin, semantik bir anlam kazanmıştır.

Modern web mimarisinde bu etiket, "Idiomatic Text" yani Deyimsel Metin olarak tanımlanır.

Temel olarak, bir metin bloğunu çevresindeki düz yazıdan ayıran; farklı bir ses tonunu, teknik bir niteliği veya

anlatımdaki bir değişikliği temsil eden semantik bir araçtır.

Semantik Dönüşüm ve Anlamsal Rol

Eskiden yalnızca görsel bir stil aracı olarak görülen <i> etiketi, günümüzde tarayıcılara ve yardımcı teknolojileremetnin niteliği hakkında

spesifik bir bilgi verir.

Bu etiket, içerdiği metne <em> veya <strong> etiketlerinde olduğu gibi bir "önem" veya "vurgu" yüklemez.

Bunun yerine, metnin akışında bir eksen kayması olduğunu, o kısmın ana metinden farklı bir kategoride değerlendirilmesi gerektiğini belirtir.

Yani, yazarın o kelimeyi okurken ses tonunu hafifçe değiştirmesi veya o terimin yabancı/teknik bir kökene sahip olduğunu belirtmesi gibidir.

Görsel olarak tarayıcılar bunu hala varsayılan olarak italik yazı tipi ile gösterse de, geliştiricinin buradaki amacı görsel stil değil, metnin bağlamsal farklılığıdır.

Yaygın Kullanım Senaryoları ve Bağlam

<i> etiketinin doğru kullanımı, metnin edebi ve teknik kalitesini artırır ve genellikle şu spesifik durumlarda tercih edilir:

Öncelikle, ana metnin dilinden farklı olan yabancı kelimeler ve deyimler bu etiketle işaretlenir ve bu, dilbilgisel bir geçişi sembolize eder.

İkinci olarak, bilimsel yazımda taksonomik isimler yani biyolojik tür adları ( Homo sapiens, Canis lupus gibi adlar ) evrensel standartlar gereği bu etiketle tanımlanır.

Ayrıca, kurgusal yazımlarda, bir karakterin sesli söylemediği ama içinden geçirdiği düşünceler, rüya sahneleri veya anlatıcının iç sesi de <i> etiketiyle ayrıştırılır.

Son olarak, teknik dokümanlarda bir terim ilk kez tanımlanırken veya gemi, kitap, film gibi özel eser isimleri belirtilirken bu etiket kullanılarak uyum sağlanır.

Etiketler Arasındaki Fark Tablo Gösterimi <i> ve <em>
Özellik
<i> (Italic) Etiketi
<em> (Emphasis) Etiketi
Tam Adı

Idiomatic Text ( Eskiden Italic )

Emphasized Text ( Vurgulanmış Metin )
Temel Amaç

Metni farklı bir ses tonu veya kategori ( teknik, yabancı dil ) olarak ayırmak.

Metne anlamsal vurgu ve duygu yüklemek.

Cümledeki baskıyı değiştirmek.
Vurgu Gücü

<i> etiketi için yoktur.

Metin, çevresiyle aynı önem derecesindedir.

<em> etiketi için vardır.

Metin, çevresinden daha önemlidir veya daha baskın okunmalıdır.
Ekran Okuyucular

Genellikle ses tonunu değiştirmez, normal okur.

Kelimeyi vurgulayarak, bastırarak veya tonlamayı değiştirerek okur.
Kullanım Örneği

Titanic ( gemi adı ), deja vu ( yabancı kelime ), Canis lupus ( tür adı ).

"Lütfen çimlere basmayınız." ( Yasak vurgusu ).
HTML5 Anlamı

"Alternatif ses veya ruh hali."

"Sözlü vurgu."
</>
<i> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <p>
        Bahçemizdeki çiçeklerin bilimsel adı <i>Lavandula angustifolia</i> olarak bilinir.
    </p>
    <p>
        Geminin adı <i>Titanic</i> idi.
    </p>
</body>

</html>
Seviye 4

Html <u> Etiketi Metin Altı Çizgili ve Anlamsal Ayrım (Unarticulated Annotation)

Genel Açıklama:

HTML5 standartlarıyla birlikte <u> etiketi, geçmişteki "sadece metnin altını çizme" işlevinden sıyrılarak daha spesifik ve anlamsal bir role bürünmüştür.

Günümüzde bu etiket, Unarticulated Annotation yani "Dile Getirilmeyen Ek Açıklama" olarak tanımlanır.

Bu tanım, metnin o kısmının, çevresindeki metinden farklı olduğunu görsel olarak belirtmek ancak bu farklılığın bir vurgu ( <em> ) veya önem

( <strong> ) taşımadığını ifade eder.

Bu etiketin en yaygın ve doğru kullanım senaryoları; metin içindeki yazım hatalarını ( kırmızı alt çizgi gibi ) işaretlemek veya Çince gibi dillerde özel isimleri belirtmek gibi dilbilgisel ayrımlardır.

Geliştiricilerin dikkat etmesi gereken en kritik nokta, web kullanıcılarının altı çizili metinleri genellikle tıklanabilir bağlantılar olarak algılama eğilimidir.

Bu nedenle, bir metin gerçekten bir bağlantı ( <a> etiketi ) değilse, kafa karışıklığı yaratmamak adına <u> etiketi görsel stil amacıyla kullanılmamalıdır.

Sadece görsel olarak altını çizmek istiyorsanız, CSS ( text-decoration: underline ) kullanmak her zaman daha doğru bir yaklaşımdır; <u> etiketi yalnızca anlamsal "ayrım" durumlarında tercih edilmelidir.

</>
<u> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <p>
        Aşağıdaki cümlede bir yazım yanlışı vardır:
    </p>
    <p>
        Herkes <u>yalnış</u> bildiği doğruları savunuyor. (Doğrusu: yanlış)
    </p>
</body>

</html>
Seviye 4

Html <mark> Etiketi Vurgulanan ve Alakalı Metin (Highlight)

Genel Açıklama:

<mark> etiketi, bir metin bloğu içerisindeki belirli bir kısmın, okuyucunun o anki eylemi ile alakalı olduğu için ön plana çıkarılmasını sağlar.

Görsel olarak, sanki bir fosforlu kalemle ( genellikle sarı ) metnin üzeri çizilmiş gibi bir arka plan rengi ekler.

Bu etiketin <strong> veya <em> etiketlerinden farkı, metnin kendisine içkin bir önem vermemesi, bunun yerine metnin bağlamsal olarak dikkat çekici olduğunu belirtmesidir.

Yaygın Kullanım Örneği: Bir web sitesindeki "Arama Sonuçları" sayfasıdır.

Kullanıcı "HTML" kelimesini arattığında, sonuçlarda geçen "HTML" kelimeleri <mark> etiketiyle sarılarak vurgulanır.

Bu, kullanıcının aradığı terimin metnin neresinde geçtiğini bir bakışta görmesini sağlar.

Ayrıca, bir alıntı ( <blockquote> ) yaparken, orijinal yazarda olmayan ama sizin özellikle dikkat çekmek istediğiniz bir cümleyi işaretlemek için de <mark> etiketi anlamsal olarak en doğru araçtır.

</>
<u> ve <mark> Etiketleri Uygulama Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="editor-kutu">
        <h3>Metin Düzenleme Modu</h3>
        <p>
            Modern web dünyasında, kullanıcı deneyimini iyileştirmek için
            <mark>tasarım</mark> odaklı düşünmek zorundayız.
            Ancak bunu yaparken içeriğin <u>orjinal</u> halini bozmamaya dikkat etmeliyiz.
        </p>
        <p style="font-size: 0.8em; color: #888; margin-top: 20px;">
             <em>Sarı alanlar aranan kelimeleri, kırmızı dalgalı çizgiler yazım hatalarını gösterir.</em>
        </p>
    </div>

</body>

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

.editor-kutu {
    background-color: #fff;
    padding: 40px;
    border: 1px solid #e0e0e0;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.05);
    max-width: 500px;
    line-height: 1.8;
    font-size: 1.1em;
    color: #444;
}

h3 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #f1c40f;
    display: inline-block;
    padding-bottom: 5px;
}

mark {
    background-color: #ffeaa7;
    color: #d35400;
    border-radius: 3px;
    padding: 0 4px;
}

u {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #e74c3c;
    text-decoration-thickness: 1.5px;
    cursor: help;
}
Seviye 4

Html <small> Etiketi Dipnotlar ve Yasal Uyarılar (Fine Print)

Genel Açıklama:

<small> etiketi, adından da anlaşılacağı üzere görsel olarak metni bir kademe küçültmekle birlikte, HTML5 ile çok net bir anlamsal görev üstlenmiştir:

Bu etiket, ana metnin akışı içinde ikincil öneme sahip olan, genellikle yasal zorunluluklar, telif hakkı bildirimleri ve feragatnameler gibi içerikleri tanımlamak için kullanılır.

Bir web sayfasının en altındaki "Telif Hakkı © 2025" ibaresi veya bir ürünün altındaki "Kampanya stoklarla sınırlıdır" uyarısı, <small> etiketinin en doğru kullanım yerleridir.

Bu etiket, metnin ana içerik kadar baskın olmadığını, ancak hukuki açıdan orada bulunması gerektiğini belirtir.

Önemli Ayrım: <small> etiketi, sırf tasarımı küçük yapmak için sayfa başlıklarında kullanılmamalıdır; görsel küçültme işlemi CSS ile yapılmalı, <small> etiketi sadece bahsi geçen "yan not" niteliğindeki içerikler için saklanmalıdır.

</>
<small> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="fiyat-karti">
        <h2>Premium Üyelik</h2>
        <div class="fiyat">₺150 / ay</div>
        <p class="aciklama">
            Tüm içeriklere sınırsız erişim, reklamsız deneyim ve öncelıklı destek.
        </p>
        <button>Hemen Katıl</button>

        <small>
            * Fiyatlara KDV dahil değildir. Üyelik istendiği zaman iptal edilebilir.
            © 2025 Şirket Adı.
        </small>
    </div>

</body>

</html>
body {
    font-family: 'Helvetica', sans-serif;
    background-color: #f4f4f4;
    padding: 40px;
    display: flex;
    justify-content: center;
}

.fiyat-karti {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    border-top: 5px solid #2ecc71;
}

h2 {
    color: #333;
    margin-top: 0;
}

.fiyat {
    font-size: 2.5em;
    color: #2ecc71;
    font-weight: bold;
    margin: 10px 0;
}

.aciklama {
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px;
}

button {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 1em;
}

small {
    display: block;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 0.75em;
    font-style: italic;
}
Seviye 4

Html <blockquote> Etiketi Blok Seviyesi Harici Alıntılar

Genel Açıklama:

<blockquote> etiketi, yazarın kendi ifadeleri olmayan, başka bir kaynaktan, kişiden veya eserden alınan uzun ve blok seviyesindeki alıntıları tanımlamak için kullanılan yapısal bir HTML elementidir.

Metin akışı içerisinde geçen kısa alıntılar için kullanılan satır içi <q> etiketinin aksine, blockquote etiketi içeriği görsel ve yapısal olarak ana metinden tamamen koparır ve ayrı bir blok olarak sunar.

Bu etiketin tarayıcılar üzerindeki varsayılan davranışı, içerdiği metni hem sağdan hem de soldan girintili olarak görüntülemektir.

Bu görsel ayrışma, okuyucunun metnin dış bir kaynaktan geldiğini ve özel bir dikkat gerektirdiğini bir bakışta anlamasını sağlar.

Semantik Açıdan Bakış: Arama motorlarına ve ekran okuyuculara, "Bu bölüm yazarın özgün içeriği değil, referans verilen harici bir bilgidir" mesajını verir.

Ayrıca, alıntının yapıldığı kaynağın URL'sini belirtmek için cite niteliğini kabul eder; bu URL kullanıcıya görsel olarak sunulmasa da, botlar için arka planda kaynakla alıntı arasında anlamsal bir bağ kurar.

</>
<blockquote> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="content-area">
        <h3>Yazılım Felsefesi</h3>

        <p>İyi bir kod yazmak sadece bilgisayarlar için değil, insanlar için de önemlidir. Bu konuda ünlü bir söz
            şöyledir:</p>

        <blockquote cite="https://ornek-site.com/alinti-kaynagi">
            <p>"Kod mizah gibidir..."</p>
            <footer>— Cory House</footer>
        </blockquote>

        <p>Bu söz, kodun okunabilirliğinin ve sadeliğinin, karmaşıklığından çok daha değerli olduğunu vurgular.</p>
    </div>

</body>

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

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

h3 {
    font-family: 'Arial', sans-serif;
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

blockquote {
    margin: 20px 0;
    padding: 20px 30px;
    border-left: 5px solid #3498db;
    background-color: #f0f8ff;
    font-size: 1.1em;
    color: #555;
    font-style: italic;
    line-height: 1.6;
    position: relative;
}

blockquote footer {
    margin-top: 15px;
    font-size: 0.9em;
    color: #7f8c8d;
    font-style: normal;
    font-weight: bold;
    text-align: right;
}

blockquote footer cite {
    font-weight: normal;
    color: #2980b9;
}
Seviye 4

Html <code> Etiketi Bilgisayar Kodu ve Teknik Terimler

Genel Açıklama:

<code> etiketi, HTML belgelerinde kısa kod parçacıklarını veya komut satırı örneklerini göstermek için kullanılan bir yapısal elementtir.

Bu etiket, metni diğer içerikten ayırır ve tarayıcıya veya ekran okuyuculara, burada bir programlama veya kod örneği bulunduğunu bildirir.

Görsel olarak, tarayıcılar <code> içindeki metni monospaced font ile gösterir.

Kapsülleme ve Anlamsal Ayrım: Kod etiketleri, normal metin ile kodu ayırarak, hem geliştiricilerin hem de yardımcı teknolojilerin içeriği doğru yorumlamasını sağlar.

Kullanım Senaryoları: Fonksiyon tanımları, değişken atamaları veya küçük kod örnekleri <code> etiketi içinde sunulmalıdır.

Ayrıca, HTML, CSS veya JavaScript kodları, belgede açıklayıcı örnek olarak <code> etiketi ile gösterilebilir.

Seviye 4

Html <pre> Etiketi Önceden Biçimlendirilmiş Metin (Preformatted)

Etiket Genel Açıklama:

<pre> etiketi, HTML'in standart boşluk daraltma kuralını devre dışı bırakan ve içerisindeki metni kaynak kodda yazıldığı haliyle,

birebir koruyarak görüntüleyen özel bir blok elementtir.

Normal şartlarda tarayıcılar, HTML kodundaki ardışık boşlukları ve satır sonlarını görmezden gelerek hepsini tek bir boşluk karakterine dönüştürür.

Ancak <pre> etiketi, metindeki tüm boşlukları, tab girintilerini ve satır sonlarını olduğu gibi ekrana yansıtır.

Bu özellik, görsel yapısı karakterlerin konumuna bağlı olan içerikler için ( ASCII sanatı, şiirler veya girintili kod blokları gibi ) hayati önem taşır.

Web geliştirmede en yaygın kullanım senaryosu, <pre> etiketini bir kapsayıcı olarak kullanıp, içine <code> etiketini yerleştirmektir

( <pre><code>...</code></pre> şeklinde ).

Bu kombinasyon, hem metnin bir kod olduğunu semantik olarak belirtir hem de kodun okunabilirliği için gerekli olan girintilerin ve satır yapısının görsel olarak korunmasını sağlar.

</>
<pre> ve <code> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="doc-card">
        <h3>JavaScript Fonksiyonları</h3>

        <p>
            Bir değişken tanımlamak için <code>let</code> veya <code>const</code> anahtar kelimelerini
            kullanabilirsiniz.
            Konsola çıktı vermek için ise <code>console.log()</code> metodunu kullanırız.
        </p>

        <p>Aşağıda basit bir toplama fonksiyonu örneği verilmiştir:</p>

        <pre><code>function topla(sayi1, sayi2) {
    // İki sayıyı topla ve sonucu döndür
    let sonuc = sayi1 + sayi2;
    return sonuc;
}

// Fonksiyonu çalıştır
console.log(topla(5, 10)); // Çıktı: 15</code></pre>

        <p>
            Not: Kod bloğu <code>&lt;pre&gt;</code> etiketi sayesinde girintileri korumaktadır.
        </p>
    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eef2f5;
    display: flex;
    justify-content: center;
    padding: 40px;
    line-height: 1.6;
}

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

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

p {
    color: #555;
}

code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: #f4f4f4;
    color: #e74c3c;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.95em;
}

pre {
    background-color: #2d3436;
    color: #dfe6e9;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin-top: 15px;
    border-left: 5px solid #0984e3;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.9em;
}

.doc-card p {
    font-size: 0.85em;
    color: #888;
}
Seviye 4

Html <kbd> Etiketi Klavye Girdisi ve Kullanıcı Komutları

Etiket Genel Açıklama:

<kbd> etiketi, bir belgede kullanıcının klavye, sesli komut veya başka bir giriş aygıtı aracılığıyla sisteme girmesi gereken veriyi veya uygulaması gereken fiziksel eylemi tanımlamak için kullanılan semantik bir elementtir.

Bu etiket, metni okuyan kişiye ""Bunu sadece okuma, bunu yaz veya bu tuşlara bas" mesajını verir.

Bu etiketin en yaygın kullanım alanı teknik yardım sayfaları ve kullanım kılavuzları gibi yapılardır.

Örneğin: Kopyalamak için Ctrl + C tuşlarına basın cümlesindeki tuş isimleri <kbd> etiketi ile işaretlenir.

Semantik Olarak: bu işaretleme, ekran okuyucuların bu metni sıradan bir kelime gibi değil, bir komut girdisi olarak yorumlamasına yardımcı olur.

Görsel açıdan tarayıcılar bu etiketi genellikle varsayılan monospace yazı tipiyle görüntüler.

Ancak modern web tasarımında, bu etikete CSS ile kenarlık ve gölge ekleyerek gerçek bir "klavye tuşu" görünümü kazandırmak yerleşmiş bir tasarım standardıdır.

Seviye 4

Html <samp> Etiketi Sistem ve Program Çıktısı

Etiket Genel Açıklama:

<samp> etiketi, bir bilgisayar programının, bir betiğin ( script ), sunucunun veya işletim sisteminin kullanıcıya döndürdüğü örnek çıktıyı temsil etmek için kullanılır.

Bu etiket, kodun kendisini gösteren <code> etiketinden veya kullanıcının girdisini gösteren <kbd> < etiketinden farklı olarak, sonucu veya sistemin yanıtını ifade eder.

Bu etiketin kullanım mantığı, "Girdi" ve Çıktı kavramlarını ayırmaktır.

Örneğin: Komut satırı örneklerinde kullanıcının yazdığı komut <kbd> ile gösterilirken, sistemin buna karşılık verdiği "Dosya bulunamadı" veya "İşlem başarılı" gibi mesajlar <samp> etiketi içine alınır.

Ayrıca, bir hesaplama sonucunu, bir hata mesajını ( 404 Not Found gibi ) veya bir sanal terminalin ekran dökümünü web sayfasında gösterirken bu etiketi kullanmak, içeriğin semantik olarak "bilgisayar tarafından üretilmiş bir metin" olduğunu tanımlar.

Tarayıcılar bu etiketi de genellikle monospace font ailesi ile render eder, böylece karakter hizalamaları korunmuş olur.

</>
<samp> ve <kbd> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

</head>

<body>

    <div class="terminal-window">
        <h3>Sistem Durum Kontrolü</h3>

        <p class="instruction">
            Sunucuyu başlatmak için lütfen <kbd>npm start</kbd> komutunu girin ve <kbd>Enter</kbd> tuşuna basın.
        </p>

        <div>
            <span style="color: #fab1a0;">user@server:~$</span> 
            <kbd style="background:none; color:white; border:none; box-shadow:none; padding:0;">npm start</kbd>

            <samp>
                > server@1.0.0 start<br>
                > node app.js<br>
                [OK] Sunucu 8080 portunda çalışıyor...<br>
                [INFO] Veritabanı bağlantısı başarılı.
            </samp>
        </div>

    </div>

</body>

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

.terminal-window {
    background-color: #2d3436;
    color: #dfe6e9;
    width: 500px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-family: 'Consolas', 'Monaco', monospace;
}

h3 {
    border-bottom: 1px solid #636e72;
    padding-bottom: 10px;
    margin-top: 0;
    color: #74b9ff;
}

.instruction {
    color: #b2bec3;
    font-family: sans-serif;
    margin-bottom: 15px;
}

kbd {
    background-color: #eee;
    color: #333;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    font-size: 0.9em;
    padding: 2px 6px;
    font-weight: bold;
    display: inline-block;
}

samp {
    color: #00cec9;
    font-weight: bold;
    display: block;
    margin-top: 5px;
    border-left: 3px solid #00cec9;
    padding-left: 10px;
}
Seviye 5

Html <var> Etiketi Değişkenlerin ve Yer Tutucuların Semantik Tanımı

Etiket Genel Açıklama:

<var> (Variable) etiketi, bir metin veya kod bloğu içerisinde sabit bir değeri değil, değişken bir değeri veya bir yer tutucuyu temsil eden ifadeleri tanımlamak için kullanılan semantik bir HTML elementidir.

Bu etiket, tarayıcıya ve okuyucuya şu mesajı verir: Burada yazan karakterler gerçek metin değil , duruma göre değişebilecek bir semboldür.

<var> etiketinin kullanımı, özellikle teknik dokümantasyonlarda ve matematiksel gösterimlerde, içeriğin anlaşılabilirliğini artırmak için kritiktir.

Yazılım Dokümantasyonu ve Yer Tutucular

Yazılım dünyasında, özellikle komut satırı talimatları verilirken, kullanıcının kendi özel bilgileriyle değiştirmesi gereken kısımlar vardır.

<var> etiketi tam olarak bu "değiştirilebilir" alanları işaretler.

Örnek Senaryo: Bir kullanıcıya dosya silme komutunu öğretirken rm dosya_adi yazarsınız.

Burada "dosya_adi" sabit bir isim değildir.

Bu kısmı <var> dosya_adi </var> şeklinde işaretlemek, kullanıcının buraya kendi verisini girmesi gerektiğini anlamasını sağlar.

Matematiksel İfadeler ve Denklemler

Matematikte, sayısal değeri o an için bilinmeyen veya formülün genel yapısını ifade eden harfler kullanılır.

Örnek Senaryo: Pisagor teoremindeki formülünde, a, b ve c harfleri birer değişkendir. HTML içinde bu denklem yazılırken, bu harflerin normal metinden ayrışması için <var> etiketi kullanılır. $$a^2 + b^2 = c^2$$

Görsel Sunum ve Stil

Tarayıcılar, <var> etiketi içerisindeki metni varsayılan olarak italik bir yazı tipiyle görüntüler.

Bu, matematiksel yazım standartlarındaki italik değişken geleneğiyle birebir uyumludur.

Gelişmiş teknik dokümantasyonlarda, <var> etiketi genellikle <code> veya <pre> etiketleri ile birlikte kullanılarak, parametrelerin görsel olarak ayrışması sağlanır.

</>
<sup> ve <sub> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="educational-card">
        <h3>Değişken Tanımları</h3>

        <p>
            Ünlü enerji formülü şöyledir:
            <var>E</var> = <var>m</var><var>c</var><sup>2</sup>
        </p>

        <p style="font-size: 0.9em; color: #777;">
            Burada <var>E</var> enerjiyi, <var>m</var> kütleyi ve <var>c</var> ışık hızını temsil eder.
        </p>

        <hr style="border: 0; border-top: 1px dashed #ccc; margin: 20px 0;">

        <p>
            Node.js paketlerini kurmak için şu sözdizimini kullanın:
        </p>

        <p>
            <code>npm install <var>paket_adi</var></code>
        </p>

        <p style="font-size: 0.9em; color: #777;">
            Lütfen <code><var>paket_adi</var></code> kısmını yüklemek istediğiniz kütüphanenin ismiyle değiştirin.
        </p>

    </div>

</body>

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

.educational-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    border-top: 4px solid #e67e22;
}

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

p {
    line-height: 1.6;
    color: #555;
}

var {
    color: #d35400;
    font-weight: bold;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    padding: 0 2px;
}

code {
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
}

code var {
    font-family: monospace;
    opacity: 0.7;
}
Seviye 3

Html <sup> Etiketi Üst Simge (Superscript)

Matematik ve Bilim Alanları

<sup> etiketi, içerdiği metni satırın standart taban çizgisinin yukarısına taşıyarak ve görsel olarak ana metinden daha küçük boyut ile işleyerek tipografik bir ayrım sağlar.

Bu etiketin kullanım alanı sadece görsel bir stil değişikliği değil, aynı zamanda içeriğin teknik doğruluğu için de kritiktir.

Özellikle matematik ve bilim alanlarında, santimetrekare ( cm2 ) veya bir sayının üssü ( x3 ) gibi ifadelerin doğru gösterimi bu etiket sayesinde mümkün olur.

Akademik Yazım

Akademik yazımda ise, metin akışını bozmadan bir kaynağa veya dipnota atıfta bulunmak için kullanılan referans numaraları ( "Kaynak[1]" gibi ifadeler) standart olarak bu etiketle işaretlenir.

Dilbilgisi ve Kısaltmalar: Ayrıca, İngilizce ( 1st) veya Fransızca ( Mlle ) gibi dillerde sıra sayıları ve kısaltmaların gramer kurallarına uygun yazılmasında da önemli bir rol oynar.

Seviye 4

Html <sub> Etiketi Alt Simge (Subscript)

Kimyasal Formüller

<sub> etiketi, içerdiği metni satırın taban çizgisinin altına indirerek ve boyutunu küçülterek, özellikle bilimsel ve matematiksel notasyonların doğru görüntülenmesini sağlar.

Bu etiketin web dünyasındaki en temel ve yaygın kullanım alanı kimya alanıdır.

Moleküler formülleri yazarken atom sayılarını elementin altına konumlandırarak ( Su için H2O veya Karbondioksit için CO2) formülün

evrensel standartlarda okunmasını mümkün kılar.

Semantik Doğruluk ve Yapısal Kullanım

<sub> etiketi yalnızca görsel bir küçültme işlemi değildir; metnin teknik olarak doğru okunmasını sağlar.

Tarayıcılar bu etiketi, metnin doğal akışına zarar vermeden alt simge olarak konumlandırır.

Özellikle bilimsel içeriklerin dijital ortama aktarılmasında, indislerin doğru gösterilmemesi formülün anlamını tamamen değiştirebilir.

Bu nedenle <sub> kullanımı, tipografik bir tercih değil, anlamsal bir zorunluluktur.

Ayrıca, bu etiket akademik metinlerde dipnot numaralarının bazı özel gösterim biçimlerinde veya teknik belgelerde parametre alt indislerini belirtmek için de tercih edilebilir.

Sadece metni aşağıya indirmek amacıyla CSS ile konumlandırma yapmak yerine, gerçek alt simge ihtiyacı olan durumlarda <sub> etiketinin kullanılması, belgenin yapısal bütünlüğünü korur.

Matematiksel Diziler ve Algoritmalar Kimyanın yanı sıra, matematiksel dizilerde ve karmaşık algoritmalarda, değişkenlerin indislerini ( \(x_1\), \(x_2\) ) belirtmek için de bu etiket kullanılarak formülün mantıksal yapısı korunur.

</>
<sup> ve <sub> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="formula-card">
        <h3>Bilimsel Gösterimler</h3>

        <div class="example-group">
            <span class="label">Kimyasal Formül (Su):</span>
            <div class="formula">
                H<sub>2</sub>O
            </div>
            <p style="font-size: 0.8em; color: #999;">
                (<sub>2</sub> etiketi, 2 sayısını aşağıya indirir)
            </p>
        </div>

        <hr style="border: 0; border-top: 1px dashed #ddd; margin: 20px 0;">

        <div class="example-group">
            <span class="label">Fizik Formülü (Enerji):</span>
            <div class="formula">
                E = mc<sup>2</sup>
            </div>
            <p style="font-size: 0.8em; color: #999;">
                (<sup>2</sup> etiketi, 2 sayısını yukarıya çıkarır)
            </p>
        </div>

        <div class="example-group" style="margin-top:20px;">
            <span class="label">Akademik Referans:</span>
            <p style="font-size: 1em;">
                Bu bilgi doğrulanmıştır.<sup>[1]</sup>
            </p>
        </div>

    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f8;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.formula-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
}

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

.example-group {
    margin-bottom: 25px;
}

.label {
    display: block;
    color: #7f8c8d;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.formula {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
    font-family: 'Georgia', serif;
}

sub {
    color: #e74c3c;
}

sup {
    color: #3498db;
}
Seviye 4

Html <bdi> Etiketi Metin Yönü İzolasyonu (Bi-Directional Isolation)

Genel Açıklama:

<bdi> etiketi, web'in çok dilli ve küresel yapısında, metinlerin okuma yönlerinin karışmasını önleyen hayati bir "güvenlik duvarı" gibidir.

Farklı dillerin farklı akış yönleri vardır;

Örnek Senaryo: Türkçe ve İngilizce soldan sağa ( LTR - Left to Right ) akarken, Arapça ve İbranice sağdan sola ( RTL - Right to Left ) akar.

Web sayfalarında, yönünü önceden bilemediğimiz veya veritabanından dinamik olarak gelen bir metin parçasını buna örnek vermek gerekirse Birkullanıcı yorumu veya sosyal medya kullanıcı adı gibi görüntülerken, bu bilinmeyen metnin ana içeriğin akışını bozma riski vardır.

<bdi> etiketi, bu tür içerikleri çevresindeki metinden tamamen izole eder.

Örnek Senaryo: Soldan sağa yazılan Türkçe bir cümle ortasına, sağdan sola okunan Arapça bir isim yerleştirildiğinde, tarayıcının

çift yönlü metin algoritması kafası karışarak cümlenin geri kalanını veya parantezleri yanlış yere taşıyabilir.

<bdi> etiketi, içerdiği metnin yönü ne olursa olsun, bu yönelim bilgisinin dışarı sızmasını önler ve ana metnin yapısını bozmasını garanti altına alır; böylece her dil kendi doğal akışında görüntülenir.

Teknik Riskler ve Arayüz Stabilitesi:

<bdi> etiketi, özellikle kullanıcıdan gelen verilerin yönünü kontrol etme imkânı olmadığında kritik bir rol oynar.

Bu etiket sayesinde, dış kaynaktan gelen metnin sayfa düzenini bozması engellenir.

Çift yönlü metin problemleri genellikle parantez, tire veya noktalama işaretlerinin beklenmeyen konumlara kaymasıyla fark edilir.

<bdi> bu tür görsel tutarsızlıkların önüne geçerek, metnin hem okunabilirliğini hem de mantıksal bütünlüğünü korur.

Özellikle forumlar, yorum sistemleri ve mesajlaşma arayüzleri gibi çok dilli kullanıcı etkileşimi barındıran platformlarda, <bdi> kullanımı, arayüz stabilitesi açısından iyi bir uygulama olarak kabul edilir.

Seviye 4

Html <bdo> Etiketi Metin Yönünü Geçersiz Kılma (Bi-Directional Override)

Genel Açıklama:

<bdo> etiketi, tarayıcının doğal metin yönü algılama mekanizmasını devre dışı bırakarak, metnin akış yönünü geliştiricinin belirlediği yöne

zorla çevirmek için kullanılır.

Bu etiket, işlevini yerine getirebilmek için metnin hangi yöne akacağını belirten dir niteliği ( dir="rtl" veya dir="ltr" ) ile birlikte kullanılmak zorundadır.

Bu etiket kullanıldığında, içerdiği metin sadece hizalama olarak değil, karakter dizilimi olarak da ters çevrilir.

Örnek Senaryo: Normalde "MERHABA" olarak okunan bir metni dir="rtl" niteliğiyle <bdo> içine alırsanız, tarayıcı bunu harf harf ters çevirerek "ABAHREM" şeklinde, sanki aynadaki bir yansıma gibi görüntüler.

Bu özellik, genellikle özel görsel efektler yaratmak için veya tarayıcının otomatik yön algılamasının yetersiz kaldığı çok spesifik dilbilgisi düzeltmelerinde manuel bir müdahale aracı olarak kullanılır.

Manuel Yön Kontrolü ve Müdahale:

<bdo> etiketi, tarayıcının otomatik yön belirleme davranışına güvenilmediği durumlarda geliştiriciye doğrudan kontrol imkânı tanır.

Bu kontrol, metnin yalnızca görsel hizalamasını değil, karakterlerin işlenme sırasını da etkiler ve böylece yön bilgisi tamamen geliştirici tarafından belirlenmiş olur.

Ancak bu müdahale bilinçli yapılmalıdır; çünkü yanlış kullanılan <bdo>, metnin doğal okunabilirliğini bozabilir ve kullanıcı deneyimini olumsuz etkileyebilir.

</>
<sup> ve <sub> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="lang-card">

        <h3>1. &lt;bdi&gt; İzolasyon</h3>
        <div class="example-box bdi-box">
            <span class="label">Senaryo: Karışık Dilli Liste</span>
            <p class="result">
                1. Yarışmacı: <bdi>Ali</bdi>: 80 Puan<br>
                2. Yarışmacı: <bdi>أحمد</bdi>: 90 Puan
            </p>
        </div>

        <h3>2. &lt;bdo&gt; Yön Değiştirme</h3>
        <div class="example-box bdo-box">
            <span class="label">Senaryo: Metni Ters Çevirme</span>
            <p class="result">
                Normal: <strong>MERHABA</strong>
            </p>
            <p class="result">
                Ters (RTL): <bdo dir="rtl">MERHABA</bdo>
            </p>
        </div>

    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    padding: 40px;
}

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

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

.example-box {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 4px solid;
    border-radius: 4px;
}

.bdi-box {
    border-color: #3498db;
}

.bdo-box {
    border-color: #e74c3c;
}

.label {
    font-weight: bold;
    color: #555;
    display: block;
    margin-bottom: 5px;
}

.result {
    font-size: 1.1em;
    color: #333;
}
Seviye 4

Html <span> Etiketi Satır İçi (Inline) Kapsayıcı ve Stil Kancası

Genel Açıklama:

<span> etiketi, HTML yapısı içerisinde kendi başına anyhangi bir anlamsal ( semantik ) değer taşımayan, varsayılan bir görsel stil barındırmayan, ancak web geliştirme süreçlerinde satır içi ( inline ) manipülasyonlar için vazgeçilmez olan genel amaçlı bir kapsayıcıdır.

Bu etiket, metin akışını bozmadan, yeni bir satıra geçmeden veya çevresindeki içerikle yapısal bir kırılma yaratmadan, belirli bir metin parçasını veya karakter grubunu izole etmek ve hedeflemek için kullanılır.

Yapısal Rol ve <div> etiketi ile Temel Farkı

Web sayfasının iskeletini oluştururken en sık kullanılan iki kapsayıcı <div> ve <span> etiketleridir ve aralarındaki fark, sayfa düzeni mantığının temelini oluşturur.

Blok seviyesinde çalışan <div> etiketi, dikey olarak yer kaplayıp her zaman yeni bir satır başlatarak büyük yapısal bloklar oluştururken; <span> etiketi tamamen satır içi çalışır.

Yani, bir <span> etiketi kullandığınızda, içerdiği metin, paragrafın doğal akışı içinde kalmaya devam eder.

Bir kelimeyi <span> içine almak, o kelimeyi bir kutuya koymak değil, üzerine şeffaf bir etiket yapıştırmak gibidir; metin akışı kesilmez, sadece geliştiriciye o spesifik parçayı tutabilmesi için bir "kanca" (hook) sunar.

Semantik Olmayan Yapı ve İşlevsel Gücü

<span> etiketinin "semantik olmayan" doğası, onun en büyük gücüdür.

<strong> (önemli), <em> veya <mark> gibi etiketler tarayıcıya anlamı hakkında bilgi verirken, <span> tamamen nötrdür.

Bu, geliştiricinin içeriğin anlamını değiştirmeden sadece görsel stil veya işlevsellik eklemek istediği durumlar için idealdir.

Bu etiketin gerçek potansiyeli, CSS ve JavaScript ile birleştiğinde ortaya çıkar:

CSS Kancası (Styling Hook): Uzun bir paragrafın içindeki tek bir kelimenin rengini değiştirmek veya arka planına efekt vermek istendiğinde, o kelime <span> ile sarmalanır ve CSS sınıfları ( class ) atanır.

Dinamik Manipülasyon: Modern web uygulamalarında, bir "Beğeni Sayısı" veya "Canlı Döviz Kuru" gibi sayfa yenilenmeden güncellenmesi gereken veriler genellikle <span> etiketleri içinde tutulur.

JavaScript, bu etiketin benzersiz kimliğini kullanarak tüm paragrafı yeniden oluşturmak zorunda kalmadan sadece o küçük metin parçasını cerrahi bir hassasiyetle güncelleyebilir.

</>
<span> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Span Temel Örnek</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="kutu">
        <h3>Span Kullanım Alanları</h3>

        <p>
            Bu cümledeki <span class="renkli-metin">önemli kelimeyi</span> renklendirmek için span kullandık. Akış
            bozulmadı.
        </p>

        <div class="ayirici"></div>

        <p>
            Ürün Durumu: <span class="etiket">Stokta Var</span>
        </p>

        <div class="ayirici"></div>

        <p>
            Toplam Tutar: <span class="fiyat">₺150.00</span>
        </p>
    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.kutu {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 400px;
}

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

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

.renkli-metin {
    color: #e74c3c;
    font-weight: bold;
}

.etiket {
    background-color: #3498db;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.fiyat {
    color: #27ae60;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.ayirici {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 20px;
}
</>
<span> Etiketi Uygulama Örneği 2 
<!DOCTYPE html>
<html lang="tr">

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

<body>

    <div class="card">
        <h3>Span Kullanım Senaryoları</h3>

        <p>
            1. Metin İçinde Stil: Bu cümledeki <span class="highlight">tek bir kelimeyi</span> renklendirmek için span
            kullandık. Satır bozulmadı.
        </p>

        <hr class="divider">

        <p>
            2. Rozet Tasarımı: Gelen Kutusu <span class="badge">Yeni 3 Mesaj</span>
        </p>

        <hr class="divider">

        <p>
            3. Dinamik İçerik: Sunucu Durumu: <span id="canli-durum">Bağlantı Bekleniyor...</span>
        </p>

        <button onclick="baglan()">Sunucuya Bağlan</button>
    </div>

    <script src="script.js?v=1.0.150"></script>

</body>

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

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

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

p {
    line-height: 1.6;
    color: #555;
}

.divider {
    border: 0;
    border-top: 1px dashed #ddd;
    margin: 15px 0;
}

.highlight {
    color: #e74c3c;
    font-weight: bold;
}

.badge {
    background-color: #2ecc71;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 5px;
}

#canli-durum {
    font-weight: bold;
    color: #7f8c8d;
    transition: color 0.3s;
}

.aktif {
    color: #27ae60;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2980b9;
}
function baglan() {
  const durumSpan = document.getElementById("canli-durum");
  durumSpan.textContent = "Çevrimiçi (Online)";
  durumSpan.classList.add("aktif");
}
Seviye 3

Html <br> Etiketi Zorunlu Satır Sonu ve Anlamsal Sınır

Mimari Rol: Yapısal Bütünlüğü Koruma

<br> etiketi, metin akışında tek bir satır sonu oluşturur ve kapanış etiketi gerektirmeyen ( self-closing ) bir elementtir.

Bu etiketin mimari rolü, içeriği yeni bir satıra taşımak, ancak bu içeriği yapısal olarak yeni bir paragraftan ayırmamaktır.

<br> etiketinin gücü, içeriği yeni bir satıra taşımasına rağmen, mevcut anlamsal konteyneri ( <p> etiketi gibi ) terk etmemesidir.

İçerik Akışı: Etiket, genellikle şiirler, adres blokları veya bir başlık içindeki satırların ayrılması gibi, metnin aynı mantıksal birim içinde kalması gereken durumlar için uygundur, bu, içerik ve yapının anlamsal bütünlüğünü korur.

Yanlış Kullanım (Anti-Pattern): Paragraflar arasında boşluk oluşturmak için art arda <br> etiketleri kullanmak, bir mimari anti-paterndir.

Bu, Görünüm sorumluluğunun, Yapı tarafından üstlenilmesi anlamına gelir ve Paragraflar arasındaki dikey boşluk, tamamen CSS ile yönetilmelidir.

AQC Katkısı: Erişilebilirlik (Accessibility)

<br> etiketinin doğru kullanımı, doğrudan Erişilebilirlik AQC 'sini etkiler.

Ekran Okuyucular: Eğer <br> etiketi gereksiz yere birden fazla kullanılırsa, ekran okuyucular bunu anlamsız boşluklar olarak yorumlar ve kullanıcı deneyimini bozar.

Anlamsal olarak doğru kullanıldığında, ekran okuyucu metni duraklamadan, mantıksal bir akış içinde okumaya devam eder.

</>
<br> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Satır Sonu Örneği</title>
</head>
<body>

    <address>
        Ali Can Güleç<br>
        Web Geliştirme Departmanı<br>
        Örnek Caddesi No: 42/B<br>
        Antalya, Türkiye
    </address>

</body>
</html>
Seviye 4

Html <hr> Etiketi İçerikte Tematik Kırılma (Thematic Break)

Mimari Rol: Yapısal Konu Değişikliğini İşaretleme

<hr> etiketi, bir içerikte tematik bir kırılma olduğunu belirtir.

Kapanış etiketi gerektirmeyen bir elementtir.

Bu etiketin mimari rolü, sadece görsel bir çizgi çizmekten öte, metin akışında konunun kökten değiştiğini veya bir bölümün sona erip

yepyeni bir bölüme geçildiğini semantik olarak işaretlemektir.

Tarayıcı Görünümü: Tarayıcılar bunu varsayılan olarak yatay bir çizgi olarak görüntüler.

Anlamsal Konteyner: <hr>, önceki anlamsal konteynerin bittiğini ve bir sonraki içeriğin tematik olarak ayrı olduğunu belirtir.

İçerik Akışı: Mantıksal Geçiş Noktası

Etiket, bir makalenin ana içeriği ile yazarın notları, bir roman bölümü ile diğer bölüm arasındaki ayrım veya bir blog gönderisi ile

ilgili gönderiler listesi arasına yerleştirilerek, okuyucunun mantıksal bir geçiş yaptığını gösterir.

Örnek Kullanım: Bir makalenin ana içeriği bittikten sonra yorumlar bölümüne veya bir önsözden asıl metin akışına geçişi belirtmek için idealdir.

Görsel Stil: Görsel stili ( kalınlık, renk, boşluk ) ise CSS ile ayarlanmalıdır.

HTML sadece yapıyı ve anlamı sağlamalıdır.

Yanlış Kullanım (Anti-Pattern): Paragraf Ayırıcısı Paragraflar arasında dikey boşluk oluşturmak için <br> etiketleri yerine yalnızca <hr> kullanmak, bir mimari anti-paterndir.

Sorumluluk Ayrımı İhlali: <hr>'nin amacı, boşluk yaratmak değil, konu değiştirmektir.

Boşluk oluşturma sorumluluğu, tamamen CSS ile yönetilmelidir.

AQC Katkısı: Erişilebilirlik (Accessibility) ve Ekran Okuyucular

<hr> etiketinin doğru kullanımı, doğrudan Erişilebilirlik AQC 'sini etkiler.

Ekran Okuyucular: Ekran okuyucular, <hr> etiketini genellikle bir "tematik kırılma" olarak algılar ve bu noktada sesli bir

duraklama veya bildirim yapabilir.

Bu, görme engelli kullanıcının metnin artık yeni bir konuya geçtiğini anlamasına yardımcı olur.

Anlamsal Doğruluk: Eğer etiket doğru anlamsal bağlamda kullanılırsa, deneyim zenginleşir.

Gereksiz veya sadece görsel amaçlı kullanıldığında ise, kullanıcıya anlamsız kesintiler sunar.

</>
<hr> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Yatay Çizgi Örneği</title>
</head>
<body>

    <section>
        <h2>Blog Yazısı Başlığı</h2>
        <p>Yazının ilk bölümü, konuya giriş...</p>
    </section>

    <hr>

    <section>
        <h2>Yorumlar</h2>
        <p>Yazı hakkındaki kullanıcı yorumları buradadır...</p>
    </section>

</body>
</html>
Seviye 3

Html <abbr> Etiketi Kısaltmaların Anlamsal Tanımı

Temel İşlevi ve Anlamı

<abbr> etiketi, bir belgede kullanılan kısaltmayı veya kısaltmanın tam açılımını tanımlamak için kullanılan semantik bir HTML elementidir.

<abbr> etiketinin ana işlevi, okuyucuya ve yardımcı teknolojilere kısaltmanın ne anlama geldiğini net bir şekilde belirtmektir.

Kullanım Amacı: Özellikle teknik terimlerin, kurum isimlerinin veya yaygın olmayan kısaltmaların içeriğini açıklarken kullanılır

( NATO, CSS, WHO).

Anlamsal Değer: Etiketin kendisi, sadece görsel bir biçimlendirme sağlamaktan çok, metne anlamsal zenginlik katar.

Title Niteliği: Bilgi İpucu <abbr> etiketinin en önemli ve stratejik niteliği title niteliğidir.

İpucu Metni (Tooltip): Kullanıcı, etiketle çevrelenen kısaltmanın üzerine faresini getirdiğinde ( hover ), title niteliğinde belirtilen tam açılımı bir ipucu metni olarak görür.

SEO ve Erişilebilirlik (AQC) Katkısı

<abbr> etiketinin doğru kullanımı, web içeriğinin genel kalitesini ve erişilebilirliğini artırır.

Arama Motorları (SEO): Etiket, arama motoru botlarına içeriğin ne olduğu hakkında daha fazla bağlamsal bilgi sunar.

Arama motoru botları, kısaltmanın tam karşılığını bilerek içeriği daha iyi indeksleyebilir ve bu da SEO başarısına dolaylı katkı sağlar.

Ekran okuyucular, bu etiketi algıladığında kısaltmanın tam açılımını okuyarak, görme engelli kullanıcıların metni tam olarak anlamasına yardımcı olur.

Bu, Erişilebilirlik açısından kritik bir unsurdur.

</>
<abbr> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Kısaltma Örneği</title>
</head>
<body>

    <h2>Web Teknolojilerinin Evrimi</h2>

    <p>
        HTML ve CSS, <abbr title="World Wide Web Konsorsiyumu">W3C</abbr> tarafından belirlenen standartlardır.
        Ancak, güncel HTML standardı artık <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> tarafından yönetilmektedir.
        <br>
        İlk resmi standartlar <abbr title="Internet Engineering Task Force">IETF</abbr> tarafından yayınlanmıştı.
        Bu gelişim sayesinde, web artık sadece metin değil, güçlü bir <abbr title="Application Programming Interface">API</abbr> platformu haline gelmiştir.
    </p>

</body>
</html>
Seviye 3

Html <cite> Etiketi Eser Başlıklarının Referansı

Temel İşlevi ve Anlamı

<cite> etiketi, bir eserin ( kitap, makale, film, şarkı, tablo, heykel, resim, vb. ) başlığını veya bir kaynak referansını belirtmek için kullanılan bir HTML etiketidir.

Bu etiket, alıntı yapılan içeriğin, bir bilginin veya bir fikrin kaynağını semantik olarak işaretlemek amacıyla tasarlanmıştır.

Semantik Rol: Tarayıcılar ve yardımcı teknolojiler, <cite> ile çevrelenen metnin bir eser adı olduğunu anlar ve bu, içeriğin

anlamsal doğruluğunu artırır.

Görsel Sunum: Tarayıcılar, metni diğer içerikten ayırmak için varsayılan olarak eğik (italik) yazar ancak görsel stil, CSS ile tamamen özelleştirilebilir.

Önemli Semantik Kural (Yazar Değil, Eser Adı)

<cite> etiketinin kullanımıyla ilgili en kritik kural şudur:

Sadece Eserin Adı: <cite> etiketi, eserin yazarını, yayın tarihini veya yayıncısınıs yayıncısını belirtmek için kullanılmaz.

Tamamen ve yalnızca eserin başlığını belirtmelidir.

Erişilebilirlik ve Standartlara Uygunluk <cite> etiketinin standartlara uygun kullanımı, içeriğin erişilebilirliğini ve geleceğe dönük uyumluluğunu destekler.

Ekran Okuyucular: Ekran okuyucular, bu etiketi algıladığında metni bir eser başlığı olarak yorumlayabilir; bu da görme engelli kullanıcıların referansları doğru şekilde ayırt etmesine olanak tanır.

Biçimlendirmeden Ayrışma: Sadece görsel amaçla kullanmaktan kaçınılmalıdır.

Eğer amacınız sadece italik biçimlendirme ise, <i> etiketi veya CSS kullanın.

</>
<cite> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Alıntı Kaynağı Örneği (Bilimsel)</title>
</head>
<body>

    <h2>Yapay Zekâda Derin Öğrenme</h2>

    <p>
        Sinir ağları ve makine öğrenimi konusundaki çığır açan çalışmalar,
        Yapay Zekâ'nın güncel yükselişinin temelini oluşturmaktadır.
        Bu konuya ilişkin en kapsamlı kaynaklardan biri, alanın öncülerinden
        olan Goodfellow, Bengio ve Courville tarafından yazılan
        <cite>Deep Learning</cite> adlı eserdir.
    </p>

    <p>
        Bu kitap, karmaşık algoritmaların pratik uygulamalarına dair
        detaylı bir bakış sunmaktadır.
    </p>

</body>
</html>
Seviye 3

Html <q> Etiketi Satır İçi Kısa Alıntılar

Temel İşlevi ve Anlamı

<q> etiketi, bir HTML belgesi içinde metin akışını bölmeyen, kısa ve satır içi alıntıları tanımlamak için kullanılan semantik bir elementtir.

<q> etiketinin ana işlevi, bir başkasının sözünü veya bir metinden alınan ifadeyi, o anki paragrafın veya cümlenin içine yerleştirerek anlamsal olarak alıntı olduğunu belirtmektir.

Blok Alıntılarla Farkı: Uzun, çok satırlı alıntılar için kullanılan <blockquote> etiketinin aksine, <q> etiketi daima metin akışı içinde kalır ve yalnızca birkaç kelime veya kısa bir cümle için uygundur.

Görsel Sunum (Otomatik Tırnak İşaretleri)

<q> etiketinin en ayırt edici görsel özelliği, modern tarayıcıların bu etiketi gördüğünde, alıntı metninin etrafına otomatik olarak tırnak işaretleri eklemesidir.

Dil Desteği: Tarayıcılar, bu tırnak işaretlerini belgenin diline uygun şekilde (Türkçe için çift tırnak, İngilizce için yerel kurallar vb. ) otomatik olarak biçimlendirir.

Kontrol: Bu tırnak işareti davranışının görsel stili, tamamen CSS ile ( quotes özelliği ) kontrol edilebilir ve hatta kapatılabilir.

Cite Niteliği: Kaynak Belirtme

<q> etiketi, tıpkı <blockquote> gibi, isteğe bağlı olarak bir cite niteliği alabilir.

URL Referansı:

Bu nitelik, alıntının yapıldığı kaynak URL'sini ( tam adresi ) belirtmek için kullanılır.

Görünmez Bilgi: Bu URL, tarayıcı tarafından kullanıcıya görsel olarak sunulmaz ve yalnızca arama motorları ile erişilebilirlik araçları için bir referans olarak görev yapar.

Bu, içeriğin doğrulanmasına ve semantik kalitesine katkıda bulunur.

</>
<q> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Kısa Alıntı Örneği</title>
</head>
<body>

    <p>
        Büyük düşünürün dediği gibi:
        <q cite="https://ornek.com/kaynak">Öğrenmenin yaşı yoktur.</q>
    </p>

</body>
</html>
</>
<q> Etiketi Uygulama Örneği 2 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&lt;q&gt; Etiketi Örneği</title>
</head>

<body>
    <div class="container">
        <h1>Motivasyon ve Alıntılar</h1>

        <p>
            Ünlü düşünür Confucius der ki:
            <q cite="https://tr.wikipedia.org/wiki/Konfüçyüs">
                Büyük düşünürler, küçük şeyler üzerinde uzun uzadıya konuşurlar.
            </q>
            Bu söz, bazen en derin bilgeliğin en basit gözlemlerde gizli olduğunu hatırlatır.
        </p>

        <p>
            Başka bir bilgelik incisi ise Albert Einstein'dan gelir:
            <q cite="https://tr.wikipedia.org/wiki/Albert_Einstein">
                Merak etmeyi bırakmadığın sürece yaşlanmazsın.
            </q>
            Bu, hayat boyu öğrenmenin ve keşfetmenin önemini vurgular.
        </p>

        <p>
            Web geliştirme dünyasında da sıkça duyduğumuz bir ilke vardır:
            <q>
                Kodu bir insan okuyacakmış gibi yaz; makinenin anlaması zaten garanti.
            </q>
            Bu yaklaşım, sürdürülebilir ve işbirlikçi projeler için hayati öneme sahiptir.
        </p>

        <footer>
            Yukarıdaki alıntılar, bilgeliğin ve bilimin ışığında hayatımıza yön vermektedir.
        </footer>
    </div>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

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

p {
    margin-bottom: 15px;
}

q {
    color: #e74c3c;
    font-style: italic;
    font-weight: 500;
    quotes: none;
}

q::before {
    content: "“";
    font-size: 1.1em;
    color: #3498db;
    margin-right: 3px;
}

q::after {
    content: "”";
    font-size: 1.1em;
    color: #3498db;
    margin-left: 3px;
}

footer {
    margin-top: 40px;
    text-align: center;
    font-size: 0.9em;
    color: #777;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}
Seviye 4

Html <del> ve <ins> Etiketleri Belge Revizyonu ve İzleme (Silinen ve Eklenen İçerik)

Silinmiş İçeriği İşaretleme

<del> ve <ins> etiketleri, bir HTML belgesinde yapılan revizyonları veya değişiklikleri işaretlemek için kullanılan semantik elementlerdir.

Bu etiketler, belgenin evrimini ve editör tarafından yapılanekleme/çıkarma işlemlerini görsel ve anlamsal olarak belirtir.

<del> etiketi, belgenin yeni versiyonunda silinmiş veya kaldırılmış olan içeriği tanımlar.

Görsel Sunum: Tarayıcılar, varsayılan olarak <del> ile çevrelenen metnin üzerine bir çizgi çeker.

Semantik Role: Okuyucuya, bu metnin artık geçerli olmadığını, ancak revizyon geçmişi için tutulduğunu belirtir.

<ins> Etiketi: Eklenmiş İçeriği İşaretleme

<ins> etiketi, belgenin yeni versiyonuna eklenmiş veya yerleştirilmiş olan yeni içeriği tanımlar.

Görsel Sunum: Tarayıcılar, varsayılan olarak <ins> ile çevrelenen metnin altına bir çizgi çeker.

Semantik Role: Okuyucuya, bu metnin sonradan eklendiğini ve orijinal metinde bulunmadığını belirtir.

Belge Revizyon Mantığı

<del> ve <ins> etiketleri birlikte kullanıldığında, bir metnin önceki hali ile güncellenmiş hali arasındaki farkı açık biçimde gösterir.

Bu yaklaşım özellikle dokümantasyon sistemleri, hukuki metinler ve editoryal içerikler gibi metnin zaman içerisinde değiştiği ortamlarda, değişikliklerin izlenmesini kolaylaştırır.

Teknik Nitelikler Her iki etiket de isteğe bağlı olarak datetime ve cite nitelikleri ile birlikte kullanılabilir.

datetime niteliği, değişikliğin ne zaman yapıldığını belirtirken; cite niteliği ise değişikliğin kaynağını veya açıklamasını gösteren bir bağlantı sunabilir.

Bu nitelikler sayesinde belge içerisindeki revizyonlar yalnızca görsel olarak değil, aynı zamanda makine tarafından okunabilir bir değişiklik geçmişi haline getirilebilir.

</>
<del> ve <ins> Etiketleri Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Revizyon Örneği</title>
</head>
<body>

    <h2>Ürün Güncellemesi: Web Hosting Paketi</h2>

    <p>
        Bu hosting paketinin eski ücreti
        <del datetime="2025-11-19T10:30:00Z" cite="/fiyat-revizyonu-notu">49.90 TL/ay</del>
        olarak belirlenmişti. Yapılan optimizasyonlar sonrası, yeni kampanya fiyatımız
        <ins datetime="2025-11-20T11:00:00Z">39.90 TL/ay</ins>'a düşürülmüştür.
    </p>

    <p>
        Teslimat süresi ile ilgili olarak: siparişlerin kurulumu daha önce
        <del>72 saat</del>
        içinde tamamlanıyordu. Artık tüm yeni siparişler
        <ins cite="/teslimat-guncellemesi-hizlandirma">24 saat</ins>
        içinde aktif edilmektedir.
    </p>

</body>
</html>