İçindekiler
Açıklama ve Örnekler

Semantik Etiketler

İçeriğin sadece görünümünü değil, anlamını ve hiyerarşisini tanımlayarak; SEO ve erişilebilirlik açısından optimize edilmiş, modern bir web iskeleti oluştururlar.

Bilgiyi Hızlıca Al Ana Konu

HTML Konteyner Etiketleri Yapısal Gruplama ve Tasarım Esnekliği

Genel Açıklama

<html5>'in web dünyasına getirdiği en büyük devrim, sayfaların sadece "nasıl göründüğüne" değil, "ne anlama geldiğine" odaklanmasıdır.

Semantik Yapılandırma Etiketleri (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) kodun hem insanlar hem de makineler tarafından anlaşılmasını sağlayan modern web mimarisinin temel taşlarıdır.

Div Çorbası'ndan Anlamlı Mimariye Geçiş

Eskiden web sayfaları tasarlanırken, sayfanın başlığı, menüsü, içeriği ve alt bilgisi için sürekli olarak genel amaçlı <div> etiketi kullanılırdı

( <div id="header">, <div class="menu"> ).

Bu durum, kodun içinde yüzlerce <div> etiketinin iç içe geçtiği ve "Div Çorbası" olarak adlandırılan, yönetilmesi zor bir yapıya neden olurdu.

Semantik etiketler bu kaosu sona erdirir ve artık bir içeriği kutuya koyarken sadece "bu bir kutudur" ( <div> ) demek yerine; "bu bir makaledir" ( <article>) veya "bu bir navigasyon menüsüdür" ( <nav> ) diyerek etiketin isminden içeriğin amacını tanımlarız.

Neden Semantik HTML Kullanmalıyız? Bu etiketleri kullanmak bir tercih değil, modern web standartlarının bir gerekliliğidir. Aşağıda sağladığı kritik avantajları görebilirsiniz:

SEO (Arama Motoru Optimizasyonu) Gücü

Google ve diğer arama motoru botları, bir sayfayı tararken içeriğin önem derecesini anlamaya çalışır, semantik etiketler, bota yol gösterir:

"Burası sayfanın en önemli ana içeriğidir" ( <main> ), "Burası ise sadece yan bilgidir" ( <aside> ).

Bu sayede içeriğiniz arama motorları tarafından daha doğru indekslenir ve sayfanızın görünürlüğü artabilir.

Erişilebilirlik (Accessibility - A11Y)

Görme engelli kullanıcıların kullandığı ekran okuyucular ( Screen Readers ), semantik etiketleri birer navigasyon işareti olarak kullanır.

Kullanıcı, tek bir tuşla menüyü ( <nav> ) atlayıp doğrudan ana içeriğe ( <main> ) geçebilir.

Semantik olmayan sayfalarda ise kullanıcılar içeriğe ulaşmak için gereksiz tüm linkleri dinlemek zorunda kalabilir.

Sürdürülebilirlik ve Okunabilirlik

Kodunuzu aylar sonra açtığınızda veya başka bir geliştiriciye devrettiğinizde,

<div class="content-wrapper"> yerine <article> görmek, o bloğun işlevini anında anlamayı sağlar.

Bu yaklaşım, kodun bakımını ve geliştirilmesini önemli ölçüde hızlandırır.

Cihaz Uyumluluğu Akıllı saatler, okuyucu modları ve geleceğin teknolojileri, içeriği doğru biçimlendirmek için bu anlamsal etiketlere güvenir.

Örneğin: Bir tarayıcının Okuyucu Modu, sayfadaki reklamları ve menüleri gizleyip sadece <article> içindeki metni büyüterek kullanıcıya sunabilir.

Seviye 5

Html <header> Etiketi Giriş ve Tanıtım Bölümü

Genel Açıklama

<header> etiketi, bir web sayfasının veya sayfa içindeki bağımsız bir bölümün (<article> veya <section> gibi) giriş ve tanıtım içeriğini gruplayan semantik bir kapsayıcıdır.

Bu alan genellikle site logosu, navigasyon menüsü, başlıklar veya arama kutusu gibi sayfanın kimliğini temsil eden öğeleri içerir.

