Yazılarımız

OfisData

HTML NEDİR?

HTML5 turuncu shield yanında büyük navy soru işareti ve içinde küçük html etiketi olan navy çerçeve kompozisyonu beyaz arka planda

İnternet kullanıcıları günde ortalama 6-7 saatini web sayfalarında geçiriyor. Bu sayfaların görsel düzeni, başlıkları, butonları ve menüleri ne kadar farklı görünse de hepsinin altında aynı dil var: HTML. Dünyadaki her web sitesi, tarayıcıya ne göstereceğini HTML üzerinden anlatır.

HTML, "HyperText Markup Language" yani "köprülü metin işaretleme dili" demek. İsmindeki üç kelime aslında ne yaptığını özetliyor. "HyperText" çünkü sayfadaki metinler birbirine bağlanabilir (köprüleme). "Markup" çünkü her şeyi etiketlerle işaretler. "Language" çünkü tarayıcıların ortak anladığı kuralları olan bir sistemdir.

Bu yazıda HTML'in ne olduğunu, ne işe yaradığını, programlama dili olmamasının ne anlama geldiğini, web geliştirme ekosistemindeki yerini ve nasıl öğrenileceğini sırasıyla açıklıyoruz.

HTML tam olarak nedir?

HTML bir programlama dili değil, bir işaretleme dilidir. Bu fark çok önemli ve sık karıştırılır. Bir programlama dili (JavaScript, Python, Java gibi) hesaplama yapar, mantık kurar, karar verir. Bir işaretleme dili sadece "bu metin bir başlıktır", "bu bir paragraftır", "bu bir bağlantıdır" şeklinde içerik üzerine etiket koyar.

Tarayıcı bu etiketleri okuyarak sayfayı nasıl göstereceğine karar verir. Yani HTML "ne yapacağını" değil "ne olduğunu" söyler.

Bir HTML belgesinin basit hali

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya</h1>
  <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

Bu yedi satırlık kod, tarayıcıda büyük "Merhaba Dünya" başlığı ve altında bir paragraf olarak görünür. Tarayıcı <h1> etiketini görünce "büyük başlık" anlar; <p> görünce "paragraf" anlar. Etiketler sayesinde içerik anlam kazanır.

HTML ne işe yarar?

HTML üç temel iş yapar:

  1. Sayfa yapısını oluşturur. Hangi alanda başlık, hangi alanda paragraf, hangi alanda görsel olacağını belirler.
  2. İçeriği anlamlandırır. Bir metnin bağlantı, bir metnin başlık, bir metnin liste olduğunu işaretler. Bu anlam tarayıcıların, arama motorlarının ve ekran okuyucuların sayfayı doğru yorumlamasını sağlar.
  3. Diğer teknolojilere zemin hazırlar. CSS ile şekillenir, JavaScript ile etkileşim kazanır. HTML olmadan ne CSS bir şey boyayabilir, ne JavaScript bir şey çalıştırabilir.

HTML programlama dili değildir — bu ne anlama geliyor?

"HTML öğrendim, programcı oldum" cümlesi yanlıştır. HTML mantık işlemi yapmaz. Şu işleri yapamaz:

  • İki sayıyı toplayamaz
  • Koşullu karar veremez ("eğer kullanıcı giriş yaptıysa şunu göster")
  • Veriyi saklayamaz
  • Sunucuyla iletişim kuramaz
  • Sayfayı dinamik olarak değiştiremez

Bu işlerin hepsi JavaScript veya sunucu tarafı dillerine (PHP, Python, Node.js) düşer. HTML sadece yapı tarif eder; her etiketin görevini ve doğru kullanımını MDN web dokümantasyonu ayrıntılı anlatır. Bu nedenle HTML'i ezberlemekten çok mantığını anlamak önemlidir; mantık basittir, ezber gerektirmez.

HTML, CSS ve JavaScript: üçlü ekibin görevleri

Modern bir web sayfası üç katmandan oluşur. Her birinin görevi farklıdır ve tek başına yetmez.

HTML CSS JavaScript üç katmanlı diyagram her katman farklı renk teal coral amber etiketli STRUCTURE STYLE INTERACTION görev tanımıyla yan yana
KatmanGörevBenzetme
HTMLYapı kurarBir evin duvar ve odaları
CSSGörünüm verirBoya, mobilya, perde
JavaScriptEtkileşim sağlarElektrik, ışık düğmesi, asansör

Sadece HTML ile yazılmış bir sayfa duvarları olan ama boyasız ve elektriksiz bir ev gibidir. CSS olmadan sayfa görsel olarak çekici değildir; JavaScript olmadan tıklamalara tepki vermez. Profesyonel siteler üçünü dengeli kullanır.

HTML'in tarihi ve sürümleri

HTML 1991'de Tim Berners-Lee tarafından CERN'de geliştirildi. Amacı bilim insanlarının belgeleri internet üzerinden paylaşmasıydı. Sonraki yıllarda büyük değişiklikler yaşandı:

  • HTML 1.0 (1993): İlk halk sürümü. Temel etiketler vardı, ama görsel ve form yoktu
  • HTML 2.0 (1995): Form etiketleri eklendi
  • HTML 3.2 (1997): Tablo, script desteği geldi
  • HTML 4.01 (1999): Stil dosyaları (CSS) destekledi, semantik ayrım başladı
  • XHTML (2000-2008): Daha katı kurallı bir geçiş sürümü; uzun ömürlü olmadı
  • HTML5 (2014): Bugün hâlâ kullanılan standart. Semantik etiketler, video/audio, canvas, geliştirilmiş formlar

