HTML Web Sayfası Oluşturma Rehberi: Sıfırdan Yayında Bir Siteye

Bir HTML web sayfası oluşturmak, web geliştirmeye giriş yapan herkesin attığı ilk somut adımdır. Modern dünyada React, Vue, Next.js gibi büyük framework'ler etrafta dolaşırken bile, hepsinin arkasında hâlâ aynı temel duruyor: tarayıcının okuduğu, açık metin halinde yazılmış bir HTML dosyası. Bu yazıda sıfırdan başlayarak .html uzantılı tek bir dosyadan, semantic etiketlere, CSS ile biçimlendirmeye, responsive tasarıma, form işlemeye, erişilebilirliğe ve sayfayı internete yayına almaya kadar tüm yolu adım adım gezeceğiz. Yazı bittiğinde elinizde başkasına gösterebileceğiniz, gerçek bir alan adında çalışan bir web sayfası olacak.

Bu rehber kimin için? Hiç kod yazmamış olsanız bile takip edebilmeniz için her komut ve örnek tam halinde verildi. Aynı zamanda bir framework geliştiricisi olarak HTML temellerinizi tazelemek isteyenler için 2026 standartlarına uygun semantic kullanım, <dialog>, :has(), container queries, fetchpriority gibi modern tarayıcı özelliklerini de tek tek inceledik. Hedefimiz basit bir merhaba dünya değil, üretime alınabilecek kalitede bir başlangıç sayfasıdır.

İlgili rehberler: Web sitesi nasıl kurulur · Web sitesi nedir · Web sitesi yazılımı seçimi · Sayfa tasarımı rehberi · Web site şablonları · Tailwind CSS sıfırdan

HTML Tam Olarak Ne, Ne Değildir?

HTML (HyperText Markup Language) bir programlama dili değildir; bir işaretleme (markup) dilidir. Yani değişken atamaz, döngü kurmaz, koşul yürütmez. Yaptığı tek şey vardır: metnin hangi bölümünün başlık, hangisinin paragraf, hangisinin liste, hangisinin link olduğunu tarayıcıya anlatmak. Tarayıcı bu işaretlemeyi okur, bir DOM ağacı (Document Object Model) inşa eder ve ekrana çizer. Etkileşim ve dinamizm JavaScript'in işidir; görsel biçim ise CSS'in. Bu üç katmanı (yapı / sunum / davranış) birbirinden ayrı düşünmek, web geliştirmenin en temel zihinsel modelidir.

HTML'in resmi standardı, WHATWG'nin (Web Hypertext Application Technology Working Group) yayınladığı yaşayan bir dokümandır: html.spec.whatwg.org. Eskiden HTML4, XHTML, HTML5 gibi sürüm numaraları kullanılırdı; 2014 sonrası HTML artık sürüm numarasız tek bir yaşayan standarttır. Yeni etiketler, attribute'lar ve API'ler tarayıcılarla beraber sürekli ekleniyor — caniuse.com üzerinden bir özelliğin desteklenip desteklenmediğini kontrol etmek pratik bir alışkanlık olmalı.

Geliştirme Ortamını Hazırlamak

HTML yazmak için gerçek anlamda kuruluma gerek yok — Notepad bile yeterli. Ancak ciddi bir editör size renklendirme, otomatik tamamlama, lint, format ve canlı önizleme verir. Visual Studio Code bugün ücretsiz, hafif ve eklenti desteği en geniş olan editördür. WebStorm (JetBrains) ücretli ama daha dolu kutuya sahip. Sublime Text ve Neovim deneyimli kullanıcılar için hâlâ keskin alternatifler.

VS Code kurun: code.visualstudio.com
Live Server eklentisi: dosyayı kaydettikçe tarayıcıyı otomatik yenileyen geliştirme sunucusu
Prettier: kayıt anında HTML/CSS/JS otomatik formatlama
HTML CSS Support: CSS class autocomplete
Auto Rename Tag: açılış etiketini değiştirince kapanışı da değiştirir
Error Lens: hataları satır içi gösterir