Bağlamsal Kullanım Esnekliği

Genel kanının aksine <header> etiketi yalnızca web sitesinin en üst kısmında kullanılan tek bir alan değildir.

Bu etiket bağlamsal olarak esnek bir yapıya sahiptir.

<body> etiketinin altında kullanıldığında tüm sitenin kimliğini ve navigasyonunu temsil eder.

Ancak bir <article> veya <section> içinde kullanıldığında yalnızca o içeriğe ait başlık, yazar bilgisi veya giriş özetini kapsar.

Bu nedenle modern ve iyi yapılandırılmış bir web sayfasında birden fazla <header> etiketi bulunması tamamen standartlara uygundur.

Benzer Etiketlerle Karıştırılmaması

<header> etiketi sıklıkla <head> veya <h1> etiketleri ile karıştırılır.

Ancak bu etiketlerin görevleri tamamen farklıdır.

<head> etiketi sayfanın metadata, stil dosyaları ve teknik bilgilerini içerir.

<h1> ise yalnızca metinsel bir başlığı temsil eder.

Buna karşılık <header> etiketi, <h1>, logo, navigasyon ve arama alanı gibi farklı öğeleri içine alan görsel bir konteyner görevi görür.

Erişilebilirlik ve Navigasyon Avantajı

Sayfa düzeyindeki ana <header> elementi, erişilebilirlik açısından banner rolü ile ilişkilidir.

Ekran okuyucular bu alanı otomatik olarak sayfanın tanıtım bölgesi olarak algılar.

Bu özellik, görme engelli kullanıcıların her sayfada tekrar eden navigasyon ve tanıtım alanlarını hızlıca atlayarak ana içeriğe ulaşmasını sağlayan önemli bir navigasyon kolaylığı sunar.

</>
HTML header Etiketleri Uygulama Örneği 1 ( ) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Panel Header Örneği</title>
</head>

<body>

    <header>
        <div>
            <strong>E-Ticaret Yönetim Paneli</strong>
        </div>

        <br>
        <form action="/urun-ara">
            <label for="arama">Ürün Ara:</label>
            <input type="search" id="arama" name="q" placeholder="Ürün kodu veya ismi...">
            <button type="submit">Bul</button>
        </form>

        <br>

        <nav>
            <ul>
                <li>Aktif Kullanıcı: <strong>Ahmet Yılmaz</strong></li>
                <li><a href="/bildirimler">Bildirimler (3)</a></li>
                <li><a href="/cikis">Güvenli Çıkış</a></li>
            </ul>
        </nav>
    </header>

</body>

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

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

<body>

    <header class="site-header">
        <h1>Yazılım Dünyası</h1>
        <nav class="site-nav">
            <a href="#">Anasayfa</a>
            <a href="#">Blog</a>
            <a href="#">Hakkımızda</a>
        </nav>
    </header>

    <main>
        <article>
            <header class="article-header">
                <h2>Semantik HTML Nedir?</h2>
                <div class="meta-info">
                    Yazar: <strong>Ahmet Yılmaz</strong> | Tarih: 25 Kasım 2025
                </div>
            </header>

            <p>
                Semantik HTML, etiketlerin sadece görünüme değil, içeriğin anlamına göre seçilmesidir.
                Bu yaklaşım, hem arama motorları hem de erişilebilirlik araçları için web sayfasını daha anlaşılır
                kılar.
            </p>
            <p>
                Örneğin, bir başlık için div yerine header kullanmak, o alanın giriş bölümü olduğunu netleştirir.
            </p>
        </article>
    </main>

</body>

</html>
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

.site-header {
    background-color: #2c3e50;
    color: #fff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.site-nav a {
    color: #ecf0f1;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
}

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

.article-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.article-header h2 {
    margin: 0 0 10px 0;
    color: #333;
}

.meta-info {
    font-size: 0.9em;
    color: #7f8c8d;
}
Seviye 5

Html <nav> Etiketi Navigasyon ve Yönlendirme Blokları

Genel Açıklama

<nav> ( Navigation - Gezinti ) etiketi, bir web sayfasının veya web sitesinin diğer sayfalarına ya da mevcut sayfanın farklı bölümlerine yönlendirme yapan bağlantı gruplarını kapsayan semantik bir yapı taşıdır.

Bu etiket, tarayıcılara ve yardımcı teknolojilere; "Burası sitenin haritasıdır, menüsüdür veya içindekiler tablosudur" mesajını verir.

Web sayfalarında bağlantılar ( <a> ) her yerde bulunabilir ancak <nav> etiketi, sadece ana gezinti blokları için ayrılmıştır.

Yani, bir paragrafın içindeki rastgele bir link veya alt bilgideki önemsiz linkler için değil; sitenin ana menüsü, sayfa içi içindekiler tablosu, ekmek kırıntısı yapıları veya sayfalama numaraları gibi, kullanıcının yönünü bulmasını sağlayan kritik link grupları için kullanılır.

Stratejik Kullanım ve Erişilebilirlik (A11Y)

<nav> etiketinin en büyük gücü, Erişilebilirlik alanında ortaya çıkar.

Görme engelli kullanıcıların kullandığı ekran okuyucular ( Screen Readers ), bu etiketi bir "Landmark" olarak algılar.

Bu sayede kullanıcılar, sayfanın içeriğini dinlemeye başlamadan önce tek bir tuşla doğrudan ana menüye atlayabilir veya tam tersi, uzun menüleri dinlemek zorunda kalmadan doğrudan içeriğe geçiş yapabilirler.

Bu nedenle, bir sayfada <nav> kullanırken seçici olmak önemlidir; sayfadaki her link grubunu <nav> içine almak, bu "işaret noktası" özelliğinin değerini düşürür ve kullanıcıyı gereksiz gürültüye boğar.

Genellikle <header> içindeki ana menü ve varsa <aside> içindeki kategori listeleri bu etiket için en ideal adaylardır; <footer> içindeki kısa linkler için ise kullanımı zorunlu değildir ancak yapısal bütünlük için tercih edilebilir.

</>
HTML <nav> Etiketi Uygulama Örneği 1 ( ) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Nav Saf HTML Örneği</title>
</head>

<body>

    <h1>HTML Eğitimi</h1>
    <p>Aşağıdaki bağlantıları kullanarak dersler arasında gezinebilirsiniz.</p>

    <hr>

    <nav aria-label="Ders Listesi">
        <h3>Ders İçeriği</h3>
        <ul>
            <li><a href="#giris">1. HTML Diline Giriş</a></li>
            <li><a href="#etiketler">2. Temel Etiketler</a></li>
            <li><a href="#formlar">3. Form Yapıları</a></li>
            <li><a href="#medya">4. Medya ve Görseller</a></li>
        </ul>
    </nav>

    <hr>

    <h2 id="giris">1. HTML'e Giriş</h2>
    <p>HTML, web sayfalarının iskeletini oluşturur...</p>

</body>

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

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

<body>

    <nav class="main-navigation" aria-label="Ana Menü">
        <ul>
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Ürünler</a></li>
            <li><a href="#">Hizmetler</a></li>
            <li><a href="#">Referanslar</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>

    <div style="padding: 40px;">
        <h1>Kurumsal Web Sitesi</h1>
        <p>Yukarıdaki koyu şerit, <code>&lt;nav&gt;</code> etiketi ile oluşturulmuş ana menüdür.</p>
    </div>

</body>

</html>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

