Bölüm 5: Semantik HTML ve Modern Yapı Etiketleri

semantik-html-modern-yapi

Semantik HTML Nedir?

Semantik HTML, içeriğin anlamını ve yapısını açıkça tanımlayan HTML etiketlerinin kullanılmasıdır. Bu yaklaşım, web sayfalarını hem makineler hem de insanlar için daha anlaşılır hale getirir.

Semantik vs Non-Semantik

<!-- Non-Semantik (Eski Yöntem) -->
<div id="header">
    <div id="nav">...</div>
</div>
<div id="content">
    <div class="article">...</div>
    <div class="sidebar">...</div>
</div>
<div id="footer">...</div>
 
<!-- Semantik (Modern Yöntem) -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>

Sayfa Yapısı Etiketleri

Header Etiketi (`<header>`)

Sayfa veya bölümün başlık kısmını tanımlar:

<!-- Sayfa başlığı -->
<header>
    <h1>Site Adı</h1>
    <nav>
        <ul>
            <li><a href="#anasayfa">Ana Sayfa</a></li>
            <li><a href="#hakkimizda">Hakkımızda</a></li>
            <li><a href="#iletisim">İletişim</a></li>
        </ul>
    </nav>
</header>
 
<!-- Makale başlığı -->
<article>
    <header>
        <h2>Makale Başlığı</h2>
        <p>Yazar: Ahmet Yılmaz | Tarih: 15 Haziran 2025</p>
    </header>
    <p>Makale içeriği...</p>
</article>

Navigation Etiketi (`<nav>`)

Navigasyon linklerini gruplar:

<!-- Ana navigasyon -->
<nav role="navigation" aria-label="Ana menü">
    <ul>
        <li><a href="/">Ana Sayfa</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/hakkimizda">Hakkımızda</a></li>
        <li><a href="/iletisim">İletişim</a></li>
    </ul>
</nav>
 
<!-- Breadcrumb navigasyonu -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Ana Sayfa</a></li>
        <li><a href="/blog">Blog</a></li>
        <li aria-current="page">HTML Eğitimi</li>
    </ol>
</nav>
 
<!-- Sayfa içi navigasyon -->
<nav aria-label="İçerik menüsü">
    <h2>Bu sayfada:</h2>
    <ul>
        <li><a href="#giris">Giriş</a></li>
        <li><a href="#semantik-etiketler">Semantik Etiketler</a></li>
        <li><a href="#ornekler">Örnekler</a></li>
    </ul>
</nav>

Main Etiketi (`<main>`)

Sayfanın ana içeriğini tanımlar (her sayfada bir tane):

<main>
    <h1>Sayfa Ana Başlığı</h1>
    <section>
        <h2>Birinci Bölüm</h2>
        <p>Bölüm içeriği...</p>
    </section>
    <section>
        <h2>İkinci Bölüm</h2>
        <p>Bölüm içeriği...</p>
    </section>
</main>

Uyarı

Önemli: Bir sayfada sadece bir <main> etiketi olmalıdır ve <article>, <aside>, <footer>, <header> veya <nav> etiketlerinin içinde bulunmamalıdır.

Section Etiketi (`<section>`)

İlgili içeriği mantıksal bölümlere ayırır:

<main>
    <section>
        <h2>Şirket Tarihçesi</h2>
        <p>1990 yılında kurulan şirketimiz...</p>
    </section>
    
    <section>
        <h2>Misyonumuz</h2>
        <p>Teknoloji alanında öncü olmak...</p>
    </section>
    
    <section>
        <h2>Vizyonumuz</h2>
        <p>Geleceğin teknolojilerini bugünden...</p>
    </section>
</main>

Article Etiketi (`<article>`)

Bağımsız, kendi başına anlam ifade eden içerik:

