---
title: "HTML5 nedir? Modern HTML'in temelleri ve Living Standard"
author: "Abdulaziz Akyol"
author_url: https://www.abdulazizakyol.com/hakkimda/
url: https://www.abdulazizakyol.com/blog/html5-nedir/
language: tr
published: 2018-09-29
updated: 2026-09-25
categories: ["HTML5", "Yazılım geliştirme"]
tags: ["HTML5", "HTML Living Standard", "WHATWG", "Anlamsal HTML", "Erişilebilirlik", "Web API"]
description: "HTML5 nedir, bugün neden Living Standard olarak anılır? Belge iskeleti, anlamsal yapı, erişilebilirlik, performans ve tarayıcı API'lerine güncel bir giriş."
---

# HTML5 nedir? Modern HTML'in temelleri ve Living Standard

Yazar: [Abdulaziz Akyol](https://www.abdulazizakyol.com/hakkimda/) · 2018-09-29

## Öne çıkanlar

- HTML5, HTML'in 2008'de taslağı yayımlanan modern hâlidir; bugün WHATWG tarafından sürüm numarası olmadan HTML Living Standard adıyla sürekli güncellenir.
- 2019'daki W3C–WHATWG mutabakatından beri tek bir HTML standardı vardır ve bu standardın geliştirildiği yer WHATWG'dir.
- Her modern HTML belgesi DOCTYPE bildirimi, lang özniteliği, UTF-8 karakter kümesi ve viewport meta etiketiyle başlamalıdır; DOCTYPE olmadan tarayıcı uyumluluk (quirks) moduna geçer.
- Anlamsal etiketler ve yerel form öğeleri, ekran okuyuculara rol ve klavye davranışını ek kod yazmadan verir; bu yüzden erişilebilirliğin ilk adımı doğru HTML'dir.
- Bir özelliğin kullanılabilir olup olmadığını sürüm numarasına değil, MDN ve web.dev'de gösterilen Baseline durumuna bakarak anlamak gerekir.

HTML5, web sayfalarının ve web uygulamalarının yapısını ve anlamını tanımlayan HTML dilinin modern hâlidir. Bugün "HTML5" ayrı bir sürüm değil; WHATWG'nin sürekli güncellediği **HTML Living Standard** ile anlamsal etiketleri, form kontrollerini, medya ve grafik öğelerini ve bunlarla gelen tarayıcı API'lerini kapsayan genel bir addır.

Bu seri ilk olarak 2018'de yüksek lisans ders notlarımdan derlenmiş kısa notlardı. Aradan geçen sürede notlardaki pek çok bilgi eskidi: bazı etiketler standarttan çıkarıldı, Flash tamamen tarihe karıştı, tarayıcı önekleri neredeyse kayboldu. Bu yazıda konuyu 2026'daki standarda göre baştan anlatıyorum; ayrıntılar için seriyi beş rehbere ayırdım.

## HTML5 tam olarak nedir?

HTML (HyperText Markup Language), bir belgenin **yapısını ve anlamını** tarif eder: burası başlık, burası gezinme menüsü, bu bir form alanı, bu bir video. Görünümü CSS, davranışı JavaScript belirler. 2010'ların başında "HTML5" kelimesi bu üçünün birlikte getirdiği yenilikler için pazarlama terimi olarak da kullanıldı; WHATWG'nin standart metni de bu kullanımın yaygın olduğunu kabul eder.

Pratikte HTML5 denince dört şey kastedilir:

- **Anlamsal öğeler:** `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>` gibi içeriğin rolünü anlatan etiketler.
- **Zengin formlar:** `email`, `date`, `range` gibi yeni girdi tipleri ve tarayıcı içi doğrulama.
- **Medya ve grafik:** eklentisiz `<video>`, `<audio>`, `<canvas>` ve satır içi SVG.
- **Tarayıcı API'leri:** depolama, çevrimdışı çalışma, gerçek zamanlı iletişim, konum ve benzeri JavaScript arayüzleri.

## HTML5 nasıl ortaya çıktı? W3C'den WHATWG Living Standard'a

HTML5'in hikâyesi iki kuruluşun çekişmesiyle geçer. W3C 2000'lerin başında XHTML 2.0'a yönelmişti; tarayıcı üreticileri ise mevcut web'i bozmadan HTML'i geliştirmek istiyordu. Sonuç aşağıdaki zaman çizelgesi oldu:

| Yıl           | Gelişme                                                                                                         |
| ------------- | --------------------------------------------------------------------------------------------------------------- |
| 2004          | Apple, Mozilla ve Opera, W3C çalıştayında önerileri kabul görmeyince WHATWG'yi kurdu.                           |
| 2007          | W3C yeni bir HTML çalışma grubu kurdu ve WHATWG'nin çalışmasını temel aldı.                                     |
| 2008          | HTML5'in ilk kamuya açık taslağı yayımlandı.                                                                    |
| 2011          | Yollar ayrıldı: W3C "bitmiş" bir sürüm isterken WHATWG sürüm numarasını bırakıp Living Standard modeline geçti. |
| 28 Ekim 2014  | W3C, HTML5'i Recommendation (resmî öneri) olarak yayımladı; ardından HTML 5.1 ve 5.2 geldi.                     |
| 28 Mayıs 2019 | W3C ve WHATWG, HTML ve DOM'un bundan sonra WHATWG'de geliştirileceği konusunda mutabakat imzaladı.              |
| Ocak 2021     | W3C, WHATWG'nin 29 Ocak 2020 tarihli HTML Review Draft'ını Recommendation olarak onayladı.                      |

Eski notumda "HTML5 çalışmaları 2014'te sonuçlandı" yazıyordu. Bu, W3C açısından o gün için doğruydu ama bugün geçerli değil: HTML hiçbir zaman "bitmez". 2019 mutabakatına göre W3C artık ayrı bir HTML yazmıyor, WHATWG'nin periyodik anlık görüntülerini (Review Draft) onaylıyor. Referans adres tektir: [html.spec.whatwg.org](https://html.spec.whatwg.org/multipage/).

Bunun pratik sonucu şu: "Bu özellik HTML'in hangi sürümünde?" diye sormak yerine "Bu özellik hangi tarayıcılarda çalışıyor?" diye soruyoruz.

## Modern bir HTML belgesinin iskeleti nasıl olmalı?

Aşağıdaki şablon, 2026'da yeni bir sayfaya başlarken kullandığım en küçük doğru iskelettir:

```html
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sayfa başlığı | Site adı</title>
  <meta name="description" content="Arama sonuçlarında görünecek 1–2 cümlelik özet.">
  <link rel="stylesheet" href="/css/site.css">
  <script type="module" src="/js/app.js"></script>
</head>
<body>
  <a class="skip-link" href="#icerik">İçeriğe geç</a>
  <header>
    <nav aria-label="Ana menü">
      <ul>
        <li><a href="/">Ana sayfa</a></li>
        <li><a href="/blog/">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main id="icerik">
    <h1>Sayfanın tek ana başlığı</h1>
    <p>İçerik burada başlar.</p>
  </main>
  <footer>
    <p>&copy; 2026 Site adı</p>
  </footer>
</body>
</html>
```

Satır satır bakalım:

1. **`<!DOCTYPE html>`**: Tarayıcıyı standart (no-quirks) moda alır. Yazılmazsa tarayıcı 1990'ların sayfalarıyla uyum için tasarlanmış quirks moduna geçer ve kutu modeli farklı hesaplanır.
2. **`lang="tr"`**: Ekran okuyucunun metni Türkçe telaffuz etmesini, tarayıcının doğru heceleme ve kelime bölme yapmasını, çeviri araçlarının dili tanımasını sağlar.
3. **`<meta charset="utf-8">`**: Standarda göre karakter kümesi bildirimi belgenin ilk 1024 baytı içinde yer almalıdır; bu yüzden `<head>`'in en başına yazılır. "ş, ğ, ı" gibi harflerin bozulmasının en sık nedeni bu satırın eksik olmasıdır.
4. **`viewport`**: Mobil tarayıcının sayfayı masaüstü genişliğinde çizip küçültmesini engeller.
5. **`<script type="module">`**: Modül betikleri varsayılan olarak ertelenir (defer); HTML ayrıştırmasını bloklamaz. Klasik betik kullanıyorsanız `defer` ekleyin.

Artık gereksiz olan eski alışkanlıklar da var: `type="text/javascript"` ve `type="text/css"` yazmaya gerek yok, `<br />` gibi eğik çizgiyle kapatma zorunlu değil, eski tarayıcılar için anlamsal etiketlere `display: block` veren CSS yamaları da gereksiz.

## Anlamsal yaklaşım neden önemli?

HTML5 öncesinde sayfa bölümleri `<div id="header">`, `<div id="content">` gibi geliştiricinin uydurduğu adlarla ayrılıyordu. Tarayıcı için bunların hepsi anlamsız kutulardı. Anlamsal etiketlerle aynı yapı standart bir dil kazanır:

```html
<!-- Eski yaklaşım: anlam yalnızca id değerinde, standart değil -->
<div id="header">...</div>
<div id="content">...</div>

<!-- Anlamsal yaklaşım: rolü etiketin kendisi taşır -->
<header>...</header>
<main>...</main>
```

Bu fark görsel olarak hiçbir şey değiştirmez; konum ve boyutu yine CSS belirler. Değişen, makinelerin sayfayı anlamasıdır: ekran okuyucular `<main>`'e tek tuşla atlayabilir, tarayıcıların okuma modu ana içeriği daha kolay bulur, arama motorları ve yapay zekâ asistanları sayfanın hangi kısmının asıl içerik olduğunu daha az tahminle çıkarır. Hangi etiketin nerede kullanılacağını ayrıntılı örneklerle [HTML5 anlamsal etiketler rehberinde](https://www.abdulazizakyol.com/blog/html-5-anlamsal-web/) anlattım.

## Erişilebilirlik: doğru HTML'in bedava verdiği şey

Erişilebilirlik (accessibility, a11y) çoğu zaman sonradan eklenen bir katman sanılır. Oysa en büyük kısmı doğru HTML seçiminden gelir. W3C'nin ARIA kullanım kılavuzundaki ilk kural bunu özetler: ihtiyacınızı karşılayan yerel bir HTML öğesi varsa ARIA ile yeniden icat etmeyin, onu kullanın.

Örnek: `<div onclick="...">` ile yapılmış bir "düğme" fareyle çalışır ama klavyeyle odaklanamaz, Enter ve Boşluk tuşlarına tepki vermez, ekran okuyucu onu düğme olarak duyurmaz. `<button type="button">` bunların hepsini hazır getirir.

Sahada en sık gördüğüm eksikler şunlar:

- Görsellerde anlamlı `alt` metni yok ya da süs görsellerde `alt=""` verilmemiş.
- Form alanlarının `<label>` öğesi yok; yalnızca `placeholder` ile etiketlenmiş.
- Başlık seviyeleri görünüşe göre seçilmiş (`<h4>` küçük göründüğü için).
- Sayfanın `lang` özniteliği eksik ya da yanlış.

Ölçüt olarak W3C'nin [WCAG 2.2](https://www.w3.org/TR/WCAG22/) yönergelerini kullanıyorum. Formlardaki etiketleme ve otomatik doldurma kurallarını [HTML5 formlar rehberinde](https://www.abdulazizakyol.com/blog/html-5-form/) ayrıca ele aldım.

## HTML düzeyinde performans için ne yapılabilir?

Sayfa hızının bir bölümü sunucu ve CSS/JavaScript tarafında çözülür, ama HTML'de verilen birkaç karar Core Web Vitals ölçümlerini doğrudan etkiler:

```html
<!-- Ekranın üstündeki ana görsel: öncelikli yükle, boyutu belirt -->
<img src="/img/kapak-1200.avif"
     srcset="/img/kapak-800.avif 800w, /img/kapak-1200.avif 1200w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1200" height="675"
     fetchpriority="high"
     alt="Üretim hattında kamera ile ölçüm düzeneği">

<!-- Ekranın altındaki görsel: tembel yükle -->
<img src="/img/sema.webp" width="800" height="450" loading="lazy"
     alt="Olay tabanlı mimari şeması">

<!-- Üçüncü taraf içerik: iframe'i de tembel yükle -->
<iframe src="https://www.example.com/harita" width="600" height="400"
        loading="lazy" title="Ofis konumu haritası"></iframe>
```

- **`width` ve `height`**: Tarayıcı görsel inmeden yer ayırır, düzen kayması (CLS) oluşmaz.
- **`loading="lazy"`**: Görünüm alanının dışındaki görsel ve iframe'leri ertelemek için. Sayfanın en büyük görseline (LCP) **uygulamayın**, aksine `fetchpriority="high"` verin.
- **`srcset` ve `sizes`**: Telefona 1200 piksellik görsel göndermeyi önler.
- **`type="module"` veya `defer`**: Betiklerin HTML ayrıştırmasını durdurmasını engeller.

Video ve ses için ayrı kurallar var; onları [HTML5 video ve audio rehberine](https://www.abdulazizakyol.com/blog/html5-medya-etiketleri/) bıraktım.

## HTML5 ile gelen tarayıcı API'lerine genel bakış

2018 tarihli notumda "HTML5 kabiliyetleri" başlığı altında uzun bir liste vardı. Bu API'lerin çoğu bugün ayrı WHATWG ve W3C standartlarında yaşıyor, bazıları kaldırıldı. Güncel tablo şöyle:

| Alan               | Bugün kullanılan API                                      | Not                                                                                                     |
| ------------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Depolama           | Web Storage (`localStorage`, `sessionStorage`), IndexedDB | Web Storage küçük ve senkron veriler için; büyük veri için IndexedDB.                                   |
| Çevrimdışı çalışma | Service Worker, Cache API, Web App Manifest               | Eski Application Cache (AppCache) standarttan kaldırıldı.                                               |
| Arka plan işleri   | Web Workers                                               | Ağır hesaplamayı ana iş parçacığından çıkarır.                                                          |
| Ağ ve gerçek zaman | Fetch, WebSocket, Server-Sent Events, WebRTC              | WebRTC tarayıcılar arası doğrudan ses, görüntü ve veri aktarımı sağlar.                                 |
| Cihaz              | Geolocation, Notifications, Device Orientation            | Kullanıcı izni ve HTTPS (güvenli bağlam) gerektirir.                                                    |
| Gezinme            | History API (`pushState`, `popstate`)                     | Tek sayfa uygulamalarının temeli.                                                                       |
| Dosya              | File API, Origin Private File System                      | Kullanıcı diskine doğrudan yazan dosya seçicileri şimdilik yalnızca Chromium tabanlı tarayıcılarda var. |
| Grafik             | Canvas 2D, WebGL, WebGPU, SVG                             | 2D çizimi [Canvas rehberinde](https://www.abdulazizakyol.com/blog/html-5-grafik-islemlericanvas/) örnekledim.                         |
| Bileşenler         | Custom Elements, Shadow DOM, `<template>`, `<slot>`       | Çerçevesiz, yeniden kullanılabilir bileşenler.                                                          |
| Arayüz             | `<dialog>`, `popover` özniteliği                          | Modal pencere ve açılır katmanlar için JavaScript kütüphanesine gerek bırakmaz.                         |

Bir hatırlatma: konum, bildirim ve Service Worker gibi güçlü API'ler yalnızca **güvenli bağlamda** (HTTPS ya da `localhost`) çalışır. Geliştirme ortamında çalışan kodun HTTP üzerinden yayındaki sitede sessizce başarısız olmasının nedeni genellikle budur.

## Tarayıcı desteğini nasıl kontrol ederim?

Eski notumda tarayıcı önekleri (`-webkit-`, `-moz-`, `-ms-`) ve html5test.com puanları vardı. Önekler yeni özelliklerde artık kullanılmıyor; özellikler tarayıcılara bayrak arkasında gelip standartlaşınca öneksiz açılıyor. Puan tabloları da güncelliğini yitirdi.

Bugün baktığım yer **Baseline**'dır. Baseline, bir özelliğin temel tarayıcı setinde (masaüstü ve mobilde Chrome, Edge, Firefox, Safari) ne zamandan beri çalıştığını gösteren ortak bir etikettir:

- **Newly available (yeni kullanılabilir):** Özellik tüm temel tarayıcıların son sürümlerinde çalışıyor.
- **Widely available (yaygın kullanılabilir):** Bu durumun üzerinden 30 ay geçmiş; eski cihazlar da büyük ölçüde kapsanıyor.

MDN'deki her öğe ve API sayfasının başında bu etiket yazar. Emin olamadığınız durumda özellik algılama (feature detection) ile aşamalı iyileştirme (progressive enhancement) yapın:

```javascript
const dialog = document.querySelector("#bilgi");

if (typeof HTMLDialogElement === "function" && dialog instanceof HTMLDialogElement) {
  dialog.showModal();
} else {
  // Eski tarayıcı: içeriği sayfa içinde göster
  dialog.setAttribute("open", "");
}
```

## Bu serideki diğer rehberler

Seriyi konulara göre beş parçaya ayırdım. Bu yazı giriş niteliğinde; uygulamalı ayrıntılar diğerlerinde:

- [HTML5 anlamsal etiketler rehberi](https://www.abdulazizakyol.com/blog/html-5-anlamsal-web/): `header`, `nav`, `main`, `article`, `section`, `dialog`, `details`, landmark'lar ve sık yapılan hatalar.
- [HTML5 formlar](https://www.abdulazizakyol.com/blog/html-5-form/): girdi tipleri, doğrulama öznitelikleri, Constraint Validation API ve `autocomplete` değerleri.
- [HTML5 Canvas ile çizim](https://www.abdulazizakyol.com/blog/html-5-grafik-islemlericanvas/): şekiller, eğriler, metin, animasyon ve yüksek DPI ekranlar.
- [HTML5 video ve audio](https://www.abdulazizakyol.com/blog/html5-medya-etiketleri/): formatlar, altyazı, autoplay kuralları ve performans.

## Kontrol listesi

- [ ] Her sayfa `<!DOCTYPE html>`, `lang`, `meta charset="utf-8"` ve `viewport` ile başlıyor.
- [ ] Sayfa bölümleri `div` kimlikleri yerine `header`, `nav`, `main`, `footer` ile işaretli; sayfada tek `<h1>` var.
- [ ] Tıklanabilir her şey `<a>` ya da `<button>`; her form alanının bir `<label>`'ı var.
- [ ] Görsellerde `width`/`height` ve anlamlı `alt` var; ekran dışı görseller `loading="lazy"`.
- [ ] Yeni bir özelliği kullanmadan önce MDN'de Baseline durumuna bakılıyor, gerekirse özellik algılamayla geri düşüş sağlanıyor.

## Sık sorulan sorular

### HTML5 ile HTML arasında fark var mı?

Bugün pratikte fark yoktur. HTML5, 2008–2014 arasında geliştirilen sürümün adıydı; WHATWG 2011'de sürüm numarasını bıraktı ve standart artık HTML Living Standard adıyla sürekli güncelleniyor. HTML5 terimi günümüzde modern HTML ve beraberindeki tarayıcı API'leri için genel bir ad olarak kullanılıyor.

### HTML6 çıkacak mı?

Planlanmış bir HTML6 yok. HTML, WHATWG'de yaşayan bir standart olarak geliştiriliyor; yeni öğe ve öznitelikler hazır olduklarında doğrudan standarda ekleniyor. Bir özelliği kullanıp kullanamayacağınızı sürüm numarasından değil, tarayıcı desteğinden (Baseline) anlarsınız.

### DOCTYPE bildirimini yazmazsam ne olur?

Tarayıcı sayfayı eski sitelerle uyumluluk için tasarlanmış quirks moduna alır. Bu modda kutu modeli ve bazı yerleşim kuralları farklı hesaplanır, CSS beklediğiniz gibi davranmayabilir. Belgenin en başına küçük harfle doctype html yazmak bu sorunu tamamen çözer.

### HTML5 öğrenmeye nereden başlamalıyım?

Önce belge iskeleti ve anlamsal etiketlerle sayfa yapısını kurmayı, ardından erişilebilir formlar yazmayı öğrenin. Başvuru kaynağı olarak MDN Web Docs ve WHATWG HTML Standard yeterlidir; canvas ve medya öğeleri bu temelin üzerine gelir.

## Kaynaklar

1. [WHATWG — HTML Living Standard](https://html.spec.whatwg.org/multipage/)
2. [W3C ve WHATWG arasındaki HTML/DOM mutabakat metni (2019)](https://www.w3.org/2019/04/WHATWG-W3C-MOU.html)
3. [W3C — HTML Review Draft (29 Ocak 2020) W3C Recommendation duyurusu](https://www.w3.org/news/2021/html-review-draft-published-29-january-2020-is-a-w3c-recommendation/)
4. [MDN Web Docs — HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
5. [web.dev — Baseline](https://web.dev/baseline)
6. [W3C — Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)

---

Abdulaziz Akyol, CX Teknoloji'nin (yapay zekâ, görüntü işleme ve IoT) kurucusudur. Asıl sürüm: https://www.abdulazizakyol.com/blog/html5-nedir/