.main-navigation {
    background-color: #333;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

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

.main-navigation a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.main-navigation a:hover {
    background-color: #555;
}
Seviye 5

Html <main> Etiketi Sayfanın Ana İçerik Gövdesi ve Odak Noktası

Genel Açıklama

<main> etiketi, HTML belgesinin <body> etiketi içindeki baskın ve asıl içeriği temsil eden, sayfanın benzersiz odak noktasını belirleyen semantik bir kapsayıcıdır.

Bir web sayfasında logo, ana menü, kenar çubukları veya telif hakkı bilgileri gibi her sayfada tekrar eden şablon yapıları bulunur; <main> etiketi, bu tekrarlayan yapıların dışında kalan ve o sayfayı diğerlerinden ayıran özgün içeriğin başladığı ve bittiği yeri tanımlar.

Yani tarayıcıya ve arama motorlarına; "Sayfanın geri kalanı dekorasyon veya navigasyondu, kullanıcının asıl okumak için geldiği içerik buradadır" mesajını verir.

Tekillik Kuralı ve Yapısal Kısıtlamalar

<main> etiketinin kullanımı, diğer semantik etiketlerden çok daha sıkı kurallara bağlıdır.

Standart bir HTML belgesinde, herhangi bir anda görünür durumda olan yalnızca bir tane <main> etiketi bulunmalıdır.

Bu etiket, sayfanın "tekil" ana konusunu temsil ettiği için bir HTML belgesinde genellikle yalnızca bir kez kullanılır.

Ayrıca <main> etiketi, yapısal olarak bir <article>, <aside>, <footer>, <header> veya <nav> etiketinin içine yerleştirilemez.

Bu kural, sayfanın ana içeriğinin bağımsız ve merkezi bir yapı olarak konumlandırılmasını sağlar.

Hiyerarşik olarak doğrudan yapısal akışın merkezinde olmalıdır.

Erişilebilirlik açısından bakıldığında ise bu etiket, ekran okuyucu kullanıcıları için hayati bir "Landmark" görevi görür.

"İçeriğe Atla" gibi özellikler, kullanıcıların uzun menüleri dinlemeden doğrudan bu etikete odaklanmasını sağlar.

Arama motorları da sayfanın ne hakkında olduğunu anlamak için öncelikli olarak bu etiketin içindeki metinleri ve görselleri analiz eder.

Sayfa Mimarisinde Main Etiketi

Modern bir web sayfasında <main> etiketi, sayfanın merkezi içerik alanını temsil eder ve genellikle diğer semantik yapıların arasında konumlanarak sayfanın ana bilgi akışını barındırır.

Bir sayfada başlık alanı, navigasyon menüleri veya alt bilgi gibi tekrarlayan yapılar bulunabilir; ancak <main> etiketi bu şablon bölümlerin dışında kalan ve sayfanın asıl konusunu oluşturan içerikleri kapsar.

Bu nedenle <main> etiketi, genellikle sayfa yapısının ortasında yer alır ve makaleler, içerik blokları veya ana bilgi bölümleri gibi kullanıcıların gerçekten okumak için geldiği içerikleri içerir.

Tarayıcılar, arama motorları ve erişilebilirlik araçları bu etiketi sayfanın birincil içerik alanı olarak değerlendirir.

Bu sayede sayfa yapısı hem insanlar hem de makineler için daha anlaşılır hale gelir ve kullanıcılar gereksiz navigasyon alanlarını geçerek doğrudan sayfanın ana içeriğine ulaşabilir.

Özellikle büyük web sitelerinde <main> etiketi, sayfanın yapısal organizasyonunu güçlendiren ve içerik hiyerarşisini netleştiren

mantıksal bir merkez noktası görevi görür.

</>
HTML <main> Etiketi Uygulama Örneği 1 ( ) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Main Etiketi Yapısı</title>
</head>

<body>

    <header>
        <h1>Teknoloji Haberleri</h1>
        <nav>
            <a href="#">Gündem</a> | <a href="#">Yazılım</a>
        </nav>
    </header>

    <hr>

    <main>
        <h2>Yapay Zeka Devrimi Başladı</h2>
        <p><strong>Yayın Tarihi:</strong> 25.11.2025</p>

        <p>
            Yapay zeka teknolojileri, sağlık sektöründen eğitime kadar
            birçok alanda köklü değişiklikler yapmaya hazırlanıyor.
            Uzmanlar, bu değişimin... (Makalenin devamı)
        </p>
    </main>

    <hr>

    <footer>
        <p>© 2025 Teknoloji Haberleri. Tüm hakları saklıdır.</p>
    </footer>

</body>

</html>
</>
HTML <main> Etiketi Uygulama Örneği 2 (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Etiketi Örnek (HTML + CSS)</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <header>Sistem Yönetim Paneli</header>

    <div class="content-wrapper">

        <aside>
            <ul>
                <li>Kontrol Paneli</li>
                <li>Kullanıcılar</li>
                <li>Ayarlar</li>
            </ul>
        </aside>

        <main>
            <h1>Kullanıcı Listesi</h1>
            <p>Sistemde kayıtlı toplam <strong>1.250</strong> kullanıcı bulunmaktadır.</p>
            <p>Burada tablolar, grafikler ve formlar yer alır...</p>
        </main>

    </div>

    <footer>Sürüm 1.0.2</footer>

</body>

</html>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

.content-wrapper {
    display: flex;
    flex: 1;
}

aside {
    background-color: #2c3e50;
    color: #ecf0f1;
    width: 200px;
    /* Sabit genişlik */
    padding: 20px;
}

main {
    background-color: #fff;
    flex: 1;
    padding: 30px;
}

footer {
    background-color: #7f8c8d;
    color: white;
    text-align: center;
    padding: 10px;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside li {
    margin-bottom: 10px;
    border-bottom: 1px solid #34495e;
    padding-bottom: 5px;
}
Seviye 5

Html <section> ve <article> Etiketleri Anlamsal Ayrım ve Kullanım Mantığı

Genel Açıklama

HTML5 standartlarıyla birlikte hayatımıza giren <section> ve <article> etiketleri, teknik olarak birbirine çok benzeyen ve çoğu zaman genel amaçlı <div> etiketinin yerini alan blok seviyesindeki kapsayıcılardır.

Ancak bu iki etiket arasındaki fark, görsel bir biçimlendirme farkı değil, tamamen mantıksal ve anlamsal bir ayrımdır.

Geliştirici Seçim İçin Temel Soru:Bu içerik, sayfanın geri kalanından koparılıp tek başına sunulduğunda bir anlam ifade ediyor mu?

Cevap: Eğer cevap "evet" ise <article>, "hayır" ise <section> kullanılması daha doğru olacaktır.

<article>: Kendi Kendine Yetebilen Bağımsız İçerik

<article> etiketi, adından da anlaşılacağı üzere, sayfanın genel akışından bağımsız olarak dağıtılabilir, yeniden kullanılabilir ve

tek başına okunduğunda dahi anlam bütünlüğünü koruyan içerikler için tasarlanmıştır.

Bunu test etmenin en iyi yolu "Sendikasyon Testi"dir:

Eğer bir içeriği web sayfasından kesip alıp bir RSS okuyucuda veya farklı bir platformda yayınladığınızda, içerik hala bağlamını koruyorsa o içerik bir <article>'dır.

Blog gönderileri, haber metinleri, forum yorumları veya bağımsız ürün kartları bu etiketin en doğru kullanım alanlarıdır.

<section>: Tematik Gruplama ve Bütünün Parçası

Öte yandan <section> etiketi, tek başına bağımsız bir varlık olmaktan ziyade, daha büyük bir bütünün tematik olarak ilişkili bir parçasını temsil eder.

Bir <section>, genellikle kendi içinde bir başlığa ( h1-h6 ) sahip olan içerik gruplarıdır; ancak bu grup ana bağlamdan koparıldığında

tek başına tam bir hikaye anlatmayabilir.

Örneğin: Bir makalenin "Giriş", "Yöntem" ve "Sonuç" bölümleri veya bir kurumsal web sitesinin ana sayfasındaki "Hakkımızda" ve "Hizmetler" şeritleri birer <section> olarak tanımlanmalıdır.

Semantik açıdan bir <section> etiketi genellikle kendi başlığıyla (h1-h6) başlar.

Bu başlık, bölümün konusunu tanımlar ve hem arama motorlarının hem de erişilebilirlik araçlarının sayfa yapısını daha doğru anlamasına yardımcı olur.

</>
HTML <article> ve <section> Etiketleri Uygulama Örneği 1 ( ) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section ve Article Mantığı</title>
</head>

<body>
    <article>
        <h1>Yapay Zeka ve Gelecek</h1>
        <p>Yazar: <strong>Ayşe Yılmaz</strong></p>

        <section>
            <h2>Tarihsel Gelişim</h2>
            <p>Yapay zeka kavramı 1950'li yıllara dayanmaktadır...</p>
        </section>

        <section>
            <h2>Günümüzdeki Uygulamalar</h2>
            <p>Bugün otonom araçlardan tıbbi teşhislere kadar...</p>
        </section>
    </article>

    <hr>

    <section>
        <h3>Okuyucu Yorumları</h3>

        <article>
            <p><strong>Mehmet:</strong> Harika bir yazı olmuş, teşekkürler!</p>
        </article>

        <article>
            <p><strong>Zeynep:</strong> Tarihçe kısmına daha fazla detay eklenebilirdi.</p>
        </article>
    </section>
</body>

</html>
</>
HTML <article> ve <section> Etiketleri Uygulama Örneği 2 (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Yapısı (Section ve Article)</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <section id="intro">
        <h2>Hoş Geldiniz</h2>
        <p>Dijital çözümler ortağınız olarak işinizi büyütüyoruz.</p>
    </section>

    <section id="services">
        <h2>Hizmetlerimiz</h2>

        <div class="cards-container">

            <article class="service-card">
                <h3>Web Tasarım</h3>
                <p>Modern ve mobil uyumlu web siteleri tasarlıyoruz.</p>
            </article>

            <article class="service-card">
                <h3>SEO Analizi</h3>
                <p>Arama motorlarında üst sıralara çıkmanızı sağlıyoruz.</p>
            </article>

            <article class="service-card">
                <h3>Mobil Uygulama</h3>
                <p>iOS ve Android için performanslı uygulamalar.</p>
            </article>

        </div>
    </section>
</body>

</html>
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    color: #333;
}

section {
    padding: 50px 20px;
    text-align: center;
}

#intro {
    background-color: #ecf0f1;
}

#services {
    background-color: #fff;
}

h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #2c3e50;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

article.service-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 250px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

article.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

article.service-card h3 {
    color: #e67e22;
}
Seviye 5

Html <aside> Etiketi Yan ve Tamamlayıcı İçerik

Genel Açıklama

<aside> etiketi, içerisinde barındırdığı içeriğin, etrafındaki ana içerikle dolaylı olarak ilişkili olduğunu, ancak o içeriğin ana akışının bir parçası olmadığını belirten semantik bir kapsayıcıdır.

Bu etiket, adından da anlaşılacağı üzere, genellikle "bir kenara not düşülen", ana konuyu destekleyen ama çıkarıldığında ana metnin

anlam bütünlüğünü bozmayan tamamlayıcı bilgileri temsil eder.

Görsel olarak web tasarımında çoğunlukla "Kenar Çubuğu" olarak kullanılsa da, <aside> etiketinin semantik anlamı "yan yana durmak" değil, "ilişkisel olarak yanda durmak"tır.

Kullanım Bağlamı ve İlişki Testi

<aside> etiketinin kullanımı, bulunduğu yere göre iki farklı anlam kazanabilir.

Eğer bu etiket <body> etiketinin doğrudan altında kullanılıyorsa; blog kategorileri, arşivler, reklamlar veya "son yorumlar" gibi tüm siteyle ilgili genel yan içerikleri temsil eder.

Ancak bir <article> etiketinin içinde kullanılıyorsa; o spesifik makaleyle ilgili bir terimler sözlüğü, yazar biyografisi veya konuyla ilgili "Bunları da okuyun" bağlantıları gibi yerel bir ilişkiyi temsil eder.

Temel Test: Bu içerik ana metni destekliyor mu? Eğer bu kutuyu sayfadan kaldırırsam, ana makalenin anlamı bozulur mu?

Cevap: Destekliyor ama kaldırıldığında ana metin hala anlaşılır ise, doğru etiket <aside>'dır.

Erişilebilirlik açısından ekran okuyucular bu etiketi "complementary" rolüyle tanımlar, bu da kullanıcıların ana içeriği bölmeden ek bilgilere ulaşmasını sağlar.

Önemli Nokta: <aside> etiketi yalnızca sayfanın sağ veya sol tarafında duran bir sidebar anlamına gelmez.

Bu etiket sayfanın herhangi bir yerinde bulunabilir; önemli olan konumu değil, ana içerikle kurduğu ilişki türüdür.

</>
HTML <aside> Etiketi Uygulama Örneği 1 ( ) 

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

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

<body>

    <div class="wrapper">

        <main>
            <h1>Web Geliştirme Yolculuğu</h1>
            <p>
                Web geliştirme, sürekli öğrenmeyi gerektiren dinamik bir süreçtir.
                HTML iskeleti oluşturur, CSS stil verir, JavaScript ise canlandırır.
            </p>
            <p>
                Bu üçlünün uyumu, modern web'in temelini atar. Semantik etiketler ise
                bu yapının sağlamlığını ve erişilebilirliğini artırır.
            </p>
        </main>

        <aside>
            <h3>İlgili Makaleler</h3>
            <nav>
                <ul>
                    <li><a href="#">Semantik HTML Nedir?</a></li>
                    <li><a href="#">CSS Flexbox Rehberi</a></li>
                    <li><a href="#">JavaScript Temelleri</a></li>
                </ul>
            </nav>

            <div class="ad-section">
                <h3>Reklam Alanı</h3>
                <div class="ad-box">
                    Sponsor Bağlantı
                </div>
            </div>
        </aside>

    </div>

</body>

</html>
</>
HTML <aside> 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>Aside Sidebar Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="wrapper">

        <main>
            <h1>Web Geliştirme Yolculuğu</h1>
            <p>
                Web geliştirme, sürekli öğrenmeyi gerektiren dinamik bir süreçtir.
                HTML iskeleti oluşturur, CSS stil verir, JavaScript ise canlandırır.
            </p>
            <p>
                Bu üçlünün uyumu, modern web'in temelini atar. Semantik etiketler ise
                bu yapının sağlamlığını ve erişilebilirliğini artırır.
            </p>
        </main>

        <aside>
            <h3>İlgili Makaleler</h3>
            <nav>
                <ul>
                    <li><a href="#">Semantik HTML Nedir?</a></li>
                    <li><a href="#">CSS Flexbox Rehberi</a></li>
                    <li><a href="#">JavaScript Temelleri</a></li>
                </ul>
            </nav>

            <div class="ad-section">
                <h3>Reklam Alanı</h3>
                <div class="ad-box">
                    Sponsor Bağlantı
                </div>
            </div>
        </aside>

    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    background-color: #f4f7f6;
    padding: 40px;
}

