Tamer Çelenk

Web teknolojileri hızla gelişiyor ve her yeni sürümde daha güçlü, daha esnek ve kullanıcı dostu özellikler sunuluyor. Bu yazımızda, HTML5 ile gelen yeni etiketler ve özelliklere odaklanacağız. HTML5, web geliştiricilerine daha modern, semantik ve erişilebilir web sayfaları oluşturmak için birçok yeni araç sunuyor. Peki, HTML5 ile neler geldi? İşte HTML5’in getirdiği yenilikler!

HTML5 Nedir?

HTML5, web sayfalarını oluşturmak için kullanılan HTML (HyperText Markup Language) dilinin beşinci sürümüdür. HTML5, önceki sürümlere kıyasla daha fazla özellik ve fonksiyon sunarak web geliştirme sürecini daha verimli hale getirmiştir. HTML5, özellikle multimedya içeriği ve interaktif özellikler için genişletilmiş destek sağlamakta, ayrıca sayfa yapısını daha anlaşılır ve semantik hale getirmektedir.

HTML5 ile Gelen Yeni Etiketler

HTML5, sayfa yapısını oluştururken daha anlamlı ve semantik etiketler sunuyor. Bu etiketler, hem geliştiricilerin işini kolaylaştırıyor hem de arama motorlarının ve ekran okuyucularının sayfa içeriğini daha iyi anlamasını sağlıyor. İşte HTML5 ile gelen başlıca yeni etiketler:

1. <article>

• Amaç: Bağımsız ve anlamlı içerik parçalarını tanımlar. Örneğin, bir haber makalesi veya blog yazısı.
• Kullanım:

<article>
    <h2>Yeni Yazı Başlığı</h2>
    <p>Bu, yeni yazının içeriğidir.</p>
</article>

2. <section>

• Amaç: Sayfa içindeki belirli bir bölüm veya konuyu tanımlar. Genellikle başlıkları içerir.
• Kullanım:

<section>
    <h2>Hakkımızda</h2>
    <p>Şirketimiz hakkında bilgi burada yer alır.</p>
</section>

3. <nav>

• Amaç: Sayfa içindeki navigasyon linklerini tanımlar. Ana menü veya diğer navigasyon öğeleri bu etiket içinde bulunur.
• Kullanım:

<nav>
    <ul>
        <li><a href="#home">Ana Sayfa</a></li>
        <li><a href="#about">Hakkımızda</a></li>
    </ul>
</nav>

4. <header> ve <footer>

• Amaç: Sayfanın üst ve alt kısmındaki yapıları tanımlar. Başlık ve alt bilgi içerir.
• Kullanım:

<header>
    <h1>Web Sitesi Başlığı</h1>
    <nav>...</nav>
</header>
<footer>
    <p>&copy; 2025 Web Sitesi. Tüm Hakları Saklıdır.</p>
</footer>

5. <aside>

• Amaç: Sayfanın ana içeriğinden bağımsız olan ancak ilişkili olan ek içerikleri belirtir. Yan panel, reklamlar veya bağlantılar için kullanılabilir.
• Kullanım:

<aside>
    <h3>İlgili Yazılar</h3>
    <ul>
        <li><a href="#">Yazı 1</a></li>
        <li><a href="#">Yazı 2</a></li>
    </ul>
</aside>

6. <figure> ve <figcaption>

• Amaç: Görsellerin veya diğer medya öğelerinin etrafında açıklamalar eklemek için kullanılır.
• Kullanım:

<figure>
    <img src="resim.jpg" alt="Örnek Resim">
    <figcaption>Bu, örnek resmin açıklamasıdır.</figcaption>
</figure>

7. <mark>

• Amaç: Belirli metinleri vurgulamak için kullanılır. Genellikle arama sonuçlarında vurgulanan metin için uygundur.
• Kullanım:

<p>Bu cümlede <mark>HTML5</mark> yeni bir özellik ekledi.</p>

HTML5 Yeni Özellikler

HTML5, yalnızca yeni etiketler eklemekle kalmaz, aynı zamanda daha güçlü özellikler ve API’ler de sunar. İşte HTML5’in sunduğu bazı önemli özellikler:

1. Yeni Medya Etiketleri: <audio> ve <video>

• HTML5 ile birlikte, web sayfalarına ses ve video eklemek çok daha kolay hale geldi. Bu etiketlerle, özel bir medya oynatıcıya gerek kalmadan medya içeriği sayfada doğrudan oynatılabilir.
• Kullanım (Video):

<video controls>
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video etiketini desteklemiyor.
</video>

• Kullanım (Ses):

<audio controls>
    <source src="ses.mp3" type="audio/mp3">
    Tarayıcınız ses etiketini desteklemiyor.
</audio>

2. Yerel Depolama (Local Storage) ve Seans Depolama (Session Storage)

• HTML5, tarayıcıda veri depolamak için yerel depolama (localStorage) ve oturum depolama (sessionStorage) özelliklerini sunar. Bu, sayfa yeniden yüklense bile verilerin saklanmasına olanak tanır.
• Kullanım (Yerel Depolama):

localStorage.setItem("isim", "Ahmet");
console.log(localStorage.getItem("isim"));

3. Geolocation API

• HTML5, kullanıcıların konum bilgilerini almak için Geolocation API’yi sunar. Bu özellik, harita uygulamaları veya konum tabanlı hizmetlerde yaygın olarak kullanılır.
• Kullanım:

navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Enlem: " + position.coords.latitude);
    console.log("Boylam: " + position.coords.longitude);
});

4. Canvas ve SVG

• HTML5, dinamik grafikler oluşturmak için <canvas> öğesini tanıttı. Bu özellik, oyunlar ve etkileşimli grafikler oluşturmayı kolaylaştırır. Ayrıca SVG (Scalable Vector Graphics) kullanımı daha yaygın hale gelmiştir.
• Kullanım (Canvas):

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var ctx = document.getElementById("myCanvas").getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 150, 100);
</script>

5. Form Kontrolleri ve Validasyon

• HTML5, formlar için yeni giriş türleri ve doğrulama özellikleri ekledi. Örneğin, <input type="email"> veya <input type="date"> gibi yeni türler, form doğrulamasını daha kolay hale getirir.
• Kullanım:

<form>
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Gönder</button>
</form>

Sonuç

HTML5, web geliştirme sürecini büyük ölçüde dönüştürdü ve daha modern, semantik, erişilebilir web sayfalarının oluşturulmasını kolaylaştırdı. Yeni etiketler ve özellikler, hem geliştiriciler hem de kullanıcılar için çok daha güçlü ve etkileşimli web deneyimleri sağlar. HTML5 ile gelen bu yenilikleri öğrenmek ve projelerinizde kullanmak, web geliştiriciliği becerilerinizi bir adım ileriye taşıyacaktır.