Bugün tüm modern siteler HTML5 kullanır. Yeni bir sürüm planı yoktur; HTML5 "yaşayan standart" (living standard) olarak güncellenmektedir.

HTML nasıl çalışır?

Bir HTML sayfasının tarayıcıda nasıl göründüğünü anlamak için arka planda olanlara bakmak gerekir:

  1. Kullanıcı tarayıcıya bir URL yazar
  2. Tarayıcı bu URL'in sunucusuna istek gönderir
  3. Sunucu o sayfanın HTML dosyasını tarayıcıya geri yollar
  4. Tarayıcı HTML'i yukarıdan aşağıya okur
  5. Etiketleri görerek DOM (Document Object Model) adında bir ağaç yapı oluşturur
  6. Varsa CSS dosyalarını çeker, stilleri uygular
  7. Varsa JavaScript dosyalarını çalıştırır
  8. Sonuç olarak ekrana sayfa çizilir

Bu süreç saliseler içinde gerçekleşir. Sayfa "yavaş" hissi verdiğinde genelde sorun bu sekiz adımdan birindedir; teknik SEO ve performans optimizasyonu bu adımları hızlandırmaya odaklanır.

HTML nerelerde kullanılır?

Sadece web siteleri değil, beklediğinizden çok daha fazla yerde HTML çalışır:

  • Web siteleri: Her web sitesi HTML üzerine kuruludur
  • E-posta tasarımları: Outlook ve Gmail içindeki kampanya e-postaları HTML ile yazılır
  • Mobil hibrit uygulamalar: React Native ve Ionic gibi araçlar HTML benzeri yapı kullanır
  • Masaüstü uygulamalar: VS Code, Slack, Discord gibi popüler programlar HTML+CSS+JavaScript tabanlıdır (Electron framework'ü)
  • PDF üretimi: Birçok PDF oluşturma aracı HTML üzerinden çalışır
  • E-kitap formatları: EPUB dosyaları HTML temellidir

Bu yaygınlık HTML bilmenin neden temel beceri olduğunu açıklar. Bir geliştirici hangi alanda çalışırsa çalışsın, kariyerinin bir noktasında HTML ile karşılaşır.

HTML öğrenmeye nasıl başlamalı?

HTML öğrenmenin üç ana adımı vardır:

1. İlk hafta: temel etiketleri tanıma

Başlık etiketleri (h1-h6), paragraf (p), bağlantı (a), görsel (img), liste (ul/ol/li) ve sayfa iskeleti (doctype, html, head, body). Bu altı grup günlük kullanımın yüzde 80'ini karşılar. Hangi etiketin tüm HTML kodlarını içerdiğini görmek için HTML kodları ve anlamları rehberi başvuru kaynağıdır.

2. İkinci hafta: tablo, form ve semantik etiketler

Tablo etiketleri (table, tr, th, td), form etiketleri (form, input, label, button) ve semantik etiketler (header, nav, main, section, footer). Buraya kadar geldiğinizde kendi başınıza basit bir blog sayfası yazabilirsiniz.

3. Üçüncü hafta ve sonrası: CSS ile birlikte

Tek başına HTML, boya almamış bir ev gibidir. Üçüncü haftadan itibaren CSS öğrenmeye başlayın. HTML yapıyı kurarken CSS renk, font, boşluk ve düzen ekler. İkisi paralel öğrenildiğinde sayfayı görsel olarak şekillendirme deneyimi çok daha akıcı olur.

Browser rendering süreç akış diyagramı URL request DNS HTML response parse DOM tree CSS apply paint sekiz aşama numaralı kutular ok ile bağlı

HTML öğrenmenin pratik ipuçları

  • Sadece okuma, yaz. Etiketleri kitaptan değil, gerçek bir dosyada yazarak öğrenirsiniz
  • Tarayıcıyı sürekli açık tut. Her değişikliği F5 ile gör; geri bildirim öğrenmeyi hızlandırır
  • Devtools (F12) ile incele. Sevdiğin sitelerin koduna bak; nasıl yapıldığını gör
  • Mükemmel sayfa peşinde koşma. İlk projelerin çirkin olması normal. Önemli olan tamamlanmış proje sayısı
  • MDN dokümantasyonunu kullan. Mozilla'nın MDN sitesi HTML'in resmi referansıdır

Kendi başına ilerlemek zorlanıyorsa kapsamlı bir HTML eğitimi programı temel etiketleri, semantik yapıyı ve erişilebilirlik kurallarını sıralı şekilde aktarır; sonrasında CSS ve JavaScript ile devam etmek doğal akıştır.

Toparlarsak

HTML, web'in ortak dilidir. Programlama dili olmasa da web sayfası üretmenin başlangıç noktasıdır. Bir sayfanın yapısını kurar, içeriği anlamlandırır ve CSS ile JavaScript'in çalışacağı zemini hazırlar. Temel etiketleri öğrenmek bir hafta, akıcı yazabilmek bir ay, profesyonel düzeyde semantik ve erişilebilir kod üretmek 2-3 ay alır. Web geliştirme kariyerine başlamak isteyen herkes için HTML, hiç tartışmasız ilk durak olmalıdır.

 Vimaj