<!-- Blog makalesi -->
<article>
    <header>
        <h2>HTML5 Semantik Etiketler</h2>
        <time datetime="2025-06-15">15 Haziran 2025</time>
        <address>Yazan: <a href="/author/ahmet">Ahmet Yılmaz</a></address>
    </header>
    
    <p>HTML5 ile gelen semantik etiketler...</p>
    
    <section>
        <h3>Temel Kavramlar</h3>
        <p>Semantik HTML'in temel kavramları...</p>
    </section>
    
    <footer>
        <p>Etiketler: 
            <a href="/tag/html5">HTML5</a>, 
            <a href="/tag/semantik">Semantik</a>
        </p>
    </footer>
</article>
 
<!-- Ürün kartı -->
<article>
    <h3>MacBook Pro</h3>
    <img src="macbook.jpg" alt="MacBook Pro">
    <p>Profesyonel kullanım için tasarlanmış...</p>
    <p>Fiyat: <data value="25000">25.000 TL</data></p>
    <button>Sepete Ekle</button>
</article>

Aside Etiketi (`<aside>`)

Ana içeriğe ek bilgi sağlayan yan içerik:

<main>
    <article>
        <h1>Web Geliştirme Rehberi</h1>
        <p>Web geliştirme süreçleri...</p>
    </article>
    
    <aside>
        <h2>İlgili Makaleler</h2>
        <ul>
            <li><a href="/css-rehberi">CSS Rehberi</a></li>
            <li><a href="/js-rehberi">JavaScript Rehberi</a></li>
        </ul>
        
        <h2>Reklam</h2>
        <div class="advertisement">
            <!-- Reklam içeriği -->
        </div>
    </aside>
</main>

Footer Etiketi (`<footer>`)

Sayfa veya bölümün alt bilgilerini içerir:

<!-- Sayfa footer'ı -->
<footer>
    <div class="footer-content">
        <section>
            <h3>İletişim</h3>
            <address>
                <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                <p>Telefon: <a href="tel:+905551234567">0555 123 45 67</a></p>
            </address>
        </section>
        
        <section>
            <h3>Hızlı Linkler</h3>
            <ul>
                <li><a href="/gizlilik">Gizlilik Politikası</a></li>
                <li><a href="/kullanim-sartlari">Kullanım Şartları</a></li>
                <li><a href="/sitemap">Site Haritası</a></li>
            </ul>
        </section>
    </div>
    
    <div class="copyright">
        <p>&copy; 2025 Şirket Adı. Tüm hakları saklıdır.</p>
    </div>
</footer>
 
<!-- Makale footer'ı -->
<article>
    <h2>Blog Yazısı</h2>
    <p>İçerik...</p>
    
    <footer>
        <p>Yayın tarihi: <time datetime="2025-06-15">15 Haziran 2025</time></p>
        <p>Kategori: <a href="/kategori/teknoloji">Teknoloji</a></p>
    </footer>
</article>

İçerik Etiketleri

Time Etiketi (`<time>`)

Tarih ve zaman bilgilerini semantik olarak tanımlar:

<!-- Tarih -->
<time datetime="2025-06-15">15 Haziran 2025</time>
 
<!-- Tarih ve saat -->
<time datetime="2025-06-15T14:30:00">15 Haziran 2025, 14:30</time>
 
<!-- Süre -->
<time datetime="PT2H30M">2 saat 30 dakika</time>
 
<!-- Makale tarihi -->
<article>
    <h2>Blog Yazısı</h2>
    <p>Yayın tarihi: <time datetime="2025-06-15" pubdate>15 Haziran 2025</time></p>
</article>

Address Etiketi (`<address>`)

İletişim bilgilerini tanımlar:

<address>
    <p>Makale yazarı: <a href="mailto:[email protected]">Ahmet Yılmaz</a></p>
    <p>Telefon: <a href="tel:+905551234567">0555 123 45 67</a></p>
</address>
 
<footer>
    <address>
        <p>Şirket Adresi:</p>
        <p>İstanbul Caddesi No: 123<br>
           Ankara, Türkiye</p>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
</footer>

Details ve Summary (`<details>`, `<summary>`)

Açılır/kapanır içerik alanları:

