header, nav, main, section, article, aside, footer etiketleri ile anlamlı sayfa yapısı.
Semantik etiketler içeriğin ne anlama geldiğini hem tarayıcıya hem Google'a hem de geliştiriciye söyler. div kullanmak yerine anlamlı etiketler kullanmak SEO ve erişilebilirlik açısından kritiktir.
div anlamsız bir kaptır. header, nav, main gibi etiketler içeriğin rolünü belirtir. Google semantik etiketleri okuyarak sayfanın yapısını anlar.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Semantik HTML</title>
</head>
<body>
<header>
<h1>Site Başlığı</h1>
<nav>
<ul>
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/hakkinda">Hakkında</a></li>
<li><a href="/iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Öne Çıkan Haberler</h2>
<article>
<h3>Haber Başlığı</h3>
<p>Haber içeriği buraya gelir...</p>
</article>
</section>
<aside>
<h3>Yan Panel</h3>
<p>Reklam veya ilgili içerikler</p>
</aside>
</main>
<footer>
<p>© 2024 Furkan Bacanlı. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>