Etiket (HTML), web sayfasının yapısını ve içeriğini tanımlayan temel kod birimleridir.
Etiket (HTML), web sayfasının yapısını ve içeriğini tanımlayan temel kod birimleridir. Açılış işaretçisi () arasına yazılan bu kod bloklarının her biri, tarayıcıya belirli bir işlev hakkında bilgi verir. Örneğin <p> etiketi bir paragrafı, <h1> etiketi başlığı tanımlar.
Etiket (HTML), web sayfasının yapısını ve içeriğini tanımlayan temel kod birimleridir. Açılış işaretçisi (<) ve kapanış işaretçisi (>) arasına yazılan bu kod bloklarının her biri, tarayıcıya belirli bir işlev hakkında bilgi verir. Örneğin <p> etiketi bir paragrafı, <h1> etiketi başlığı tanımlar. HTML (HyperText Markup Language) dilinin temelini oluşturan etiketler, internet kullanıcılarının gördüğü her web sayfasının arkasında yer alır.
Etiket (HTML) Nasıl Çalışır
HTML etiketleri çift yapılı bir sisteme dayanır: açılış etiketi ve kapanış etiketi. Açılış etiketi, bir öğenin başladığını gösterir; kapanış etiketi ise aynı işaretin başına "/" işareti konarak yazılır ve öğenin sonlanmasını belirtir.
Örnek yapı:
<p>Bu bir paragraf metnidir.</p>
<h1>Ana Başlık</h1>
<a href="https://ornek.com">Bağlantı Metni</a>Tarayıcı bu etiketleri okuyarak, açılış ve kapanış etiketleri arasındaki içeriği belirlenen biçimde ekranda gösterir. Bazı etiketler (self-closing tags) ise kapanış etiketi gerektirmez; örneğin <img /> etiketi resim ekler ve kapatılmasına ihtiyaç duymaz.
Etiketler iç içe yerleştirilebilir (nesting), bu da daha karmaşık yapılar oluşturmaya olanak tanır:
<div>
<h2>Alt Başlık</h2>
<p>Bu paragraf <strong>vurgulu</strong> metni içerir.</p>
</div>Temel HTML Etiket Türleri
HTML etiketleri işlevlerine göre sınıflandırılır. İşte en yaygın kullanılan gruplar:
| Etiket Türü | Örnek | İşlevi |
|---|---|---|
| Başlık Etiketleri | <h1> — <h6> | Başlık ve alt başlıklar tanımlar (h1 en büyük, h6 en küçük) |
| Metin Etiketleri | <p>, <strong>, <em> | Paragraf, kalın metin, eğik metin oluşturur |
| Liste Etiketleri | <ul>, <ol>, <li> | Sırasız ve sıralı listeler oluşturur |
| Bağlantı ve Medya | <a>, <img>, <video> | Hyperlink, resim, video gibi medya öğeleri ekler |
| Yapı Etiketleri | <div>, <section>, <header> | Sayfayı bölümlere ayırarak düzenleme sağlar |
| Form Etiketleri | <form>, <input>, <button> | Kullanıcı girdisi almak için formlar oluşturur |
HTML Etiketlerinin Avantajları
- Standardizasyon: Tüm tarayıcılar HTML etiketlerini aynı şekilde yorumlar; bu sayede farklı cihazlarda uyumlu görüntüleme sağlanır.
- Semantik Yapı: Doğru etiketler kullanıldığında web sayfası arama motorları ve ekran okuyucular tarafından daha iyi anlaşılır.
- SEO Uyumluluğu: <h1>, <meta>, <title> gibi semantik etiketler, arama motoru optimizasyonunu güçlendirir.
- Erişilebilirlik: Uygun etiketler sayesinde görme engelli kullanıcılar ekran okuyucu yazılımını daha etkili kullanabilir.
- Kolay Bakım: Yapılandırılmış kod, yazılım geliştirici ekiplerinin projeyi anlaması ve güncellemesi kolaylaştırır.
HTML Etiketlerinin Dezavantajları
- Karmaşık Sözdizimi: Başlangıç aşamasındaki öğrenciler açılış/kapanış etiketleri yazarken hata yapabilir.
- Tasarım Sınırlaması: HTML yalnızca yapı tanımlar; görünüm için CSS gereklidir, bu da iki ayrı dil öğrenmeyi gerektiriyor.
- Browser Uyumluluğu Sorunları: Eski tarayıcılar bazı HTML5 etiketlerini desteklemeyebilir.
- Hata Toleransı Düşük: Yanlış yazılmış etiketler sayfanın bölümlerinin yanlış görüntülenmesine neden olabilir.
HTML Etiketleri Nerede Kullanılır
HTML etiketleri tüm web sayfaları, web uygulamaları ve statik siteler için temeldir:
- Haber Siteleri: Başlık, metin, resim etiketleriyle haberleri yapılandırır.
- E-Ticaret Platformları: Ürün listesi, fiyat, resim ve bağlantı etiketleriyle ürünleri tanımlar.
- Blog Sayfaları: Başlık, paragraf, yorum formu etiketleriyle içeriği düzenler.
- Sosyal Medya Profilleri: Web tabanlı sosyal ağlar HTML'i temel alır.
- Mobil Uygulamalar: Hibrit mobil uygulamalar (Electron, React Native) HTML tabanlı bileşenler kullanır.
- Email Tasarımı: HTML etiketleriyle zengin metin e-postalar oluşturulur.
Semantik Etiketler ve Önemi
HTML5'in sunduğu semantik etiketler, sayfanın yapısını daha anlamlı hale getirir. Bunlar:
- <header> — Sayfa veya bölüm başlığını tanımlar
- <nav> — Navigasyon linklerini gruplandırır
- <main> — Sayfanın ana içeriğini belirtir
- <article> — Bağımsız bir makaleyi tanımlar
- <section> — Sayfanın ilgili bölümlerini ayırır
- <footer> — Sayfa dipnotini veya ayak notunu tanımlar
Bu etiketler <div> etiketinden farklı olarak tarayıcı ve arama motorlarına içeriğin ne olduğu konusunda bilgi verir. SEO açısından ve erişilebilirlik bakımından çok önemlidir.
HTML Etiketleri Yazarken Dikkat Edilecek Noktalar
- Küçük Harf Kullanın: XHTML ve modern HTML standartlarında etiketler küçük harfle yazılmalıdır: <p> değil, <P> kullanmayın.
- Doğru İç İçe Yerleştirme: Etiketler birbiri içine kurallı şekilde yerleştirilmelidir; çakışan etiketler hatalıdır.
- Boşluk Yönetimi: İndentasyon (girinti) kodun okunabilirliğini arttırır.
- Attribute'ları Tırnak İçine Alın: <a href="https://ornek.com"> gibi attribute değerleri tırnak içinde yazılmalıdır.
- Alt Niteliğini Kullanın: Resimler için <img alt="açıklama" /> yazarak erişilebilirliği sağlayın.
"HTML etiketleri, web'in dilinin temelini oluştururlar. Doğru kullanım, sadece tarayıcıda güzel görüntülenen sayfalar değil, aynı zamanda semantik olarak doğru ve herkesin erişebileceği web sayfaları yaratır." — Web Standartları Rehberi