Tarayıcı tarafında Chrome veya Firefox DevTools (F12) yeterlidir. Geliştirme sürecinde mobil görünümü test etmek için DevTools içindeki device toolbar (Ctrl+Shift+M) çok faydalıdır. Üretim öncesi farklı tarayıcılarla mutlaka karşılaştırın — Safari'nin bazı CSS davranışları hâlâ ayrışıyor.

İlk HTML Dosyanız: hello.html

Klasik bir başlangıç. Boş bir klasör oluşturun (örneğin C:\projeler\ilk-site ya da ~/projects/ilk-site). İçinde index.html adında bir dosya açın ve aşağıdaki şablonu yapıştırın. Sonra dosyayı kaydedip tarayıcıya sürükleyin — ilk web sayfanız ekrana gelecek.

Bu yedi satırın her biri bilinçli bir tercihtir; ezberlemek yerine her birinin niye gerekli olduğunu anlayın. Aşağıda hepsinin kısa açıklaması var.

DOCTYPE Bildirimi

<!DOCTYPE html> dosyanın HTML5 (yaşayan standart) modunda işleneceğini tarayıcıya söyler. Bu satırı atlayan sayfalar tarayıcı tarafından quirks mode denilen geriye dönük uyumluluk modunda render edilir; CSS davranışları beklenmedik şekilde bozulur. Kuralı çok basittir: her HTML dosyasının ilk satırı bu olmalı.

<html lang> Attribute'u

lang="tr" sayfanın dilini belirtir. Görme engelli kullanıcıların ekran okuyucuları doğru telaffuz için bu attribute'u kullanır; arama motorları içeriği doğru dile indekslemek için okur; tarayıcı çevirmen tetikleyicileri buna bakar. SEO açısından da gözardı edilmemeli — detaylar için teknik SEO kontrol listesi yazımıza göz atın.

Karakter Kodlaması: UTF-8

