HTML 5: HTML Semantik Etiketler ve Sayfa Yapısı

Bu video, HTML5 semantik etiketlerinin önemi, kullanımı ve web sayfalarının yapısal olarak nasıl optimize edileceği üzerine odaklanmaktadır. İşte videodan öne çıkan başlıklar:

• Semantik Etiketlerin Amacı (0:14-1:13): Semantik etiketler, içeriğin anlamını tarayıcılar, arama motorları (SEO) ve yardımcı teknolojiler (ekran okuyucular) için daha belirgin hale getirir. Bu da hem erişilebilirliği artırır hem de SEO performansına katkı sağlar.
• Temel Semantik Etiketler (3:54-6:40):
  • header: Sayfa başlığı, logo ve navigasyon alanı.
  • nav: Menü ve linklerin bulunduğu navigasyon alanı.
  • main: Sayfanın ana içeriğini kapsayan bölüm.
  • section: Sayfa içindeki tematik anlamlı bölümler.
  • article: Bağımsız ve tekrar kullanılabilir içerik parçaları (blog yazıları gibi).
  • aside: Yan menüler veya ek bilgiler gibi tamamlayıcı içerikler.
  • footer: Telif hakkı ve iletişim bilgileri gibi alt bilgiler.
• SEO ve Erişilebilirlik (6:52-10:23):
  • Başlık hiyerarşisine (h1-h6) uyulması ve her sayfada sadece bir h1 kullanılması gerektiği vurgulanıyor.
  • Görsellerde alt metin kullanımı, formlarda label kullanımı ve renk kontrastlarına dikkat edilmesi gibi temel erişilebilirlik ilkeleri paylaşılıyor.
• ARIA (Accessible Rich Internet Applications) Kullanımı (10:24-12:44): Standart HTML etiketlerinin yetersiz kaldığı dinamik içeriklerde (açılır menüler, modallar vb.) erişilebilirliği artırmak için ARIA özelliklerinin (roller, durumlar, özellikler) nasıl kullanılacağı anlatılıyor. Ancak, semantik bir HTML etiketi yeterliyse ARIA kullanmaktan kaçınılması gerektiği önemle belirtiliyor.