Semantik etiketler, HTML belgelerinde içeriği daha anlamlı hale getirmek için kullanılan özel HTML etiketleridir. Bu etiketler, belgenin yapısını açıklar ve içerik elemanlarını anlamlı bağlamlar içinde düzenler. İşte semantik etiketlerin özeti ve bazı örnekleri:
-
<header>
Etiketi:- Sayfanın başlık, logo veya menü gibi üst kısmını temsil eder.
- Örnek:
<header> <h1>Web Sayfam</h1> <nav> <ul> <li>Ana Sayfa</li> <li>Hakkımızda</li> <li>İletişim</li> </ul> </nav> </header>
-
<nav>
Etiketi:- Navigasyon menüsünü temsil eder.
- Örnek:
<nav> <ul> <li>Ana Sayfa</li> <li>Hakkımızda</li> <li>İletişim</li> </ul> </nav>
-
<article>
Etiketi:- Bir makale veya içerik parçasını temsil eder.
- Örnek:
<article> <h2>Web Tasarımı</h2> <p>Web tasarımı, ...</p> </article>
-
<section>
Etiketi:- Sayfa içinde bağımsız bir bölümü temsil eder.
- Örnek:
<section> <h2>Ürünlerimiz</h2> <p>Ürünlerimiz hakkında bilgiler...</p> </section>
-
<aside>
Etiketi:- Sayfa içeriğinden bağımsız, yardımcı bilgileri temsil eder.
- Örnek:
<aside> <h3>Reklamlar</h3> <p>İlgili reklamlar burada...</p> </aside>
-
<footer>
Etiketi:- Sayfanın alt kısmını temsil eder ve genellikle iletişim bilgileri, telif hakları gibi bilgiler içerir.
- Örnek:
<footer> <p>© 2023 Web Sayfam</p> </footer>
Semantik etiketler, belge yapısını açıklamak ve tarayıcılar ile arama motorlarına içeriği daha anlamlı bir şekilde sunmak için kullanılır. Bu etiketlerin kullanımı, hem geliştirici hem de kullanıcı açısından daha iyi bir deneyim sağlar.