Merhaba MMOZirve Ailesi
HTML5 Rehberi : Anlamsal Kodlama (Semantic HTML) ile Sağlam Temel Atmak
HTML, bir web sayfasının omurgasıdır. Kodun sadece tarayıcı tarafından görüntülenmesi değil, aynı zamanda arama motorları, erişilebilirlik araçları ve diğer geliştiriciler tarafından doğru anlaşılması gerekir. İşte bu noktada Anlamsal HTML (Semantic HTML) devreye girer.
1. Anlamsal HTML Nedir ve Neden Hayati Önem Taşır?
Anlamsal HTML, etiketlerin içeriği hakkında anlam taşıdığı anlamına gelir. Örneğin, <div> kullanmak yerine, içeriğin bir makale başlığı olduğunu belirten <header> veya ana gezinme bölümü olduğunu belirten <nav> kullanmaktır.
- Erişilebilirlik (Accessibility): Ekran okuyucuları (screen readers), sayfadaki içerik akışını ve önemini bu etiketler sayesinde anlar. Örneğin, bir görme engelli kullanıcının doğrudan sayfadaki ana içeriğe (<main>) veya navigasyon menüsüne (<nav>) atlamasını sağlar.
- SEO (Arama Motoru Optimizasyonu): Google ve diğer arama motoru botları, bu etiketleri kullanarak sayfanın hangi kısımlarının önemli olduğunu ve ana içeriğin nerede olduğunu çok daha iyi anlar. Bu durum, arama sonuçlarında daha üst sıralarda yer alma şansını artırır.
- Okunabilirlik ve Bakım: Kodu okuyan diğer geliştiriciler (ya da altı ay sonraki sen), HTML yapısına baktığında kodun amacını anında kavrar.
2. En Sık Kullanılan Anlamsal Etiketler
Artık <div> veya <span> etiketlerini rastgele kullanmak yerine, içerik türüne göre doğru etiketleri kullanmanı öneririm.
- <header>: Bir belgenin, bölümün veya makalenin giriş içeriği veya başlık grubunu tanımlar. Genellikle site logosu ve navigasyon menüsü burada yer alır.
- <nav>: Ana gezinme bağlantılarını (menüleri) içerir.
- <main>: Belgenin ana içeriğini içerir ve sayfada yalnızca bir tane olmalıdır. Arama motorlarına sayfanın kritik içeriğini gösterir.
- <article>: Bağımsız ve kendi kendine anlam ifade eden bir içerik parçasını (örneğin bir blog yazısı, haber makalesi) tanımlar.
- <section>: Bir belgedeki tematik olarak gruplanmış içeriği tanımlar.
- <footer>: Bir belgenin, bölümün veya makalenin altbilgisini tanımlar. Genellikle telif hakkı bilgisi ve iletişim detayları burada yer alır.
3. Yeni Giriş ve Form Kontrolleri
HTML5 ile gelen yenilikler, özellikle form geliştirme sürecini çok kolaylaştırdı.
- Gelişmiş Form Tipleri: type="date", type="email", type="number", type="tel" gibi yeni input type'larını kullan. Bu tipler, mobil cihazlarda doğru klavye düzenini otomatik olarak açar ve tarayıcı düzeyinde temel doğrulama (validation) sağlar.