<details>
    <summary>SSS: HTML nedir?</summary>
    <p>HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan işaretleme dilidir.</p>
</details>
 
<details open>
    <summary>Önemli Not</summary>
    <p>Bu bilgi önemli olduğu için varsayılan olarak açık görünür.</p>
</details>
 
<!-- Karmaşık içerik -->
<details>
    <summary>İletişim Formu</summary>
    <form>
        <label for="name">Adınız:</label>
        <input type="text" id="name" name="name">
        
        <label for="email">E-posta:</label>
        <input type="email" id="email" name="email">
        
        <button type="submit">Gönder</button>
    </form>
</details>

Mark Etiketi (`<mark>`)

Vurgulanmış veya işaretlenmiş metni tanımlar:

<p>Arama sonuçlarında <mark>HTML</mark> kelimesi vurgulanmıştır.</p>
 
<p>Önemli bilgi: <mark>Son başvuru tarihi 30 Haziran'dır.</mark></p>
 
<!-- Arama sonuçlarında -->
<article>
    <h3>Web Geliştirme Makalesi</h3>
    <p><mark>HTML</mark> ve CSS ile modern web sayfaları oluşturmak...</p>
</article>

Data Etiketleri

Data Etiketi (`<data>`)

Makine tarafından okunabilir veri sağlar:

<p>Ürün fiyatı: <data value="2500">2.500 TL</data></p>
 
<ul>
    <li><data value="tr">Türkiye</data></li>
    <li><data value="us">Amerika Birleşik Devletleri</data></li>
    <li><data value="de">Almanya</data></li>
</ul>
 
<!-- Sıralama için -->
<table>
    <tr>
        <td><data value="2024-06-15">15 Haziran 2024</data></td>
        <td><data value="1500">1.500 TL</data></td>
    </tr>
</table>

Meter ve Progress

Meter Etiketi (Ölçüm)

<!-- Disk kullanımı -->
<p>Disk kullanımı: <meter value="75" min="0" max="100">%75</meter></p>
 
<!-- Puan -->
<p>Değerlendirme: <meter value="8.5" min="0" max="10" optimum="9">8.5/10</meter></p>
 
<!-- Sıcaklık -->
<p>Sıcaklık: <meter value="25" min="-10" max="40" optimum="20" high="30">25°C</meter></p>

Progress Etiketi (İlerleme)

<!-- Dosya yükleme -->
<p>Yükleme ilerlemesi: <progress value="65" max="100">%65</progress></p>
 
<!-- Form tamamlanma -->
<p>Form doldurma: <progress value="3" max="5">3/5 adım</progress></p>
 
<!-- Belirsiz ilerleme -->
<p>İşlem devam ediyor: <progress>Yükleniyor...</progress></p>

Kapsamlı Semantik Sayfa Örneği

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Web geliştirme blog sitesi - HTML, CSS, JavaScript dersleri">
    <title>TechBlog - Web Geliştirme Rehberi</title>