.wrapper {
    display: flex;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

main {
    flex: 3;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

aside {
    flex: 1;
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 20px;
    border-radius: 8px;
    height: fit-content;
}

aside h3 {
    border-bottom: 1px solid #7f8c8d;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.1em;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside li {
    margin-bottom: 10px;
}

aside a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s;
}

aside a:hover {
    color: #fff;
}

.ad-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #7f8c8d;
}

.ad-box {
    background-color: #34495e;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #95a5a6;
    font-size: 0.8em;
    border-radius: 4px;
}
Seviye 5
Genel Açıklama

<footer> etiketi, bir web sayfasının tamamının veya sayfa içindeki belirli bir bölümün ( makale, seksiyon ) kapanış ve alt bilgi kısmını tanımlayan semantik bir kapsayıcıdır.

Bu etiket, kullanıcıya ve tarayıcılara içeriğin sona erdiğini, ana konunun bittiğini ve artık referans bilgilerinin, yasal uyarıların veya yönlendirme linklerinin başladığını bildirir.

Genellikle web sitelerinin en altındaki "Telif Hakkı" şeridi olarak bilinse de, semantik web mimarisinde <footer> etiketi, içeriğin kaynağını, yazarlık bilgilerini veya ilgili bağlantıları sunan stratejik bir "kimlik kartı" görevi görür.

