HTML Semantik Elementler ve Örnekleri

HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel yapı taşlarından biridir. Semantik HTML, bir sayfanın yapısını ve içeriğini daha anlamlı hale getiren bir yaklaşımdır. Semantik elementler, web tarayıcılarına ve geliştiricilere sayfanın içeriği hakkında daha fazla bilgi sağlar. Bu yazımızda, semantik HTML elementler konusunu anlamaya ve kullanmaya yönelik temel bilgileri sunacağız.

Neden Semantik HTML Kullanmalıyız?

Semantik HTML, web sayfalarının erişilebilirliğini artırırken arama motorlarının sayfa içeriğini daha iyi anlamasına yardımcı olur. Aynı zamanda, sayfa tasarımını CSS (Cascading Style Sheets) ile ayrı tutarak kodun daha sürdürülebilir olmasını sağlar.

Başlıca Semantik Elementler ve Kullanımları

1. <header>

<header>
    <h1>Web Sitesi Başlığı</h1>
    <nav>
        <ul>
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Hizmetler</a></li>
        </ul>
    </nav>
</header>

<header> elementi, sayfanın üst kısmında bulunan başlık ve gezinme menüsünü içerir. Bu element, sayfanın ana başlığını ve ana navigasyonu temsil eder.

2. <nav>

<nav>
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Ürünler</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</nav>

<nav> elementi, sayfanın gezinme menüsünü gruplar. Bu sayede, kullanıcılar farklı sayfalar arasında kolayca geçiş yapabilir.

3. <main>

<main> elementi, sayfanın ana içeriğini temsil eder. İçerisindeki <article> elementleri, bağımsız içerik parçalarını ifade eder.

4. <article>

<article>
    <h2>Haber Başlığı</h2>
    <p>Haber içeriği burada yer alır.</p>
</article>

<article> elementi, sayfada bağımsız ve anlamlı içerik parçalarını belirtir. Haberler, blog yazıları gibi içerikler bu element içinde yer alabilir.

5. <section>

<section>
    <h2>Ürünlerimiz</h2>
    <p>Ürünlerimiz hakkında bilgi burada bulunur.</p>
</section>

<section> elementi, sayfayı farklı bölümlere ayırmak için kullanılır. Her bir <section> kendi başlığı ve içeriği ile ayrı bir bölümü temsil eder.

6. <footer>

<footer>
    <p>Telif Hakkı © 2023 Web Sitesi Adı</p>
    <nav>
        <ul>
            <li><a href="#">Gizlilik Politikası</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
</footer>

<footer> elementi, sayfanın alt kısmında yer alan telif hakkı bilgisi ve ek bağlantıları içerir. Genellikle iletişim bilgileri veya gizlilik politikası gibi bağlantılar burada bulunur.

Semantik HTML kullanmak, web sayfalarını daha anlamlı ve erişilebilir hale getirmenin önemli bir yoludur. Yukarıda belirtilen semantik elementler, sayfanın yapısını düzenlemek ve içeriği daha iyi anlamak için güçlü araçlar sunar. Bu elementleri doğru bir şekilde kullanarak, hem kullanıcı deneyimini artırabilir hem de web sayfanızın SEO performansını optimize edebilirsiniz. Bu yazımızda HTML semantik elementler konusunu anlattık. Umarım faydalı olmuştur. Diğer HTML dersleri yazılarımızı görmek isterseniz buraya tıklayabilirsiniz.