</head>
<body>
    <!-- Site başlığı -->
    <header role="banner">
        <h1>TechBlog</h1>
        <p>Web Geliştirme Rehberi</p>
        
        <!-- Ana navigasyon -->
        <nav role="navigation" aria-label="Ana menü">
            <ul>
                <li><a href="/" aria-current="page">Ana Sayfa</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/kurslar">Kurslar</a></li>
                <li><a href="/hakkimizda">Hakkımızda</a></li>
                <li><a href="/iletisim">İletişim</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Ana içerik -->
    <main role="main">
        <!-- Breadcrumb -->
        <nav aria-label="Sayfa konumu">
            <ol>
                <li><a href="/">Ana Sayfa</a></li>
                <li><a href="/blog">Blog</a></li>
                <li aria-current="page">HTML5 Semantik Etiketler</li>
            </ol>
        </nav>
        
        <!-- Blog makalesi -->
        <article>
            <header>
                <h1>HTML5 Semantik Etiketler Rehberi</h1>
                <p>
                    <time datetime="2025-06-15" pubdate>15 Haziran 2025</time> tarihinde
                    <address>
                        <a href="/yazar/ahmet-yilmaz" rel="author">Ahmet Yılmaz</a>
                    </address>
                    tarafından yayınlandı
                </p>
                <p>Okuma süresi: <time datetime="PT10M">10 dakika</time></p>
            </header>
            
            <section id="giris">
                <h2>Giriş</h2>
                <p>HTML5 ile gelen semantik etiketler, web sayfalarının yapısını daha anlamlı hale getirir...</p>
                
                <details>
                    <summary>Bu makalede neler öğreneceksiniz?</summary>
                    <ul>
                        <li>Semantik etiketlerin faydaları</li>
                        <li>Temel yapı etiketleri</li>
                        <li>İçerik etiketleri</li>
                        <li>Pratik örnekler</li>
                    </ul>
                </details>
            </section>
            
            <section id="temel-kavramlar">
                <h2>Temel Kavramlar</h2>
                <p>Semantik HTML, <mark>içeriğin anlamını</mark> tanımlayan etiketlerin kullanılmasıdır.</p>
                
                <figure>
                    <img src="semantic-structure.png" alt="Semantik HTML yapı şeması">
                    <figcaption>HTML5 semantik yapı örneği</figcaption>
                </figure>
            </section>
            
            <section id="etiket-listesi">
                <h2>Semantik Etiketler</h2>
                <dl>
                    <dt><code>header</code></dt>
                    <dd>Sayfa veya bölüm başlığı</dd>
                    
                    <dt><code>nav</code></dt>
                    <dd>Navigasyon menüsü</dd>
                    
                    <dt><code>main</code></dt>
                    <dd>Ana içerik alanı</dd>
                    
                    <dt><code>article</code></dt>
                    <dd>Bağımsız içerik</dd>
                    
                    <dt><code>section</code></dt>
                    <dd>İlgili içerik bölümü</dd>
                    
                    <dt><code>aside</code></dt>
                    <dd>Yan içerik</dd>
                    
                    <dt><code>footer</code></dt>
                    <dd>Alt bilgi alanı</dd>
                </dl>
            </section>
            
            <footer>
                <p>Bu makale 
                    <data value="1250">1.250</data> kez okundu.
                </p>
                <p>Etiketler: 
                    <a href="/etiket/html5">HTML5</a>, 
                    <a href="/etiket/semantik">Semantik</a>,
                    <a href="/etiket/web-gelistirme">Web Geliştirme</a>
                </p>
                
                <details>
                    <summary>Makaleyi paylaş</summary>
                    <ul>
                        <li><a href="#" target="_blank">Twitter'da paylaş</a></li>
                        <li><a href="#" target="_blank">Facebook'ta paylaş</a></li>
                        <li><a href="#" target="_blank">LinkedIn'de paylaş</a></li>
                    </ul>
                </details>
            </footer>
        </article>
        
        <!-- İlgili makaleler -->
        <section>
            <h2>İlgili Makaleler</h2>
            
            <article>
                <h3><a href="/css-flexbox">CSS Flexbox Rehberi</a></h3>
                <p>Modern CSS layout teknikleri...</p>
                <time datetime="2025-06-10">10 Haziran 2025</time>
            </article>
            
            <article>
                <h3><a href="/javascript-es6">JavaScript ES6 Özellikleri</a></h3>
                <p>Modern JavaScript programlama...</p>
                <time datetime="2025-06-05">5 Haziran 2025</time>
            </article>
        </section>
    </main>
    
    <!-- Yan panel -->
    <aside role="complementary">
        <section>
            <h2>Popüler Makaleler</h2>
            <ol>
                <li><a href="/html-temelleri">HTML Temelleri</a></li>
                <li><a href="/css-giris">CSS'e Giriş</a></li>
                <li><a href="/javascript-baslangic">JavaScript Başlangıç</a></li>
            </ol>
        </section>
        
        <section>
            <h2>Yazar Hakkında</h2>
            <address>
                <p><strong>Ahmet Yılmaz</strong></p>
                <p>10 yıllık deneyimli web geliştiricisi</p>
                <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                <p>Twitter: <a href="https://twitter.com/ahmetyilmaz">@ahmetyilmaz</a></p>
            </address>
        </section>
        
        <section>
            <h2>İstatistikler</h2>
            <p>Site ziyaretçileri: <meter value="850" min="0" max="1000">850/1000</meter></p>
            <p>Bu ay yazılan makale: <progress value="15" max="20">15/20</progress></p>
        </section>
    </aside>
    
    <!-- Site alt bilgisi -->
    <footer role="contentinfo">
        <div>
            <section>
                <h3>TechBlog</h3>
                <p>Web geliştirme konularında güncel içerikler sunan blog sitesi.</p>
            </section>
            
            <section>
                <h3>Kategoriler</h3>
                <ul>
                    <li><a href="/kategori/html">HTML</a></li>
                    <li><a href="/kategori/css">CSS</a></li>
                    <li><a href="/kategori/javascript">JavaScript</a></li>
                    <li><a href="/kategori/backend">Backend</a></li>
                </ul>
            </section>
            
            <section>
                <h3>İletişim</h3>
                <address>
                    <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                    <p>Telefon: <a href="tel:+905551234567">0555 123 45 67</a></p>
                    <p>Adres: İstanbul, Türkiye</p>
                </address>
            </section>
        </div>
        
        <div>
            <p>&copy; <time datetime="2025">2025</time> TechBlog. Tüm hakları saklıdır.</p>
            <nav aria-label="Yasal sayfalar">
                <ul>
                    <li><a href="/gizlilik">Gizlilik Politikası</a></li>
                    <li><a href="/kullanim-sartlari">Kullanım Şartları</a></li>
                    <li><a href="/cerez-politikasi">Çerez Politikası</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