Bağlamsal Kullanım ve İçerik Standartları

Tıpkı <header> etiketinde olduğu gibi, <footer> etiketi de bağlamsal bir yapıya sahiptir; yani kullanımı sadece sayfanın en altıyla sınırlı değildir.

<body> etiketinin doğrudan çocuğu olarak kullanıldığında, tüm web sitesinin genel alt bilgisini kapsar.

Ancak bir <article> veya <section> içinde kullanıldığında, sadece o spesifik içeriğe ait dipnotları, yazar biyografisini, etiketleri veya "bunu paylaş" butonlarını barındırır.

Bu esneklik, bir sayfada birden fazla <footer> kullanılabilmesine olanak tanır.

Erişilebilirlik açısından bakıldığında, sayfa düzeyindeki ana <footer>, ekran okuyucular tarafından "contentinfo" rolüyle algılanır; bu da kullanıcıların yasal bilgilere hızla ulaşmasını sağlayan standart bir işaret noktasıdır.

Ek Açıklamalar ve Örnekler

Footer etiketi, sayfanın alt kısmında tek bir bölüm olarak kullanılabilir.

Örneğin: Bir web sitesinde tüm sayfalarda ortak olan küçük widget footer’ları, sosyal medya bağlantıları veya hızlı link blokları, ayrı ve bağımsız footer bölümleri olarak tanımlanabilir.

