HTML 5 Dersleri 1 - Giriş

Bu derste HTML5’in ne olduğu, neden ortaya çıktığı ve klasik HTML’e göre hangi yenilikleri sunduğu anlatılmaktadır. HTML5 ile gelen modern etiketler, multimedya desteği ve web standartlarındaki gelişmeler örneklerle açıklanır.

admin admin
Ekim 17, 2022 - 10:48 Updated: Ocak 8, 2026 - 23:30
0 202
HTML 5 Dersleri 1 - Giriş
HTML 5 Dersleri 1 - Giriş

HTML5 Nedir?

HTML5, web sayfalarının daha anlamlı, etkileşimli ve modern hale gelmesini sağlayan güncel HTML standardıdır. HTML5 ile birlikte, tarayıcı eklentilerine ihtiyaç duymadan video, ses ve gelişmiş form yapıları oluşturmak mümkün hale gelmiştir.

HTML5, sadece yeni etiketler eklemekle kalmaz; aynı zamanda web geliştiricilere daha temiz ve anlaşılır bir yapı sunar.

HTML5 Neden Ortaya Çıktı?

Klasik HTML sürümleri:

  • Anlamsal yapıdan yoksundu

  • Multimedya için harici eklentilere ihtiyaç duyuyordu

  • Mobil uyumlulukta yetersiz kalıyordu

HTML5 bu sorunları çözmek için geliştirilmiştir.

HTML5 ile Gelen Temel Yenilikler

HTML5 ile birlikte:

  • Semantik (anlamlı) etiketler geldi

  • Video ve audio etiketleri eklendi

  • Gelişmiş form input tipleri tanıtıldı

  • Tarayıcı tabanlı depolama sistemleri sunuldu

  • Mobil uyumlu yapı standart hale geldi

HTML5 Sayfa Yapısı

HTML5’te sayfa yapısı daha sade ve anlaşılırdır.

HTML5 Temel Yapı Örneği

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Giriş</title>
</head>
<body>

    <header>
        <h1>HTML5 Dersleri</h1>
    </header>

    <main>
        <p>Bu sayfa HTML5 giriş dersidir.</p>
    </main>

    <footer>
        <p>© cilginyazilim.com</p>
    </footer>

</body>
</html>

Bu yapı, arama motorları ve tarayıcılar tarafından daha doğru analiz edilir.

HTML5 ile Gelen Semantik Yapı

HTML5, sayfa bölümlerini tanımlamak için özel etiketler sunar. Bu etiketler içeriğin ne olduğunu açıkça belirtir.

Sık kullanılan semantik etiketler:

  • header

  • nav

  • main

  • section

  • article

  • footer

HTML5 ve Multimedya Desteği

HTML5 sayesinde video ve ses dosyaları doğrudan sayfaya eklenebilir.

Video Kullanımı Örneği

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

Audio Kullanımı Örneği

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

HTML5 Kimler İçin Uygundur?

HTML5:

  • Web geliştirmeye yeni başlayanlar

  • Mevcut HTML bilgisini güncellemek isteyenler

  • Mobil uyumlu site yapmak isteyenler

  • SEO uyumlu yapı kurmak isteyenler

için ideal bir standarttır.

HTML5’in temel mantığını öğrendikten sonra, sayfa yapısını daha anlamlı hale getiren semantik elementleri detaylı şekilde inceleyebiliriz.

? Bir sonraki ders:
HTML 5 Dersleri 2 – Semantik Elementler
https://cilginyazilim.com/html-5-dersleri-2-semantik-elementler

Etiketler: