Yükleniyor...

Anlamsal HTML

Anlamsal HTML, web sayfalarındaki içeriklerin anlamına uygun, yapısal ve açıklayıcı HTML etiketlerinin kullanılmasıdır. Bu, bir evi inşa etmeye benzer; her oda belirli bir amaç için tasarlanmıştır ve doğru yerleştirildiğinde evin düzeni ve kullanımı kolaylaşır. Anlamsal HTML, hem kullanıcılar hem de arama motorları ve ekran okuyucular gibi yardımcı teknolojiler için içeriğin ne anlama geldiğini açıkça belirtir.
Kişisel web siteleri, bloglar, e-ticaret platformları ve haber sitelerinde anlamsal HTML kullanımı, sayfanın yapısını düzenli hale getirir, erişilebilirliği artırır ve SEO performansını geliştirir. Örneğin, blogda her yazı <article> etiketiyle tanımlanır, ürün listesi e-ticaret sitesinde <section> içinde organize edilir. Bu eğitimde, anlamsal HTML'nin temel prensiplerini öğrenecek, pratik örneklerle uygulama yapacak ve kodunuzu daha okunabilir ve sürdürülebilir hale getireceksiniz.

Temel Örnek

html
HTML Code 
<header>
<h1>Kişisel Web Sitem</h1> <!-- Main site title -->
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li> <!-- Navigation links -->
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blog Yazısı Başlığı</h2>
<p>Bu, blog yazısının içeriğidir.</p>
</article>
</main>
<footer>
<p>© 2025 Tüm Hakları Saklıdır</p>
</footer>

Bu örnek, temel anlamsal HTML yapısını gösterir. <header> alanı sayfanın başlığı ve navigasyon menüsünü içerir; bu, kullanıcıların site içinde kolayca gezinmesini sağlar. <nav> etiketi, sayfanın navigasyon bölümünü belirtir ve ekran okuyucular gibi yardımcı teknolojiler için önemlidir.
<main> etiketi, sayfanın ana içeriğini barındırır ve burada bir <article> kullanılarak bağımsız bir blog yazısı tanımlanmıştır. <article>, içeriğin ayrı bir bölüm olduğunu ve kendi başına anlam taşıdığını belirtir. Son olarak <footer>, sayfanın alt kısmındaki telif hakkı gibi bilgileri içerir.
Bu yapıyı kullanmak, içeriğin anlamlı şekilde organize edilmesini sağlar ve hem kullanıcı deneyimini hem de arama motoru optimizasyonunu iyileştirir. Yeni başlayanlar için, her etiketi uygun amaç için kullanmak önemlidir ve gereksiz <div> kullanmaktan kaçınılmalıdır.

Pratik Örnek

html
HTML Code 
<header>
<h1>Teknoloji Haberleri</h1>
<nav aria-label="Ana Menü">
<ul>
<li><a href="/sondakika">Son Dakika</a></li>
<li><a href="/incelemeler">İncelemeler</a></li>
<li><a href="/iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<section aria-labelledby="haberler">
<h2 id="haberler">Son Haberler</h2>
<article>
<h3>Yeni Akıllı Telefon Tanıtıldı</h3>
<p>Özellikler ve fiyat bilgisi burada yer alır.</p>
</article>
<article>
<h3>Yapay Zeka Gelişmeleri</h3>
<p>Güncel yapay zeka teknolojileri hakkında bilgiler.</p>
</article>
</section>
<aside>
<h2>Editörün Notu</h2>
<p>Teknoloji alanındaki deneyimler ve yorumlar.</p>
</aside>
</main>
<footer>
<p>© 2025 Teknoloji Haberleri</p>
</footer>

Anlamsal HTML için bazı önemli en iyi uygulamalar şunlardır:

  1. İçeriği uygun anlamsal etiketlerle sarmak; örneğin, bağımsız içerikler için <article>, içerik grupları için <section>, yan bilgiler için <aside>.
  2. Navigasyon için <nav> kullanmak ve erişilebilirlik adına aria-label gibi yardımcı ARIA özniteliklerini eklemek.
  3. Başlık hiyerarşisine dikkat ederek <h1>'den başlayıp alt başlıklara doğru devam etmek.
  4. Gereksiz <div> kullanımından kaçınmak ve mümkün olan yerlerde anlamsal etiketler tercih etmek.
    Yaygın hatalar arasında; anlamsız <div> veya <span> kullanmak, başlık seviyelerini karıştırmak, anlamsal etiketleri yanlış yerde kullanmak ve erişilebilirlik özniteliklerini eklememek bulunur.
    Kodunuzu doğrulamak için W3C validator veya tarayıcı geliştirme araçları kullanılabilir. Erişilebilirlik testleri içinse Lighthouse veya axe gibi araçlar tavsiye edilir.

📊 Hızlı Referans

Etiket Açıklama Örnek
header Sayfanın veya bölümün başlığı <header><h1>Başlık</h1></header>
nav Navigasyon menüsü <nav><ul><li><a href="#">Link</a></li></ul></nav>
main Ana içerik alanı <main><article>...</article></main>
article Bağımsız içerik parçası <article><h2>Yazı Başlığı</h2></article>
section İlgili içerik grubu <section><h2>Bölüm Başlığı</h2></section>
aside Yan içerik veya ek bilgi <aside><p>Bilgi</p></aside>
footer Sayfa alt bilgisi <footer><p>© 2025</p></footer>

Anlamsal HTML kullanarak web sayfalarınızı daha anlaşılır, erişilebilir ve SEO dostu yapabilirsiniz. Bu yapı, CSS ve JavaScript ile etkileşimde bulunmayı kolaylaştırır çünkü her içerik bloğu net bir rol taşır.
Bir sonraki adım olarak, web erişilebilirliği (ARIA özellikleri), SEO teknikleri ve responsive tasarım konularını öğrenmek faydalı olacaktır. Pratik yaparak ve gerçek projeler geliştirerek bu bilgilerinizi pekiştirebilirsiniz.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 13 / 51
Html Ders