Kapanış Mantığı: Footer, kullanıcıya sayfanın sona erdiğini gösterir.

Ayrıca erişilebilirlik açısından, skip links veya gezinme araçları ile entegre edilerek, kullanıcıların ana içeriğe hızlıca atlamasına veya sayfa sonuna ulaşmasına yardımcı olur.

SEO Açısından Önemi: Footer içeriği, arama motorları açısından genellikle ana içerikten bağımsızdır.

Telif bilgileri, yazar detayları, ek linkler veya site haritası gibi meta destek bilgileri sunarak sayfanın yapısal bütünlüğünü ve SEO optimizasyonunu güçlendirir.

</>
HTML <footer> Etiketi Uygulama Örneği 1 ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer Temel Örnek</title>
</head>
<body>

    <article>
        <h1>Dijital Minimalizm</h1>
        <p>
            Teknolojiyi bilinçli kullanmak, hayat kalitemizi artıran en önemli faktörlerden biridir...
        </p>

        <footer>
            <p>Yazar: <strong>Elif Demir</strong></p>
            <p>Etiketler: Teknoloji, Yaşam, Sağlık</p>
        </footer>
    </article>

    <hr>

    <footer>
        <p>© 2025 Kişisel Blog. Tüm hakları saklıdır.</p>
        <p>
            <a href="/iletisim">İletişim</a> | 
            <a href="/gizlilik">Gizlilik Politikası</a>
        </p>
    </footer>

