Web tarayıcınızı açıp herhangi bir siteye girdiğinizde karşınıza metinler, görseller ve butonlar çıkar. İşte tüm bu yapının arkasında sadece tek bir temel teknoloji yatar. O teknolojiye kısaca HTML deriz. 2026 yılında hala web’in omurgası olmayı sürdürüyor.
Pek çok kişi HTML modası geçmiş bir araç sanır. Oysa gerçek tam tersidir. Modern framework’ler, yapay zeka araçları ve dinamik uygulamalar bile son çıktı olarak bu yapıya muhtaçtır.
Dahası, Google’ın Core Web Vitals güncellemeleri bu durumu değiştirdi. Bu sebeple doğru yapılandırdığınız kaynak kodunu her zamankinden daha kritik hale getirdi.
Bugün size bu konuyu en temelden en ileri seviyeye kadar anlatacağım. Kendi projelerimde yıllarca edindiğim tecrübeleri ve 2026’nın güncel verilerini harmanlayacağım. Hazırsanız başlayalım!
HTML (HyperText Markup Language) Nedir? Temel Tanım ve 2026’da Önemi
1990 yılında Tim Berners-Lee, CERN’de çalışırken basit bir fikirle yola çıktı. Bilim insanları belgelerini birbirine bağlayabilmeliydi. Bu fikir, hiper metin kavramını doğurdu. Ve bugün kullandığımız web sayfası yapısının temelini attı.
Bugün geldiğimiz noktada ise durum çok daha heyecan verici. Yapay zeka asistanları kod üretebiliyor, fakat temel yapı hala aynı. Bu nedenle konuyu sağlam kavramak her zamankinden değerli.
HTML Açılımı: HyperText Markup Language Ne Demek?
Bu kısaltmanın açılımı HyperText Markup Language yani Hiper Metin İşaretleme Dili’dir. Adındaki her kelime aslında ne işe yaradığını özetler. Hiper Metin, sayfalar arası köprü bağlantılarını ifade eder. İşaretleme Dili, içeriği etiketlerle yapılandırır.
Bir programlama dili değildir, bunu hemen netleştirelim. Hesaplama yapamaz, koşul çalıştıramaz veya döngü kuramazsınız. Yalnızca içeriğin hangi parçasının başlık, hangi parçasının paragraf olduğunu tarayıcıya bildirirsiniz.
Örneğin bir metin belgesi düşünün. Bu belgede bazı cümleleri fosforlu kalemle işaretlersiniz. İşte HTML dili de benzer şekilde çalışır. Tarayıcıya “bu kısım başlık, şu kısım liste” dersiniz.
HTML Bir Programlama Dili midir? En Çok Sorulan Sorunun Net Yanıtı
Bu soruyu yıllardır sayısız kez duydum. Cevabı çok net: Hayır, değildir.
Peki neden? Çünkü programlama dilleri değişken tanımlama, koşullu ifade çalıştırma ve döngü kurma yeteneğine sahiptir. HTML dili ise yalnızca statik sayfa iskeleti oluşturur.
Ancak bu onu değersiz yapmaz, aksine vazgeçilmez kılar. Bir binanın kolonları nasıl taşıyıcı görev görüyorsa, bu yapı da web’in taşıyıcı kolonudur.
CSS olmadan bir site çirkin görünür, JavaScript olmadan etkileşimsiz kalır. Ama bu işaretleme dili olmadan ortada hiçbir şey olmaz.
Nitekim React, Angular veya Vue gibi framework’ler bile JSX aracılığıyla bu yapıya derlenir. Yani modern web geliştirme dünyasında bile temel her zaman aynıdır.
| Özellik | Programlama Dili | HTML İşaretleme Dili |
|---|---|---|
| Değişken Tanımlama | Var | Yok |
| Koşul İfadeleri | Var | Yok |
| Döngü Kurma | Var | Yok |
| İçerik Yapılandırma | Sınırlı | Tam |
| Tarayıcıda Render | Dolaylı | Doğrudan |
HTML Ne İşe Yarar? 10 Maddede Kullanım Alanları
Bu teknolojinin ne işe yaradığını anlamak için günlük hayattan örnekler vereyim. Sabah kalkıp haber sitesine girdiğinizde gördüğünüz her şeyin temelinde bu yapı vardır.
E-ticaret sitelerinden sosyal medyaya, bankacılık uygulamalarından e-posta şablonlarına kadar her yerde karşınıza çıkar.
Üstelik kullanım alanı yalnızca tarayıcılarla sınırlı değildir. Mobil uygulama geliştirme araçları, masaüstü yazılımlar ve hatta oyun motorları bile bu işaretleme dilinden faydalanır. Gelin şimdi tüm bu kullanım alanlarını detaylıca inceleyelim.
Web Sitelerinin İskeleti: HTML ile Sayfa Yapısı Oluşturma
Geliştiriciler aslında her web sayfasını bir iskelet üzerine inşa eder. Bu iskeleti oluşturan şey, başlık etiketleri, paragraf etiketi ve görsel yerleştirme elemanlarıdır.
Temel olarak bir sayfa; üst bilgi, içerik alanı ve alt bilgi olmak üzere üç ana bölümden oluşur.
Kendi projelerimde her zaman önce sayfa iskeletini düzgün kurmaya özen gösteririm. Çünkü temel sağlam olmazsa üzerine ne koyarsanız koyun yıkılır. İşte bu nedenle semantik web yaklaşımı son yıllarda bu kadar önem kazandı.
Arama motorları header, nav veya footer gibi etiketleri inceler. Bu sayede sayfanızın hangi bölümünün ne işe yaradığını anlar. Bu da SEO performansını doğrudan etkileyen bir faktördür.
HTML Nerelerde Kullanılır? Web’den E-Postaya Tam Liste
HTML kullanım alanları gerçekten çok geniştir. Gelin başlıca kullanım yerlerine birlikte göz atalım:
- Statik Web Sayfaları: Kurumsal tanıtım siteleri, portfolyo sayfaları ve açılış sayfaları.
- Dinamik Web Uygulamaları: JavaScript ile zenginleştirilmiş etkileşimli platformlar.
- E-Posta Şablonları: Geliştiriciler bültenleri ve pazarlama e-postalarını bu yapıyla kodlar.
- Mobil Uygulamalar: React Native ve Ionic gibi framework’ler bu temeli kullanır.
- Masaüstü Uygulamaları: Electron ile Slack ve VS Code gibi uygulamalar.
- Oyun Geliştirme: Canvas elementi ile tarayıcı tabanlı oyunlar.
- Dijital Pazarlama: Açılış sayfaları ve dönüşüm odaklı sayfalar.
- E-Ticaret: Ürün sayfaları, sepet ve ödeme ekranları.
- Blog Platformları: WordPress gibi CMS altyapıları.
- PWA: Progressive Web App ile çevrimdışı çalışan uygulamalar.
HTML’in Tarihçesi: 1990’dan 2026’ya Yolculuk
Bu teknolojinin tarihi aslında internetin kendisiyle yaşıttır. 1990’da Tim Berners-Lee ilk sürümü yazdığında amacı çok basitti. CERN’deki araştırmacılar belgeleri birbirine bağlayarak daha hızlı bilgi paylaşımı yapabilmeliydi.
O günden bugüne inanılmaz bir evrim geçirdi. Tarayıcı savaşları, standartların belirlenmesi ve mobil devrim bu evrimin kilometre taşları oldu. Her aşamada yeni yetenekler kazandı.
Bugün 2026’da ise HTML5.3 sürümüyle birlikte yerel depolama, service worker ve webAssembly gibi teknolojilerle entegre çalışıyor. Yapay zeka araçları da bu yapıyı otomatik üretebiliyor.
HTML Sürümleri: HTML 1.0’dan HTML5.3’e Kronoloji
Gelin bu uzun yolculuğun önemli duraklarına kısaca göz atalım:
- HTML 1.0 (1993): İlk resmi sürüm. Sadece temel metin biçimlendirme ve bağlantı desteği sunar.
- HTML 2.0 (1995): Geliştiriciler bu sürümle sisteme form elemanlarını ekler. Bununla birlikte tablo oluşturma desteği de sağlarlar.
- HTML 3.2 (1997): W3C tarafından standartlaştırılan ilk sürümdür.
- HTML 4.01 (1999): CSS desteği ve erişilebilirlik özellikleri gelir.
- XHTML 1.0 (2000): XML kurallarıyla daha katı bir sözdizimi sunar.
- HTML5 (2014): Devrim niteliğinde. Geliştiriciler bu sürümle video ve ses etiketlerini sisteme ekler. Üstelik canvas ile semantik etiketleri de getirirler.
- HTML5.1 – 5.2 (2016-2017): Geliştiriciler bu süreçte güvenlik ve erişilebilirlik konularında önemli iyileştirmeler yapar.
- HTML5.3 (2024-günümüz): En güncel sürüm. Modern API entegrasyonları içerir.
HTML Sayfa Yapısı: Sıfırdan İlk Web Sayfanızı Oluşturun
Teori kısmını yeterince konuştuk. Şimdi kolları sıvayalım ve ilk sayfamızı oluşturalım. Bu bölümü adım adım takip ederseniz, 10 dakika içinde çalışan bir web sayfasına sahip olacaksınız.
Öncelikle ihtiyacınız olan tek şey bir kod editörü ve bir web tarayıcısı. Ben şahsen Visual Studio Code kullanıyorum ve size de onu önereceğim. Notepad++ veya Sublime Text gibi alternatifleri de tercih edebilirsiniz.
HTML Dosyası Nasıl Oluşturulur? VS Code ile İlk Adımlar
İlk olarak VS Code’u açın ve yeni bir dosya oluşturun. Dosyayı index.html olarak kaydedin. Ardından aşağıdaki temel yapıyı yazın:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Dosyayı kaydettikten sonra tarayıcınızda açın. Karşınıza kocaman bir “Merhaba Dünya!” yazısı çıkacak. İşte bu kadar basit! Artık sizin de çalışan bir web sayfanız var.
Bu noktada heyecanlanmanızı anlıyorum. İlk sayfanızı oluşturmak gerçekten büyülü bir andır. Üstelik bu temel üzerine inşa edeceğiniz her şey için sağlam bir zemin hazırladınız.
HTML Temel Yapısı: DOCTYPE, Head ve Body Etiketleri
Yukarıdaki kodda gördüğünüz her satırın belirli bir görevi vardır. DOCTYPE bildirimi tarayıcıya belgenin türünü söyler. Bu olmazsa tarayıcı quirks moduna geçer ve sayfanız garip görünebilir.
Head bölümü, sayfa hakkında meta veri içerir. charset tanımı Türkçe karakterlerin düzgün görünmesini sağlar. Viewport ise mobil uyumluluk için kritik öneme sahiptir.
Body bölümü ise kullanıcının gördüğü her şeyi barındırır. Başlıklar, paragraflar, görseller ve butonlar burada yer alır. Kısacası sayfanın etten kemikten kısmı burasıdır.
| Etiket | Görevi | Zorunlu mu? |
|---|---|---|
| <!DOCTYPE html> | Belge türünü bildirir | Evet |
| <html> | Kök elementi tanımlar | Evet |
| <head> | Meta verileri barındırır | Evet |
| <body> | Görünür içeriği barındırır | Evet |
| <title> | Sayfa başlığını belirler | Evet |
En Çok Kullanılan 20 HTML Etiketi ve Anlamları
HTML dilinde yüzlerce etiket vardır. Ancak günlük kullanımda en sık karşılaştıklarınız şunlardır:
- <h1> – <h6>: Başlık etiketleri. h1 en önemli, h6 en az önemli başlıktır.
- <p>: Paragraf etiketi. Metin blokları oluşturur.
- <a>: Köprü bağlantısı oluşturur.
- <img>: Görsel yerleştirme için kullanırız.
- <ul> / <ol> / <li>: Liste etiketleri.
- <div>: Blok eleman. Genel amaçlı kapsayıcıdır.
- <span>: Satır içi eleman. Metin içi vurgu yapar.
- <table>: Tablo oluşturmada faydalanıyoruz.
- <form>: Form elemanlarını barındırır.
- <input>: Kullanıcıdan veri alır.
- <button>: Tıklanabilir buton oluşturur.
- <br>: Satır sonu ekler.
- <strong> / <b>: Kalın metin.
- <em> / <i>: İtalik metin.
- <header>: Üst bilgi bölümü.
- <footer>: Alt bilgi bölümü.
- <nav>: Gezinme menüsü.
- <section>: İçerik bölümü.
- <article>: Bağımsız içerik parçası.
- <iframe>: Başka bir sayfayı gömer.
HTML5 Nedir? HTML ile HTML5 Arasındaki Fark
HTML5, 2014’te hayatımıza girdi ve web’i kökten değiştirdi. Eski sürümlerle arasındaki farklar gerçekten devrim niteliğindedir. Özellikle multimedya desteği ve anlamsal web yaklaşımı öne çıkar.
Önceleri video eklemek için Flash gibi üçüncü parti eklentilere ihtiyaç duyardık. Artık doğrudan tarayıcı üzerinden video ve ses içeriği sunabiliyoruz. Ayrıca canvas elementi ile çizim ve animasyon yapmak da mümkün.
Geliştiriciler mobil uyumluluk konusunda da büyük bir sıçrama gerçekleştirdi. Viewport meta etiketi ve responsive tasarım yetenekleri sayesinde siteler tüm cihazlarda düzgün görünüyor.
HTML5 ile Gelen Yeni Semantik Etiketler
Semantik etiketler, içeriğin anlamını tarayıcıya ve arama motoruna açıkça belirtir. İşte HTML5 ile gelen başlıca anlamsal web etiketleri:
- <header>: Sayfa veya bölüm başlığını tanımlar.
- <nav>: Ana gezinme menüsünü belirtir.
- <main>: Sayfanın ana içeriğini işaretler.
- <article>: Blog yazısı gibi bağımsız içerikleri kapsar.
- <section>: Tematik içerik gruplarını ayırır.
- <aside>: Yan bilgi veya kenar çubuğu içeriğidir.
- <footer>: Alt bilgi alanını belirtir.
- <figure> / <figcaption>: Görsel ve açıklamasını ilişkilendirir.
- <time>: Tarih ve saat bilgisini semantik olarak işaretler.
- <mark>: Vurgulanmış metni belirtir.
Bu etiketleri kullanmak SEO uyumlu kod yazmanın temelidir. Arama motoru botu sayfanızı daha iyi anlar ve indeksleme süreci hızlanır.
Ayrıca ekran okuyucu yazılımlar da bu yapı sayesinde görme engelli kullanıcılara doğru yönlendirme yapabilir.
HTML5 Multimedya: Video, Ses ve Canvas ile Zengin İçerik
Multimedya desteği, HTML5’in en büyük yeniliklerinden biridir. Video eklemek için şu kodu kullanabilirsiniz:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Tarayıcınız video etiketini desteklemiyor.
</video>Ses dosyaları için de benzer bir yapı geçerlidir. <audio> etiketi ile arka plan müziği veya podcast ekleyebilirsiniz. Canvas ise JavaScript ile dinamik grafikler çizmenizi sağlar.
Özellikle canvas elementi, tarayıcı tabanlı oyun geliştirme için harika bir araçtır. Ben kendi projelerimde veri görselleştirme için sıkça kullanıyorum.
HTML, CSS ve JavaScript: Web’in Üç Silahşörü
Bu üç teknolojiyi birbirinden ayırmak imkansızdır. Her biri web geliştirme temelleri açısından kritik bir rol üstlenir. Açıkçası birini çıkardığınızda sistem çöker.
Şöyle düşünebilirsiniz: İşaretleme dili iskeleti oluşturur. Stil şablonu yani CSS, bu iskelete et ve deri giydirir. JavaScript ise sinir sistemini kurarak etkileşimi sağlar. Üçü birlikte tam bir organizma oluşturur.
Peki neden bu üçünü aynı anda öğrenmelisiniz? Açıkçası modern web geliştirme dünyasında bu üçlü olmadan front-end geliştirmeyi düşünemezsiniz. İş ilanlarının neredeyse tamamı bu becerileri talep eder.
HTML ve CSS Arasındaki Fark Nedir?
Bu iki teknoloji sıkça karıştırılır, oysa görevleri tamamen farklıdır. İşaretleme dili içeriğin ne olduğunu tanımlar. Diğer yandan CSS ise bu içeriğin nasıl göründüğünü belirler.
Örneğin bir başlık elementi oluşturursunuz. Bu başlığın rengini, boyutunu ve yazı tipini CSS ile ayarlarsınız. Yani biri yapı, diğeri sunum katmanıdır. Bu ayrımı anlamak web tasarım öğrenme sürecinizi hızlandırır.
Öte yandan şunu da belirtmeliyim: HTML olmadan CSS çalışır mı? Teknik olarak hayır. Çünkü CSS’in stil uygulayabileceği bir DOM yapısına ihtiyacı vardır. Sayfa iskeleti oluşmadan stil şablonu tek başına anlamsızdır.
| Özellik | HTML | Stil Şablonu (CSS) |
|---|---|---|
| Görevi | İçerik yapılandırma | Görsel biçimlendirme |
| Sözdizimi | Etiket tabanlı | Seçici ve özellik tabanlı |
| Animasyon | Sınırlı (Canvas) | Kapsamlı (Keyframes) |
| Responsive | Viewport meta | Media queries |
| Bağımsız Çalışma | Evet | Hayır |
HTML ve JavaScript İlişkisi: Statik Sayfadan Dinamik Uygulamaya
İşaretleme dili tek başına statik sayfa oluşturur. Yani içerik sabittir, kullanıcı etkileşimi yoktur. İşte JavaScript tam bu noktada devreye girer ve sayfayı dinamik sayfa haline getirir.
JavaScript, DOM üzerinde değişiklik yaparak içeriği anlık güncelleyebilir. Örneğin butona tıklayınca yeni bir paragraf eklemeyi veya form doğrulaması yapmayı JavaScript üstlenir. Üstelik API’den veri çekme işini de tamamen bu dil yönetir.
Dolayısıyla bu üç teknoloji arasındaki ilişki hiyerarşiktir. İşaretleme dili olmadan başlayamazsınız, CSS olmadan güzelleştiremezsiniz. JavaScript olmadan da canlandıramazsınız. Betik dili öğrenmek istiyorsanız kapsamlı bir rehbere göz atmalısınız.
Semantik HTML: SEO ve Erişilebilirlik İçin Altın Kurallar
Semantik web, modern web geliştirmenin olmazsa olmazıdır. Anlam taşıyan etiketler kullanmak hem SEO hem de erişilebilirlik açısından hayati önem taşır. Google, 2026’da sayfa sıralaması yaparken semantik yapıyı ciddiye alır.
Peki nedir bu semantik yaklaşım? Basitçe, içeriğin türüne uygun etiket kullanmaktır. Menü için nav, ana içerik için main, bağımsız yazı için article kullanmalısınız. Div yerine anlamlı etiket tercih etmek kod kalitenizi yükseltir.
Semantik HTML Etiketleri: Header, Article, Section, Nav ve Diğerleri
Bu etiketlerin her birinin belirli bir amacı vardır. Doğru kullandığınızda sayfanızın bilgi mimarisi mükemmel olur. İşte en önemli semantik etiketler ve kullanım amaçları:
- <header>: Logo, site adı ve üst navigasyonu barındırır. Her sayfada bir kez kullanmanızı öneririm.
- <nav>: Ana menü ve önemli bağlantıları içerir. Ekran okuyucu kullanıcıları doğrudan buraya atlayabilir.
- <main>: Sayfanın birincil içeriğidir. Her sayfada yalnızca bir tane olmalıdır.
- <article>: Blog yazısı, haber veya ürün kartı gibi bağımsız içerikleri sarar.
- <section>: Birbiriyle ilişkili içerikleri gruplandırır. Her section’ın bir başlığı olması iyi pratiktir.
- <aside>: Ana içerikle dolaylı ilişkili yan bilgileri tutar.
- <footer>: Telif hakkı, iletişim bilgileri ve alt menüleri kapsar.
Bu yapı sayesinde arama motoru botu sayfanızı çok daha hızlı tarar. Ayrıca Google AI Overview gibi yapay zeka destekli arama özellikleri de semantik yapılandırmayı önceliklendirir.
HTML ve Erişilebilirlik: WCAG Standartlarına Uygun Kod Yazma
Erişilebilirlik, web’in en önemli konularından biridir. WCAG 2.2 standartları, 2026 itibarıyla yasal bir zorunluluk haline gelmiştir. Özellikle Avrupa Birliği’ndeki web siteleri bu standartlara uymak zorundadır.
Erişilebilir bir sayfa oluşturmak için şu adımları izlemelisiniz: İlk olarak tüm görsellere alt metni ekleyin.
Ekran okuyucu kullanıcıları görselin ne olduğunu bu sayede anlar. İkinci olarak başlık etiketi hiyerarşisine dikkat edin. H1’den sonra H3’e atlamak erişilebilirliği bozar.
Üçüncü olarak form elemanlarına label ekleyin. Dördüncü olarak ARIA rol tanımlarını kullanın. Beşinci olarak klavye navigasyonunu test edin. Yani tüm bu adımlar kullanıcı deneyimini üst seviyeye çıkarır.
2026’da HTML Öğrenmek: Kariyer Fırsatları, Maaşlar ve Gelecek
2026 yılında bu beceriyi öğrenmek hala çok değerli. Front-end geliştirme alanında iş ilanları artmaya devam ediyor. Özellikle HTML, CSS ve JavaScript üçlüsüne hakim geliştiricilere talep yüksek.
AI araçları kod üretebilse de temel bilgiye sahip olmak sizi farklı kılar. ChatGPT size kod yazabilir, ancak o kodu anlamlandıracak ve optimize edecek kişi sizsiniz. İşte bu nedenle öğrenmeye değer mi sorusunun cevabı kocaman bir evet.
HTML CSS Uzmanı Maaşları 2026: Güncel Rakamlar
Kariyer.net 2026 verilerine göre front-end geliştirici maaşları şöyledir:
- Junior Front-End Geliştirici: 35.000 – 55.000 TL (0-2 yıl deneyim)
- Mid-Level Front-End Geliştirici: 55.000 – 85.000 TL (2-5 yıl deneyim)
- Senior Front-End Geliştirici: 85.000 – 130.000 TL (5+ yıl deneyim)
- Full-Stack Geliştirici: 75.000 – 150.000 TL (HTML + CSS + JS + Back-end)
- Freelance Web Geliştirici: Proje başına 15.000 – 100.000 TL
- UI Geliştirici: 60.000 – 110.000 TL
Bu rakamlar İstanbul, Ankara ve İzmir gibi büyük şehirler için geçerlidir. Uzaktan çalışma kültürü yaygınlaştıkça lokasyon farkı azalmaktadır. Ayrıca freelance platformlarda dolar bazlı kazanç elde etmek de mümkündür.
HTML Öğrenme Yol Haritası: Sıfırdan İşe Giden 6 Aylık Plan
HTML dilini öğrenmek için 6 aylık bir plan öneriyorum. İlk ay temel etiketleri ve sayfa yapısını öğrenin. Her gün 1 saat pratik yapın. İkinci ay CSS ile görsel tasarım yeteneklerinizi geliştirin.
Üçüncü ay JavaScript temellerine geçin. DOM manipülasyonu ve olay yönetimini kavrayın. Dördüncü ay proje geliştirmeye başlayın. Kişisel bir portfolyo sitesi yapın. Beşinci ay responsive tasarım ve erişilebilirlik konularına odaklanın.
Altıncı ay ise framework öğrenme zamanıdır. React veya Vue seçerek modern web geliştirme dünyasına adım atın. Bu planı uygulayan onlarca öğrencim 6 ay sonunda iş görüşmelerine girmeye başladı.
| Ay | Konu | Hedef |
|---|---|---|
| 1. Ay | Temel etiketler ve yapı | Statik sayfa oluşturmak |
| 2. Ay | CSS ve stil verme | Görsel olarak çekici sayfalar |
| 3. Ay | JavaScript temelleri | Etkileşim eklemek |
| 4. Ay | Proje geliştirme | Portfolyo oluşturmak |
| 5. Ay | Responsive ve erişilebilirlik | Mobil uyumlu siteler |
| 6. Ay | Framework (React/Vue) | İş başvurusuna hazır olmak |
Yapay Zeka Çağında HTML: ChatGPT ile Kod Yazma Rehberi
2026’da yapay zeka yazılımları kod yazma sürecini kökten değiştirdi. ChatGPT, Claude ve Gemini gibi büyük dil modelleri saniyeler içinde sayfa yapısı oluşturabiliyor. Ancak bu araçları etkili kullanmak için temel bilgi şart.
Ben şahsen ChatGPT’yi bir kod yazıcı olarak değil, bir asistan olarak görüyorum. Sizin yerinize düşünemez, ancak düşüncelerinizi hızlıca koda dökebilir. Bu ince çizgiyi anlamak çok önemli.
ChatGPT’ye HTML Kodu Yazdırma: En İyi Prompt Örnekleri
Doğru prompt mühendisliği ile harika sonuçlar alabilirsiniz. İşte en etkili kullandığım prompt örnekleri:
Prompt 1: "Semantik HTML5 etiketleri kullanarak bir blog ana sayfası oluştur. Header, nav, main, article ve footer içersin. SEO uyumlu olsun. Mobil responsive tasarım için viewport meta etiketini ekle."Prompt 2: "Erişilebilirlik standartlarına uygun bir kayıt formu yaz. Tüm input'lara label ekle. ARIA rollerini tanımla. Form doğrulaması için required attribute kullan."Prompt 3: "Aşağıdaki tasarımı HTML ve CSS ile kodla: üstte tam genişlik hero bölümü, altında 3 sütunlu kart yapısı, en altta footer. Flexbox kullan. Renk paleti mavi ve beyaz olsun."Bu prompt’ları kullanırken mümkün olduğunca spesifik olun. Açık kaynak topluluklarında paylaşılan prompt şablonlarından ilham alabilirsiniz.
Yapay Zeka HTML Öğrenmeyi Kolaylaştırır mı? Avantajlar ve Sınırlar
AI araçları öğrenme sürecini gerçekten hızlandırır. Bilmediğiniz bir etiketi anında sorgulayabilir, hatalı kodunuzu düzeltebilirsiniz. Ayrıca karmaşık yapıları adım adım açıklamasını isteyebilirsiniz.
Ancak önemli bir sınır vardır. Yapay zeka size hazır çözüm sunar, fakat temel mantığı kavramazsanız ilerleyemezsiniz.
İş görüşmesinde veya teknik mülakatta yapay zeka yanınızda olmayacak. Bu nedenle öğrenmeyi asla ihmal etmeyin.
Benim önerim, öğrenme sürecinde yapay zekayı bir mentor gibi kullanmanızdır. Kodu siz yazın, yapay zeka kontrol etsin. Hataları açıklasın, alternatif çözümler önersin.
HTML ile SEO Uyumu: Arama Motorlarında Üst Sıralara Çıkma Stratejileri
SEO uyumlu kod yazmak, modern web geliştirmenin ayrılmaz bir parçasıdır. Google sıralama algoritması sayfa yapınızı, başlık hiyerarşinizi ve meta verilerinizi analiz eder. Doğru yapılandırılmış bir sayfa her zaman avantajlıdır.
Core Web Vitals metrikleri de sayfa hızı optimizasyonu ile doğrudan ilişkilidir. Gereksiz etiketler, optimize edilmemiş görseller ve hatalı yapılar performansı düşürür. Bu da hemen çıkma oranını artırarak sıralamanızı olumsuz etkiler.
Öte yandan semantik etiketler ve schema markup kullanımı sayfa otoritesini güçlendirir. W3C standartlarına uyum, güvenilirlik sinyali olarak algılanır. Özetle, tüm bu faktörler bir araya geldiğinde sıralamada yükselirsiniz.
HTML Meta Etiketleri: Title, Description ve Viewport Optimizasyonu
Meta etiketleri, arama sonuçlarında görünen bilgileri belirler. Title etiketi sayfanın başlığını, description ise kısa açıklamasını içerir. Her ikisi de tıklama oranını doğrudan etkiler.
- Title: 50-60 karakter arası olmalı. Ana anahtar kelimeyi başta içermeli.
- Meta Description: 150-160 karakter arası ideal. Harekete geçirici ifadeler kullanın.
- Viewport: Mobil uyumluluk için zorunludur. width=device-width değeri vermelisiniz.
- Charset: UTF-8 kullanın. Türkçe karakter sorunlarını önler.
- Robots: Arama motoru botuna yönergeler verir. Yani index ve follow değerlerini sıkça kullanırız.
- Canonical: Yinelenen içerik sorununu çözer.
Schema Markup ve Open Graph: Zengin Sonuçlar Elde Etme
Schema markup, arama sonuçlarında zengin snippet’ler elde etmenizi sağlar. Ürün fiyatı, yıldız derecelendirmesi veya etkinlik tarihi gibi bilgiler doğrudan arama sonucunda görünür. Bu da tıklama oranını ciddi ölçüde artırır.
Open Graph ve Twitter Kartları ise sosyal medya paylaşımlarında önizleme görüntüsü oluşturur. Bir blog yazısı paylaştığınızda başlık, açıklama ve görselin düzgün görünmesini bu etiketler sağlar.
Schema markup eklemek için aşağıdaki adımları izleyin: İlk olarak schema.org’dan uygun türü seçin. Ardından JSON-LD formatında yapılandırılmış veriyi head bölümüne ekleyin. Son olarak Google Rich Results Test aracıyla doğrulama yapın.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Makale Başlığı",
"author": {"@type": "Person", "name": "Yazar Adı"},
"datePublished": "2026-01-15"
}
</script>HTML Güvenliği: XSS ve Yaygın Tehditlere Karşı Önlemler
Web güvenliği her geliştiricinin bilmesi gereken kritik bir konudur. İşaretleme dili kaynaklı güvenlik açıkları, kullanıcı verilerini tehlikeye atabilir. Özellikle XSS saldırıları en yaygın tehditlerden biridir.
Kullanıcıdan alınan verileri doğrudan sayfaya basmak büyük bir hatadır. Kötü niyetli kullanıcılar script etiketleri enjekte ederek oturum bilgilerini çalabilir. Bu nedenle input doğrulaması ve çıktı kodlaması şarttır.
Bunun yanı sıra form elemanlarında CSRF token ve SQL enjeksiyonu önlemleri alırsınız. Üstelik SSL sertifikasıyla güvenliğe yeni katmanlar eklersiniz. KVKK ve GDPR gibi yasal düzenlemeler de kullanıcı gizliliğini korumayı zorunlu kılar.
XSS (Cross-Site Scripting) Nedir? HTML’de Nasıl Önlenir?
XSS, saldırganın sayfaya zararlı kod enjekte ettiği bir güvenlik açığıdır. Üç türü vardır: Stored XSS, Reflected XSS ve DOM-based XSS. Her biri farklı yöntemlerle çalışır, ancak sonuçları benzerdir.
Bu saldırıyı önlemek için şu yöntemleri uygulamalısınız: İlk olarak kullanıcı girdilerini asla güvenilir kabul etmeyin. Tüm özel karakterleri HTML entity’lerine dönüştürün. İkinci olarak Content Security Policy başlığını kullanın.
Üçüncü olarak HttpOnly ve Secure cookie bayraklarını aktif edin. Dördüncü olarak innerHTML yerine textContent kullanın. Beşinci olarak güvenlik tarayıcılarıyla düzenli test yapın. Bu önlemler sitenizi ciddi ölçüde korur.
Hata Ayıklama ve Validasyon: Kodunuzu Test Etmenin 5 Yolu
Hata ayıklama, geliştirme sürecinin doğal bir parçasıdır. En deneyimli geliştiriciler bile hata yapar. Önemli olan bu hataları hızlıca bulup düzeltebilmektir.
Kod doğrulama araçları bu noktada hayat kurtarıcıdır. W3C Validator, açılış-kapanış etiketi hatalarını, yanlış iç içe geçmiş yapıları ve eksik nitelikleri tespit eder. Geliştirici araçları konsolu ise JavaScript hatalarını anlık gösterir.
Ben her projede düzenli olarak Lighthouse denetimi yaparım. Performans, erişilebilirlik, en iyi uygulamalar ve SEO olmak üzere dört kategoride puan verir. Bu sayede iyileştirme alanlarını net görürüm.
En Sık Yapılan 10 HTML Hatası ve Çözümleri
Yıllardır sayısız projede karşılaştığım en yaygın hataları sizin için listeledim:
- Kapanış etiketini unutmak: Her açılış etiketine karşılık kapanışı yazın. Özellikle div iç içe yapılarda bu hatayı sık görürüm.
- Yanlış iç içe yerleştirme: Son açılan etiket ilk kapanmalıdır. Blok eleman içinde satır içi eleman kullanımına dikkat edin.
- Alt metni (alt attribute) eklememek: Tüm img etiketlerine mutlaka alt metni ekleyin. Aslında erişilebilirlik için zorunludur.
- DOCTYPE bildirimini unutmak: Sayfanın en üstünde mutlaka bulunmalıdır. Aksi halde tarayıcı uyumluluğu sorunları yaşarsınız.
- ID tekrarı: Aynı ID’yi birden fazla elemente vermek büyük hatadır. Kısacası ID benzersiz olmalıdır.
- Özel karakterleri kodlamamak: &, <, > gibi karakterleri entity olarak yazın.
- Charset tanımını unutmak: UTF-8 kullanmazsanız Türkçe karakterler bozulur.
- Inline stil kullanımı: Mümkün olduğunca harici CSS dosyası kullanın.
- Semantik etiket yerine div kullanmak: Anlam taşıyan etiketleri tercih edin.
- Form elemanlarında label eksikliği: Her input için label tanımlayın.
Hipermetin İşaretleme Dili İçin Otoriter Kaynaklar
Bu konuda daha derin bilgi edinmek isterseniz aşağıdaki otoriter kaynakları incelemenizi öneririm:
- MDN Web Docs — Dokümantasyonu: Mozilla’nın resmi dokümantasyonu, her seviyeden geliştirici için eşsiz bir referans kaynağıdır. W3C standartlarıyla tam uyumlu, güncel ve kapsamlı içerik sunar.
- Web.dev Kursu, Google’ın resmi platformunda yer alır. Yeni başlayanlar için sıfırdan başlayan kapsamlı bir rehber sunar. Semantik yapıyı ve erişilebilirlik standartlarını interaktif örneklerle öğretir.
- WHATWG Living Standard: Tarayıcı üreticilerinin oluşturduğu canlı standart dokümanıdır. Günlük güncellenir ve en yeni özellikleri içerir.
Web’in Temel Taşı Hakkında En Çok Merak Edilenler
HTML, SEO için nasıl yazılır?
Web’in beşinci sürümü hangi yenilikleri getirdi?
Sadece işaretleme dili ile mobil uyumlu site yapılır mı?
Kod yazmaya başlamak için en iyi ücretsiz editörler hangileri?
Semantik HTML nedir, ne işe yarar?
Bir web sayfası internette nasıl yayınlanır?
Kaynak kod hataları nasıl bulunur ve düzeltilir?
Bir sitenin arka plan kodu nasıl görüntülenir?
Blog yazarları işaretleme dilini nasıl kullanmalı?
En çok kullanılan temel etiketler nelerdir?
Sonuç: HTML Öğrenmeye Bugün Başlayın
Bu rehberde işaretleme dilinin temellerinden 2026’nın en güncel konularına kadar her şeyi ele aldık. Gördüğünüz gibi bu teknoloji modası geçmiş değil, aksine her geçen gün daha da önem kazanıyor.
Yapay zeka, kod yazma sürecini kolaylaştırsa da temel bilgiye sahip olmak sizi farklı kılar. İş görüşmelerinde, teknik mülakatlarda ve gerçek projelerde bu farkı hissedeceksiniz. Bugün başlayın, yarın çok geç olabilir.
Öğrenme yolculuğunuzda size yardımcı olacak birçok ücretsiz kaynak var. VS Code’u indirin, ilk sayfanızı oluşturun ve pratik yapmaya başlayın. Unutmayın, her uzman bir zamanlar yeni başlayandı. Ben de buradayım, sorularınızı bekliyorum.
İlk yorumu sen paylaş