SEO ve Erişilebilirlik Faydaları

SEO Faydaları

Arama motorları içeriği daha iyi anlar
Sayfa yapısı net şekilde belirtilir
İçerik hiyerarşisi açık olur
Zengin snippet’ler desteklenir

Erişilebilirlik Faydaları

Ekran okuyucular sayfa yapısını anlayabilir
Klavye navigasyonu gelişir
İçerik mantıklı sırada okunur
ARIA etiketleri ile uyumlu çalışır

Ipucu

İpucu: HTML5 semantik etiketlerini kullanırken ARIA (Accessible Rich Internet Applications) etiketleri ile destekleyerek erişilebilirliği daha da artırabilirsiniz.

ARIA Rolleri ve Semantik HTML

<!-- ARIA rolleri semantik etiketlerle uyumlu -->
<header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
 
<!-- Özel durumlar için ARIA -->
<div role="article">
<div role="button" tabindex="0">
<span role="alert">Hata mesajı</span>

Özet ve Ödev

Bu bölümde öğrendikleriniz:

✅ HTML5 semantik etiketleri ve kullanım alanları
✅ Sayfa yapısı etiketleri (header, nav, main, section, article, aside, footer)
✅ İçerik etiketleri (time, address, details, mark, data, meter, progress)
✅ SEO ve erişilebilirlik faydaları
✅ Pratik sayfa yapısı örnekleri

Pratik Ödev

Blog sayfası oluşturun:
- Semantik yapı etiketleri kullanın
- Makale başlığı, tarih, yazar bilgileri ekleyin
- İlgili makaleler bölümü oluşturun
- Yorum formu ekleyin
Şirket web sitesi ana sayfası oluşturun:
- Header, nav, main, aside, footer kullanın
- Hakkımızda, hizmetler, iletişim bölümleri
- İstatistik göstergeleri (meter/progress)
- İletişim bilgileri (address etiketi)

Sonraki bölümde HTML tabloları ve gelişmiş veri gösterimi tekniklerini öğreneceksiniz!