</body>
</html>
</>
HTML <footer> 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>Footer Tasarım Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <main>
        <h2>Sayfa İçeriği</h2>
        <p>Bu alan sayfanın ana gövdesidir. Footer en altta yer alır.</p>
    </main>

    <footer class="site-footer">
        <div class="footer-content">

            <div class="footer-section">
                <h4>Hakkımızda</h4>
                <p>Teknoloji ve yazılım dünyasındaki<br>en güncel gelişmeleri aktarıyoruz.</p>
            </div>

            <div class="footer-section">
                <h4>Hızlı Erişim</h4>
                <nav>
                    <ul>
                        <li><a href="#">Anasayfa</a></li>
                        <li><a href="#">Hizmetler</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </nav>
            </div>

            <div class="footer-section">
                <h4>İletişim</h4>
                <address style="font-style: normal;">
                    E-posta: bilgi@site.com<br>
                    Tel: +90 212 555 00 00
                </address>
            </div>

        </div>

        <div class="copyright">
            &copy; 2025 Teknoloji Portalı. Tasarım ve Kodlama: Yazılım Ekibi.
        </div>
    </footer>

</body>

</html>
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding: 20px;
}

.site-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 40px 0;
    font-size: 0.9em;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.footer-section h4 {
    color: #fff;
    margin-top: 0;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    display: inline-block;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section a {
    color: #bdc3c7;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #3498db;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #34495e;
    font-size: 0.8em;
}