<meta charset="UTF-8"> Türkçe karakterlerin (ç, ğ, ı, ö, ş, ü) doğru gösterilmesini garanti eder. UTF-8 dünyadaki tüm dilleri kapsayan tek standarttır; eski Windows-1254 veya ISO-8859-9 kodlamalarını 2026 yılında kullanmak için bir sebep kalmadı. Dosyanızı editör seviyesinde de UTF-8 olarak kaydettiğinizden emin olun (VS Code'un alt çubuğunda görürsünüz).

Viewport Meta Tag

Mobil tarayıcılar varsayılan olarak masaüstü genişliğinde (980px) sayfa render eder ve sonra ekrana sıkıştırır. <meta name="viewport" content="width=device-width, initial-scale=1"> bunu engeller; sayfa cihazın gerçek genişliğinde, normal zoom seviyesinde açılır. Bu satır olmadan responsive tasarım çalışmaz ve Google mobile-first indexing'de sıralama düşer.

HTML Dökümanının Anatomisi

Her HTML dosyası iki büyük bölgeye ayrılır: head (görünmez metadata) ve body (görünür içerik). Head'e sayfanın bilgi etiketi gibi bakın — başlık, kodlama, açıklama, sosyal medya kartları, link'ler, script referansları. Body ise kullanıcının ekranda gördüğü her şeydir.

Hangi meta etiketinin hangi sırayla geleceği ufak da olsa fark yaratır. charset ilk 1024 byte içinde olmalı, yoksa tarayıcı dosyayı baştan parse eder. viewport mümkün olduğu kadar erken gelmeli — JavaScript'ten önce. Open Graph etiketleri og: öneki ile, property attribute'u kullanır (name değil); bu küçük detay ekiplerin çoğunlukla yanlış yazdığı yerdir.

Semantic HTML: Anlam Yüklü Etiketler

Her şeyi <div> ile yazabilirsiniz; tarayıcı şikayet etmez. Ama semantic HTML kullanmak — yani içeriğin anlamına uygun etiket seçmek — üç büyük kazanç verir: erişilebilirlik (ekran okuyucu için), SEO (arama motorları için), bakım kolaylığı (insan için). HTML5 ile gelen semantic etiketler aşağıdaki gibidir:

<header> — sayfanın veya bir bölümün başlığı (logo, ana başlık, navigasyon)
<nav> — birincil navigasyon menüsü
<main> — sayfanın ana içeriği (her sayfada tek olmalı)
<article> — bağımsız, tek başına anlamlı içerik (blog yazısı, ürün kartı)
<section> — başlığı olan tematik gruplama
<aside> — yan içerik (ilgili yazılar, reklam, yan menü)
<footer> — sayfanın veya bölümün altbilgisi
<figure> / <figcaption> — başlıklı görsel veya kod örneği
<time datetime="..."> — makine okunabilir tarih
<mark> — vurgulanmış (highlighted) metin
<details> / <summary> — açılır kapanır blok (JS gerektirmez)

<div> ve <span> hâlâ var ve faydalı — ama yalnızca uygun semantic etiket bulunmadığında kullanılmalı. <div> blok seviyesinde, <span> satır içi (inline) generic kapsayıcılardır. Bir liste için <ul>/<li>, bir tablo için <table>, bir form için <form> kullanın — div içine div sarmak çoğu zaman hata kokusudur.

Başlıklar, Paragraflar ve Metin Biçimlendirme

Bir sayfada yalnızca tek bir h1 bulunmalı (modern tartışmalar olsa da en güvenli yaklaşım). Alt başlıklar h2, onların altındakiler h3 ve daha derin gider — h6'ya kadar. Başlık seviyelerinin atlanmaması (h1'den h3'e atlamak gibi) erişilebilirlik için önemlidir. Başlık metni gerçekten o bölümü temsil etmeli; SEO açısından anahtar kelimeyi h1 ve h2 içinde doğal şekilde geçirmek değerlidir.

strong ile <b>, em ile <i> arasındaki fark sıkça karıştırılır: ilk gruptaki etiketler anlam taşır (ekran okuyucu vurgular), ikinci gruptakiler sadece görsel sunumdur. Modern HTML'de tercihen anlamsal olanları kullanın; yalnızca görsel istek için CSS ile font-weight: bold yazın.

Bağlantılar ve Görseller

Web'i web yapan iki şey vardır: bağlantılar (hyperlink) ve görseller. <a href> başka bir kaynağa, <img src> bir görsele referans verir. Her ikisinin de tek satırlık doğru kullanımı saatlerce sorunu önler.

target="_blank" kullandığınızda mutlaka rel="noopener noreferrer" ekleyin: aksi halde yeni sekmedeki sayfa window.opener üzerinden orijinal sayfanıza referans tutar ve bu, eski tarayıcılarda phishing saldırılarına kapı açar. Modern Chrome/Firefox bunu otomatik noopener ile davranır ama yine de açıkça yazmak en sağlam yoldur.

Görsellerde Performans ve Erişilebilirlik

Görseller bir sayfanın ağırlığının ortalama %50-65'ini oluşturur. Yanlış kullanılmış tek bir hero görseli tüm performans bütçenizi yer. Aşağıdaki kural seti üretim sayfalarında her zaman uygulanmalı:

alt: görsel yüklenmediğinde veya ekran okuyucuda okunacak metin. Süs amaçlı görseller için alt="" (boş) bırakın, bilgi taşıyan görseller için tanımlayıcı yazın
width / height: görselin gerçek boyutları. CLS (Cumulative Layout Shift) önlemenin tek doğru yolu
loading="lazy": ekrana girmeden indirilmez. Hero (LCP) görseli için kullanmayın
fetchpriority="high": LCP görseli için kritik fetch önceliği
WebP / AVIF: JPEG'e göre %25-50 daha küçük dosya
srcset / sizes: tarayıcının cihaza uygun boyutu seçmesi

Görsel optimizasyonun derinine inmek için sayfa hızı ve Core Web Vitals 2026 yazımıza göz atın. Toplu WebP/AVIF dönüşümü için komut satırı cwebp ve avifenc araçları yeterlidir.

Listeler ve Tablolar

Sıralı veriler için doğru etiketi seçmek hem semantic hem de pratik açıdan önemlidir. <ul> sırasız (madde imli), <ol> sıralı (numaralandırılmış), <dl> tanım listesi içindir. Tablolar tablo verisi için kullanılmalı — düzen amaçlı (layout) tablolar 2026'da artık tabu sayılır.

scope="col" ve scope="row" özellikleri ekran okuyucuların hücreleri doğru başlığa bağlamasını sağlar. <caption> tablonun anlamını özetler. Tabloya CSS ile sınır eklemek için border-collapse: collapse klasiktir.

Form Elementleri ve Doğrulama

Form, web'in kullanıcıdan veri aldığı tek standart yoldur. HTML5 ile gelen yeni input tipleri ve attribute'lar, eskiden JavaScript'le yapılması gereken doğrulamaların büyük kısmını sıfır kod ile çözer. Aşağıdaki form üretime hazır bir iletişim formudur:

label for="...": tıklanabilir etiket; ekran okuyucuda input ile bağlantı kurar
autocomplete: tarayıcının form doldurma davranışı (kayıtlı bilgileri öner)
inputmode="email": mobilde uygun klavye düzeni
pattern="...": regex tabanlı doğrulama
required: boş gönderimi engeller
fieldset / legend: form bölümlerini gruplar (özellikle uzun formlarda)

Form üzerinden gerçek veri kabul ediyorsanız sunucu tarafında mutlaka tekrar doğrulama yapın — HTML doğrulaması yalnızca kullanıcı deneyimi içindir, güvenlik değildir. Backend'de ayrıca SQL injection ve XSS'e karşı korunma şarttır; detaylar için SQL injection önleme ve XSS ve CSP koruma rehberlerimizi inceleyin.

CSS ile Biçimlendirme: İlk Stiller

HTML iskeletini kurduktan sonra sıra CSS (Cascading Style Sheets) ile boyamaya gelir. CSS üç şekilde HTML'e bağlanır: harici <link> ile (önerilen), <style> blokları ile (sayfa içi), inline style attribute ile (genelde kaçınılmalı). Üretim sitesi her zaman harici dosya kullanmalı — cache'lenir, kod tekrarı azalır, bakım kolaylaşır.

clamp() fonksiyonu CSS'in en güzel modern eklemelerinden biridir: bir min/preferred/max değeri tek satırda yazıp font boyutunu, padding'i veya genişliği akıcı şekilde ölçeklendirebilirsiniz. clamp(2rem, 4vw + 1rem, 3.5rem) ifadesi mobilde 2rem, masaüstünde 3.5rem değerinde sorunsuz büyür.

Modern Layout: Flexbox ve Grid

15 yıl boyunca CSS'te düzen kurmak float, position ve sayısız hile gerektirirdi. Flexbox (2015) ve Grid (2017) tüm bunu radikal şekilde basitleştirdi. Bugün hâlâ float ile layout yazıyorsanız, son 10 yılı kaçırmışsınız demektir.

Pratik kural: tek eksende sıralanan öğeler (navbar, kartlar) için Flexbox, gerçek bir 2D düzen (sayfa şablonu, resim galerisi, dashboard) için Grid. İki teknik birlikte de kullanılabilir; iç içe geçer.

Responsive Tasarım: Media Queries

Mobile-first yaklaşımı benimseyin: önce küçük ekran için yazın, sonra min-width ile büyük ekranlara genişletin. Bu yaklaşım hem CSS'i daha kısa tutar, hem de düşük güçlü mobil cihazların yanlışlıkla masaüstü için tasarlanmış ağır CSS yüklemesini önler.

prefers-color-scheme ve prefers-reduced-motion kullanıcı tercihine saygı gösterir; modern siteler bunları varsayılan olarak destekler. Ayrıca container queries (2023) artık tüm büyük tarayıcılarda destekleniyor — viewport yerine bileşenin kendi kapsayıcısının boyutuna göre stil yazmanıza olanak tanır.

Web Fontları ve Tipografi

İyi tipografi sayfayı profesyonel gösterir; kötü font seçimi ucuzlatır. Sistem fontları (system-ui) en hızlı çalışır ve çoğu zaman yeterlidir. Özel font istiyorsanız WOFF2 formatında, self-host edilmiş ve preload edilmiş olmalı:

font-display: swap font yüklenene kadar sistem fontunu gösterir, hazır olduğunda değiştirir — FOIT (Flash of Invisible Text) yerine FOUT (Flash of Unstyled Text) tercih edilir. Türkçe karakterler için unicode-range ile latin-ext aralığını dahil etmek şarttır; aksi halde ı, ğ, ş glifleri eksik olur.

JavaScript: Sayfaya Davranış Kazandırmak

HTML iskelet, CSS giysidir; JavaScript ise hareket. Basit bir karanlık mod toggle, modal açma, form gönderim animasyonu için 10-20 satır JavaScript yeterlidir. JavaScript'i her zaman <body> sonunda veya defer attribute ile yükleyin — yoksa parser bloklanır.

Vanilla JavaScript (kütüphanesiz JS) günümüzde inanılmaz güçlü — fetch, querySelector, ES modules, async/await, optional chaining gibi özellikler 5 yıl önce kütüphane gerektiriyordu. Küçük siteler için React/Vue/Svelte gibi framework'lere gerek olmayabilir; gerek varsa React modern web uygulaması, Vue 3 Composition API ya da Next.js 15 App Router rehberlerimizi inceleyebilirsiniz.

Dosya ve Klasör Yapısı

İlk birkaç dosyada yapı önemsiz görünür; sayfa sayısı 5'i geçince organize bir klasör yapısı zaman kazandırır. Klasik bir küçük site için aşağıdaki düzen sade ve genişlemeye uygundur:

Sayfa sayısı arttıkça blog/, urunler/ gibi alt klasörler eklenir. Linkleri her zaman kök dizinden mutlak verin (/styles/base.css) — relative path (../styles/base.css) sayfayı taşıyınca kırılır.

SEO Temelleri: Sayfanızı Bulunabilir Yapın

Sayfayı yazdınız, yayınladınız — şimdi Google'ın bulması gerekiyor. SEO'nun büyük resmi için arama motoru ve SEO rehberi yazısına bakın; burada HTML seviyesinde önemli detayları toparlayalım:

title: 50-60 karakter, anahtar kelime önde
meta description: 120-160 karakter, click-through'u artıran
h1: sayfanın ana başlığı, sayfa başına bir tane
canonical link: aynı içeriğin birden fazla URL'de göründüğü durumlar için
structured data (JSON-LD): Article, BreadcrumbList, FAQPage gibi schema'lar
sitemap.xml ve robots.txt: indeksleme yönlendirmesi
Open Graph + Twitter Card: sosyal medya paylaşım kartları
hreflang: çok dilli site için dil sürümleri arasında bağ

Yapısal veri test edilmeden eklenmemeli — Rich Results Test Google'ın resmi doğrulayıcısıdır.

Site Haritası ve robots.txt

Arama motoru botlarının siteyi tarayabilmesi için iki dosya kritik: sitemap.xml sayfaların listesi, robots.txt hangi yolların taranabilir olduğunun beyanı. Detaylı için arama motorlarına site ekleme rehberi 2026 ve web sitesi nasıl kurulur rehberi faydalı olacaktır.

Geçerlilik Kontrolü ve Lint

HTML hataları sessiz kalır — tarayıcı yanlış da olsa render eder. Ama yanlış kapatılmış etiketler, geçersiz nesting (<div> içine <p> içine başka <div>) sonradan beklenmedik bug'lara yol açar. W3C HTML Validator standarda göre tüm hataları listeler.

CI/CD pipeline'ında her commit'te otomatik HTML/CSS/JS lint çalıştırmak küçük hataları erken yakalar — yapı kurma rehberimiz GitHub Actions ile CI/CD bu konuyu detaylı işliyor.

Yayına Alma: HTML Dosyanızı İnternete Koymak

Yerelde çalışan sayfayı dünyaya açmak için web hosting ve domain gerekir. Static HTML siteleri için 2026'da pek çok ücretsiz veya ucuz seçenek var. Hosting seçimi için hosting nedir, türleri nelerdir ve web hosting paket karşılaştırması kaynaklarına bakın. Domain için domain nedir ve alan adı nasıl alınır rehberleri tam yol gösterir.

Static hosting: Cloudflare Pages, Netlify, Vercel, GitHub Pages — ücretsiz katmanlar bile çoğu küçük site için yeterli
Paylaşımlı hosting (cPanel/Plesk): aylık 30-150 TL, yaklaşık (sağlayıcıya göre değişir, 2026 verisi)
VPS: aylık 150-500 TL, Linux sunucu yönetimi gerekir — Linux sunucu yönetimi temelleri
Cloud (AWS S3 + CloudFront, Hetzner): kullanım bazlı, küçük sitelerde aylık 5-20 USD
Yerel sağlayıcılar: Türkiye'deki Natro, Turhost, GuzelHosting, İsimTescil gibi firmalar TL fiyatlandırma + Türkçe destek sunar

FTP/SFTP ile Klasik Yükleme

Paylaşımlı hosting paketi aldıysanız klasik yöntem FTP'dir. FileZilla ücretsiz ve güvenilir bir istemcidir. SFTP (port 22) FTP'ye (port 21) tercih edilmeli — şifreli kanal sağlar.

Git Tabanlı Modern Deploy

GitHub Pages, Cloudflare Pages, Netlify, Vercel gibi servisler git push'la otomatik deploy yapar. Yerel değişikliği commit edip push ettiğiniz an site güncellenir — FTP'ye geri dönmek istemezsiniz.

Gerçek alan adı eklemek için DNS ayarları gerekir. DNS nedir, nasıl değiştirilir rehberi A kaydı, CNAME, TTL, propagation gibi kavramları tek tek açıklıyor.

HTTPS / SSL Sertifikası

2026'da HTTPS olmayan bir site Chrome'da "Güvenli değil" uyarısıyla açılır, Google sıralamada düşürür ve modern API'lerin (geolocation, service worker, push) çoğu çalışmaz. Sertifika almak ücretsiz ve otomatik: Let's Encrypt + Certbot 2 dakikada bitirir. Detay için Let's Encrypt ile ücretsiz SSL.

Cloudflare gibi CDN kullanıyorsanız sertifika otomatik gelir; origin sunucuya da Cloudflare Origin Certificate kurulumu ekstra güvenlik katmanıdır. HTTPS ve TLS 1.3 rehberi modern yapılandırma seçeneklerini ele alıyor.

Performans: Hızlı Yükleyen Bir Sayfa

Static HTML siteleri zaten doğal olarak hızlıdır — ama yanlış konfigürasyon (uncompressed, no-cache, blocking JS) yine de sayfayı yavaşlatır. Aşağıdaki kontrol listesi en yaygın yanlışları temizler:

Brotli/gzip sıkıştırma sunucu seviyesinde aktif olmalı
HTTP/2 veya HTTP/3: tüm modern sunucularda mevcut
Cache-Control: max-age=31536000, immutable — versiyonlu asset'ler için
preconnect / preload: kritik kaynaklar için
Render-blocking JS/CSS yok: defer/async kullan
Görseller: WebP/AVIF + width/height + lazy load
Font subset + preload + display: swap
3rd party script audit: gereksiz pixel/widget kaldır
CDN: Cloudflare, Bunny, Fastly — global edge cache

Nasıl ölçülür? PageSpeed Insights, Chrome DevTools Lighthouse, WebPageTest üçlüsü uçtan uca tablo verir. Hedef: Lighthouse Performance skoru 90+, LCP < 2.5s, CLS < 0.1, INP < 200ms. Daha derin için site optimizasyonu nasıl yapılır yazımız tüm katmanları örtüyor.

Güvenlik: Header'lar ve Best Practice

Tek bir HTML sayfası bile yanlış header'larla XSS, clickjacking, MIME sniffing saldırılarına açık olabilir. Sunucu yapılandırmanızda aşağıdaki güvenlik header'ları her response'a eklenmeli:

securityheaders.com üzerinden A+ skor hedefleyin. CSP konfigürasyonu zor olabiliyor; yanlış yazılmış CSP sayfayı kırar — önce Content-Security-Policy-Report-Only ile test edin. Detay için XSS ve CSP koruma.

Yaygın Hatalar ve Tuzaklar

DOCTYPE'ı atlamak → quirks mode → CSS bozulur
charset eksikliği → Türkçe karakterler bozuk görünür
viewport meta yok → mobilde sayfa minik açılır
img'de width/height yok → CLS yüksek, layout zıplar
label-input bağlantısı yok → erişilebilirlik fail, click area küçük
Birden fazla h1 → SEO ve a11y kafası karışır
Inline style spam → bakımı imkansız
External CSS sayfa sonunda → FOUC (stilsiz görüntü)
JavaScript head'de blocking → render bloklanır
3rd party script audit'siz → analytics + chat + pixel toplamı 1.5MB JS
Karakter kodlaması yanlış → ç ğ ı ş ü ö patlaması
Mutlak path yerine relative → sayfa taşıyınca link kırılır
HTTP'den HTTPS'e mixed content → modern tarayıcılar bloklar
Form action eksik → submit bir yere gitmez

Tek Sayfadan Çok Sayfaya: Linklerle Bağlama

Site genişledikçe sayfalar arasında tutarlı bir navigasyon ve breadcrumb gerekir. <nav aria-label="breadcrumb"> ile yapısal veri birlikte verilmeli:

Statik HTML mı, CMS mi, Framework mi?

5 sayfalık tanıtım sitesi için statik HTML idealdir: hızlı, ucuz, güvenli, neredeyse hiç bakım gerektirmez. Ancak içerik düzenli güncellenecekse, bir CMS (içerik yönetim sistemi) işi kolaylaştırır. Karar verirken şu eksenlere bakın:

Statik HTML: 1-15 sayfa, içerik az değişir, geliştirici dokunuşuna uygun
WordPress: blog/içerik ağırlıklı, herkesin bildiği panel — WordPress SEO plugin önerileri
Static Site Generator (Astro, Hugo, Eleventy): blog + içerik, build-time render
Framework (Next.js, Nuxt, SvelteKit): dinamik / dashboard / web app
Headless CMS + Frontend: enterprise içerik akışı

Kararsız kaldıysanız web sitesi yazılımı seçim rehberi sizi bütün opsiyonlara taşır.

Sürdürülebilirlik: Kodu Düzenli Tutmak

Bugün yazdığınız HTML 6 ay sonra başkasının (veya gelecekteki sizin) elinde olacak. Aşağıdaki alışkanlıklar tek geliştirici projelerinde bile zaman kazandırır:

Tutarlı indentation: 2 boşluk, sekme veya 4 — hangisi olursa olsun aynı
Yorum satırları: bir bölümün niyetini açıkla, sadece ne yaptığını değil
Class isimlendirme: BEM (block__element--modifier) veya utility-first (Tailwind tarzı)
Asset versioning: /styles.css?v=20260506 ile cache busting
README.md: kurulum, deploy, yapı açıklaması
Version control: git ile her değişikliği commit
Backup: hosting yedeği yetmez, ayrı yerel veya cloud kopya tut — yedekleme stratejileri

İlerleme Yolu: Sıradaki Adımlar

Bir HTML sayfası ve bir CSS dosyasıyla bu yazıdaki temelleri kavradığınızda, tipik bir geliştirici şu sıraya devam eder:

1. CSS derinleşmesi: custom properties, animasyonlar, transitions
2. JavaScript temelleri: DOM API, event'lar, fetch
3. Utility-first CSS: Tailwind CSS sıfırdan ve Tailwind v4 yenilikleri
4. Static Site Generator: Astro veya Eleventy ile çoklu sayfa
5. Framework: React, Vue 3 veya Next.js 15
6. Backend: Node.js ile REST API
7. DevOps: Docker ile deploy, CI/CD pipeline
8. Performans ve SEO: Core Web Vitals

Pratik Mini Proje: Tek Sayfa Portfolyo

Tüm öğrendiklerinizi bir araya getirmek için klasik bir egzersiz: tek sayfa kişisel portfolyo. Hero bölümü, hakkımda, projeler grid'i, iletişim formu, footer. Aşağıdaki taslak başlangıç noktası olabilir — kendi tarzınızla değiştirin.

Kodu klonlayın, kendi metinlerinizi koyun, GitHub'a push edip Cloudflare Pages'a bağlayın — 15 dakikada gerçek bir alan adında yayında olur.

Mobil ve PWA: Daha İleri Bir Adım

Static HTML siteniz çalışıyorsa, ek 100 satır kod ile Progressive Web App'e (PWA) dönüştürebilirsiniz: ana ekrana eklenebilir, çevrimdışı çalışır, push notification destekler. manifest.webmanifest dosyası ve bir service worker yeter:

Tarayıcı Uyumluluğu ve Eski Tarayıcılar

2026'da Internet Explorer artık tamamen tarihte; Chrome, Firefox, Safari, Edge ve mobil sürümleri evergreen (kendiliğinden güncellenir) tarayıcılar. Yine de bazı kurumsal ortamlarda eski Safari (iOS 15-) veya kurumsal Edge sürümleri görülür. CSS feature query (@supports) ile yeni özelliği destekleyenlere yeni stil, desteklemeyenlere fallback verebilirsiniz:

Sıkça Sorulan Sorular

Tek bir HTML dosyası site sayılır mı?

Evet — bir index.html bile internet üzerinde yayınlandığında bir web sitesidir. Kişisel kartvizit, etkinlik landing page'i, küçük tanıtım sayfaları çoğu zaman tek dosyadır. Sayfa sayısı ihtiyaca göre büyür.

HTML öğrenmek ne kadar sürer?

Temelleri (etiketler, head/body, semantic) bir hafta içinde kavranabilir. Akıcı CSS ve responsive tasarımla beraber 1-2 ay içinde gerçek projeler yapılabilir. Mastery yıllar alır — ama üretken hale gelmek hızlıdır.

HTML için hangi sürümü öğrenmeliyim?

HTML artık sürümsüz, yaşayan bir standart (WHATWG). "HTML5" terimi hâlâ kullanılır ama 2026 itibariyle herkesin bahsettiği aynı standarttır. Yeni özellikler tarayıcı desteği geldikçe eklenir.

WordPress yerine HTML mi yazmalıyım?

İçeriği kendiniz düzenli güncelleyecekseniz ve teknik bilginiz sınırlıysa WordPress mantıklı. Sayfalarınız büyük ölçüde sabitse veya geliştirici desteğiniz varsa statik HTML daha hızlı ve güvenli. Ortası: Astro, Eleventy gibi static site generator'lar.

HTML sayfası yapmak ücretsiz mi?

Yazmak tamamen ücretsiz: editör (VS Code), tarayıcı, kod yerel makinenizde. Yayınlamak için domain (yıllık ~50-300 TL, yaklaşık) ve hosting (ücretsiz seçenekler var) gerekir. Ayrıntılar: web sitesi fiyatları ve ücretsiz domain ve hosting veren siteler.

HTML ile dinamik site yapılabilir mi?

Saf HTML statiktir. Form gönderimi, kullanıcı girişi, içerik filtreleme gibi dinamik özellikler için JavaScript (frontend) + backend (Node.js, PHP, Python) gerekir. Statik bir HTML üzerine 50-100 satır JavaScript ile küçük dinamik özellikler eklenebilir.

Kaynaklar

MDN Web Docs — HTML: kapsamlı, sürekli güncel referans
WHATWG HTML Standard: yaşayan resmi standart
web.dev: Google'ın modern web rehberi
caniuse.com: özellik tarayıcı destek tablosu
W3C HTML Validator: dokümanın geçerliliği
WAVE: erişilebilirlik testi
PageSpeed Insights: performans ve Core Web Vitals
Google Rich Results Test: yapısal veri kontrolü
securityheaders.com: güvenlik header denetimi
SSL Labs: TLS yapılandırma testi