İletişime Geç!

Bize Ulaşın

support@mantraxo.com +Çok yakında İstanbul,Turkey

Takip Edin

element image element image element image element image

HTML5 Yenilikleri | 2025 Rehberi

Anasayfa Bloglar HTML5 Yenilikleri | 2025 Rehberi
HTML5 Yenilikleri | 2025 Rehberi image

İçindekiler

HTML5 ile Gelen Yeni Etiketler

HTML5, web sayfalarının yapısını daha düzenli ve anlaşılır hale getiren birçok yeni etiket sunar:

Etiket Açıklama
<header>Sayfanın veya bir bölümün üst kısmını tanımlar.
<footer>Alt bilgi alanını tanımlar.
<section>İçerikleri bölümlere ayırır.
<article>Bağımsız içerik veya makale alanı oluşturur.
<aside>Yan içerik (ör. reklam alanları) ekler.
<main>Sayfanın ana içeriğini belirtir.

Multimedya Desteği

HTML5 ile medya içerikleri kolayca eklenebilir:

  • <audio>: Ses dosyalarını ekler.
  • <video>: Video oynatma özelliği sağlar.
  • <track>: Altyazı veya ek açıklama eklemek için kullanılır.
<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>

Semantik Yapı

HTML5 semantik etiketleri, sayfa yapısının arama motorları tarafından daha iyi anlaşılmasını sağlar.

  • <figure>: Görsel ve medya içeriklerini gruplar.
  • <figcaption>: Görsellere açıklama ekler.
  • <nav>: Menü ve navigasyon alanlarını tanımlar.

Form Geliştirmeleri

HTML5 formlar için yeni özellikler sunar:

  • Yeni input tipleri: email, url, number, date
  • placeholder: Kullanıcıya ipucu verir.
  • required: Alanları zorunlu hale getirir.
  • pattern: Düzenli ifadelerle giriş doğrulaması yapılmasını sağlar.

API Entegrasyonları

HTML5 ile birlikte birçok API desteği de geldi:

  • Canvas API: Tarayıcıda 2D grafik çizimi yapılabilir.
  • Geolocation API: Kullanıcı konum bilgisi alınabilir.
  • Web Storage: Local Storage ve Session Storage ile veri saklanabilir.
  • Drag and Drop API: Sürükle-bırak desteği eklenebilir.

HTML5 Performans İpuçları

HTML5 sayfalarını hızlandırmak için dikkat edilmesi gerekenler:

  • Gereksiz etiketleri kaldırın ve temiz kod yazın.
  • Resimleri lazy-loading ile yükleyin.
  • Video ve ses dosyalarını optimize edin.
  • SEO uyumlu meta etiketleri kullanın.

HTML5 Kod Örneği

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Yenilikleri</title>
</head>
<body>
  <header>
    <h1>HTML5 Yenilikleri</h1>
  </header>
  <main>
    <section>
      <h2>Multimedya Desteği</h2>
      <video controls width="400">
        <source src="video.mp4" type="video/mp4">
      </video>
    </section>
  </main>
  <footer>© 2025 Mantraxo</footer>
</body>
</html>
Meta Etiketlerini Öğren

Blog Category

Popular Tags

Yazarlar

  • mantra-man Profile Photo
  • mantra-chief Profile Photo
SubLogoBlog Yazılarımız

Blog

"Yeni Makalelerle İlham Alın"

Django Mülakat Soruları

Django Mülakat Soruları

Django mülakat soruları için 5 gerçek case: ORM performansı, transaction & race condition, Celery idempotensi, caching ve prod güvenliği.

Daha Fazla
Python Requests Session Kullanımı

Python Requests Session Kullanımı

Python requests kütüphanesinde Session nesnesinin get yerine nasıl ve neden kullanılacağını öğrenin. Daha hızlı, güvenli ve verimli HTTP istekleri için Ses

Daha Fazla
Django HTML Düzenleme Scripti

Django HTML Düzenleme Scripti

Django projelerinde HTML dosyalarındaki asset yollarını otomatik olarak {% static %} etiketine çeviren Python scripti. Zaman kazandıran pratik çözüm.

Daha Fazla
Daha Fazla

Teknoloji Çözümleriyle Dijital Gücünüzü Artırın

Web geliştirme, oyun geliştirme, SEO ve veritabanı çözümleri için uzman ekibimizle şimdi tanışın.

Element Image
Mantra Logo

"Teknoloji ile Geleceğinizi Şekillendirin – Uzman Çözümlerimizle Tanışın."

Linkler

Teknoloji Hizmetleri

İletişim Bilgileri

© 2024 Mantraxo. Tüm Hakları Saklıdır.