HTML Nedir, Ne İşe Yarar?

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının içeriğini ve yapısal düzenini tanımlamak için kullanılan standart hiper metin işaretleme dilidir. Türkçe karşılığı Hiper Metin İşaretleme Dili olan HTML; metin, başlık, paragraf, bağlantı, görsel, tablo, liste ve form gibi içeriklerin tarayıcılar tarafından anlaşılmasını sağlar.

HTML, bir programlama dili değildir. Çünkü kendi başına koşul, döngü veya algoritma gibi programlama işlemlerini gerçekleştirmez. Bunun yerine, web sayfasındaki içeriklerin ne anlama geldiğini ve nasıl yapılandırıldığını tanımlar. Görsel tasarım ve sayfa düzeni CSS ile, etkileşimli işlevler ise çoğunlukla JavaScript ile geliştirilir.

HTML'nin Tarihsel Gelişimi

HTML'nin gelişimi, internet üzerinden bilimsel belgelerin paylaşılmasını kolaylaştırmak amacıyla başlatılan World Wide Web projesine dayanır. Bu süreçte öne çıkan gelişmeler şöyledir:

1989: CERN'de görev yapan Tim Berners-Lee, farklı bilgisayarlardaki belgelerin bağlantılar aracılığıyla paylaşılmasını sağlayacak World Wide Web fikrini ortaya koydu.
1990: İlk web sunucusu ve web tarayıcısının geliştirilmesiyle World Wide Web'in temel altyapısı oluşturuldu. HTML'nin ilk yapısal unsurları da bu dönemde şekillendi.
1991: HTML etiketlerini açıklayan ilk genel tanıtım yayımlandı. Web sayfalarının başlık, paragraf ve bağlantılarla yapılandırılması mümkün hale geldi.
1995: HTML 2.0 standardı yayımlandı. Formlar ve kullanıcıdan veri alınmasını sağlayan temel özellikler standart kapsamına alındı.
1997: HTML 3.2 standardı yayımlandı. Tablolar, komut dosyaları ve dönemin tarayıcılarında kullanılan çeşitli özellikler standartlaştırıldı.
1997–1999: HTML 4.0 ve HTML 4.01 standartlarıyla yapısal işaretleme, stil sayfaları, betik dilleri ve erişilebilirlik konularında önemli gelişmeler sağlandı.
2014: HTML5, W3C tarafından önerilen standart olarak yayımlandı. Ses, video, semantik etiketler, gelişmiş formlar ve web uygulamalarına yönelik özellikler yaygınlaştı.
Günümüz: HTML, WHATWG tarafından sürekli güncellenen Living Standard (Yaşayan Standart) yaklaşımıyla geliştirilmektedir. Bu nedenle HTML5, güncel HTML teknolojisini tanımlamak için yaygın kullanılan bir ifade olsa da artık birbirinden bağımsız, numaralandırılmış sürümler yaklaşımı esas alınmamaktadır.

HTML Ne İşe Yarar?

HTML'nin temel görevi, web sayfalarının içerik ve belge yapısını oluşturmaktır. Tarayıcılar HTML kodlarını analiz ederek metinleri, görselleri, bağlantıları, tabloları ve formları kullanıcıların görüntüleyebileceği bir sayfaya dönüştürür.

HTML ile başlıklar, paragraflar, listeler, tablolar, görseller, videolar, bağlantılar ve kullanıcı giriş formları oluşturulabilir. Ayrıca header, nav, main, article, section ve footer gibi semantik etiketlerle sayfanın bölümleri anlamlı biçimde tanımlanabilir.

HTML tek başına bir web sitesinin bütün işlevlerini yerine getirmez. Modern web projelerinde HTML; CSS, JavaScript, sunucu tarafı yazılımları, veritabanları ve API'lerle birlikte çalışır. Örneğin bir e-ticaret sitesinde ürün bilgilerinin sayfada gösterilmesi HTML ile yapılandırılırken, görsel düzen CSS ile hazırlanır; sepet işlemleri JavaScript ve sunucu tarafındaki uygulamalarla yürütülür.

HTML, CSS ve JavaScript Arasındaki Farklar

Modern web geliştirme sürecinde bu üç teknoloji birbirini tamamlayan farklı görevler üstlenir:

HTML: Web sayfasının içeriğini, yapısını ve semantik anlamını tanımlar.
CSS: Renk, yazı tipi, boşluk, hizalama, animasyon ve responsive tasarım gibi görsel özellikleri düzenler.
JavaScript: Kullanıcı etkileşimlerini, dinamik içerik güncellemelerini, veri işlemlerini ve uygulama davranışlarını yönetir.

Bu teknolojilerin birlikte kullanılması, farklı ekran boyutlarına uyum sağlayan, erişilebilir ve etkileşimli web sitelerinin geliştirilmesini mümkün kılar.

HTML İşaretleme Dilinin Genel Özellikleri

HTML, web sayfalarında içeriğin anlamlı ve düzenli bir yapıda sunulmasını sağlayan etiketlerden oluşur. Başlıca kullanım alanları şunlardır:

Başlık ve paragraf yapılarının oluşturulması
Sıralı ve sırasız listelerin hazırlanması
Tablo ve veri listelerinin tanımlanması
Görsel, ses ve video içeriklerinin sayfaya eklenmesi
Sayfalar ve harici kaynaklar arasında bağlantı kurulması
Kullanıcı verilerinin alınması için formların oluşturulması
Sayfa bölümlerinin semantik etiketlerle tanımlanması
Tarayıcıların ve yardımcı teknolojilerin içeriği daha doğru yorumlamasının sağlanması

HTML etiketleri çoğunlukla bir açılış ve bir kapanış etiketinden oluşur. Etiketler arasındaki içerik, ilgili elementin gövdesini meydana getirir. Bazı elementler ise görsellerde kullanılan img veya satır sonlarında kullanılan br gibi kapanış etiketi gerektirmeyen yapılara sahiptir.

HTML elementleri, ek bilgiler tanımlamak için niteliklerden (attributes) yararlanır. Örneğin href bağlantının hedefini, src görselin veya başka bir kaynağın adresini, alt ise görselin metinsel açıklamasını belirtir. Tasarım özelliklerinin doğrudan HTML etiketleriyle tanımlanması yerine, günümüzde çoğunlukla CSS kullanılır.

Semantik HTML Nedir?

Semantik HTML, sayfa içeriğini yalnızca görsel olarak biçimlendirmek yerine, her bölümün görevini ve anlamını belirten HTML elementleriyle yapılandırma yaklaşımıdır. Örneğin ana içerik için main, gezinme bağlantıları için nav, bağımsız içerikler için article ve sayfa alt bilgileri için footer kullanılır.

Semantik HTML; ekran okuyucu gibi yardımcı teknolojilerin içeriği daha doğru yorumlamasına, arama motorlarının sayfa yapısını anlamasına ve kodun sürdürülebilir olmasına katkı sağlar. Bununla birlikte semantik etiket kullanımı tek başına arama motorlarında üst sıralama garantisi vermez; içerik kalitesi, teknik SEO, erişilebilirlik ve kullanıcı deneyimi birlikte değerlendirilmelidir.

HTML Dosyası Nasıl Açılır ve Tarayıcıda Nasıl Görüntülenir?

HTML dosyaları genellikle .html veya eski projelerde karşılaşılabilen .htm uzantısıyla kaydedilir. Bir HTML dosyasını görüntülemek için Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari veya Opera gibi güncel bir web tarayıcısı kullanılabilir. Dosya bilgisayarda yerel olarak açılabileceği gibi bir web sunucusu üzerinden de yayınlanabilir.

Bir kullanıcı tarayıcının adres çubuğuna web sitesi adresini girdiğinde tarayıcı öncelikle alan adının IP adresini belirler ve gerekli bağlantıyı kurar. Ardından sunucuya HTTP veya HTTPS üzerinden istek gönderir. Sunucu, isteğe uygun yanıtı ve HTML belgesini tarayıcıya iletir. İletişimin ayrıntıları; istek yöntemi, başlıklar, durum kodu ve yanıt gövdesi gibi HTTP bileşenlerine bağlıdır.

Tarayıcı HTML belgesini ayrıştırarak DOM (Document Object Model) adı verilen belge nesne modelini oluşturur. CSS dosyaları da analiz edilerek sayfanın görsel düzeni hazırlanır. JavaScript kodları ise sayfanın davranışlarını ve dinamik işlemlerini yönetebilir. Tarayıcı bu aşamaların sonucunda sayfayı ekranda görüntüler.

HTML belgesinin başında bulunan <!DOCTYPE html> bildirimi, tarayıcıya belgenin modern HTML kurallarıyla uyumlu biçimde işlenmesi gerektiğini belirtir. Bu bildirim tek başına HTML sürümünü belirleyen bir etiket değildir.

Temel Bir HTML Belgesinin Yapısı

Standart bir HTML belgesi, tarayıcının belgeyi doğru yorumlayabilmesi için belirli temel elementlerden oluşur. Aşağıdaki örnek, basit bir HTML5 belge yapısını göstermektedir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
    <meta name="description" content="Örnek HTML web sayfası.">
</head>
<body>
    <header>
        <h1>Merhaba Dünya</h1>
    </header>

    <main>
        <p>Bu benim ilk HTML web sayfam.</p>
        <a href="https://www.birnc.com.tr/">birNC web sitesini ziyaret edin.</a>
    </main>
</body>
</html>

Örnekteki html elementi belgenin tamamını, head bölümü belgeye ilişkin teknik bilgileri, body bölümü ise kullanıcıya gösterilen içeriği kapsar. title sayfanın başlığını, meta etiketleri karakter kodlaması ve görüntü alanı gibi bilgileri tanımlar. lang="tr" niteliği belgenin dilini belirtir.

En Çok Kullanılan HTML Görüntüleyici Tarayıcılar

HTML belgeleri, güncel web standartlarını destekleyen modern tarayıcılarda görüntülenebilir. Yaygın kullanılan tarayıcılar şunlardır:

Google Chrome: Chromium tabanlı, geliştirici araçları ve geniş eklenti desteği bulunan web tarayıcısıdır.
Microsoft Edge: Chromium altyapısıyla çalışan, Microsoft tarafından geliştirilen web tarayıcısıdır.
Mozilla Firefox: Açık kaynak yaklaşımı ve geliştirici araçlarıyla öne çıkan web tarayıcısıdır.
Apple Safari: Apple cihazlarında kullanılan ve WebKit altyapısından yararlanan tarayıcıdır.
Opera: Chromium tabanlı, ek kullanım özellikleri sunan web tarayıcısıdır.

Internet Explorer artık güncel web geliştirme için desteklenen bir tarayıcı olarak değerlendirilmemelidir. Yeni web projeleri, güncel tarayıcıların standart desteği ve hedef kullanıcı kitlesinin cihazları dikkate alınarak test edilmelidir.

HTML Nasıl Oluşturulur?

HTML oluşturmak için özel bir yazılım satın almak zorunlu değildir. HTML dosyaları herhangi bir düz metin düzenleyicisiyle hazırlanabilir. Ancak sözdizimi renklendirme, otomatik tamamlama, hata tespiti, dosya yönetimi ve yapay zeka destekli kod önerileri sunan geliştirme editörleri çalışma sürecini kolaylaştırır.

Güncel HTML Editörleri ve Geliştirme Araçları

Visual Studio Code: Ücretsiz, genişletilebilir bir kaynak kodu editörüdür. HTML, CSS, JavaScript ve çok sayıda programlama dili için sözdizimi desteği, eklentiler, hata ayıklama ve Git entegrasyonu sunar. Yapay zeka destekli kod önerileri ve ajan özellikleriyle proje dosyalarını analiz etme, kod düzenleme ve test süreçlerini de destekleyebilir. Visual Studio Code
WebStorm: Özellikle JavaScript ve TypeScript tabanlı web projeleri için geliştirilmiş profesyonel IDE'dir. HTML, CSS, JavaScript, proje analizi ve hata ayıklama araçlarını bir arada sunar. WebStorm
Notepad++: Windows kullanıcıları için ücretsiz ve hafif bir metin düzenleyicisidir. HTML ve CSS gibi dillerde sözdizimi renklendirme ve temel kod düzenleme işlemlerini destekler. Notepad++
Sublime Text: Hızlı açılışı, sade arayüzü ve güçlü düzenleme özellikleriyle bilinen bir kod editörüdür. Ücretsiz değerlendirme sürümü bulunur; sürekli kullanım için lisans koşulları geçerlidir. Sublime Text
CodePen: HTML, CSS ve JavaScript kodlarını tarayıcı üzerinden yazıp anında görüntülemeye yarayan çevrim içi geliştirme ortamıdır. Küçük örnekler, arayüz denemeleri ve eğitim çalışmaları için kullanışlıdır. CodePen

Adobe Brackets, geçmişte web geliştirme için kullanılan açık kaynak kodlu editörlerden biriydi. Ancak Adobe'nin desteği 2021 yılında sona erdi ve resmi GitHub deposu arşivlendi. Bu nedenle yeni projelerde güncel olarak geliştirilen editörlerin tercih edilmesi daha uygundur.

Yapay Zeka ile HTML Kodlama

Yapay zeka destekli geliştirme araçları, HTML yazma ve web arayüzü oluşturma süreçlerini önemli ölçüde hızlandırmaktadır. Geliştiriciler doğal dilde hazırladıkları komutlarla sayfa iskeleti oluşturabilir, mevcut HTML kodlarını açıklatabilir, erişilebilirlik iyileştirmeleri isteyebilir ve CSS ile JavaScript entegrasyonuna yönelik öneriler alabilir.

Visual Studio Code gibi editörlerde kullanılan yapay zeka asistanları, yalnızca kod tamamlama yapmakla sınırlı kalmayabilir. Geliştirme ajanları proje dosyalarını inceleyebilir, birden fazla dosyada değişiklik yapabilir, terminal komutları çalıştırabilir ve test süreçlerine yardımcı olabilir. Bu özelliklerin kullanılabilirliği seçilen modele, aboneliğe ve editör yapılandırmasına göre değişebilir.

Yapay zeka ile HTML geliştirmede öne çıkan kullanım alanları şunlardır:

Doğal dil komutlarıyla HTML sayfa iskeleti ve bileşen oluşturma
Mevcut HTML kodlarını açıklama, düzenleme ve sadeleştirme
Semantik etiket ve erişilebilirlik iyileştirmeleri önerme
Form, tablo, menü ve responsive arayüz kodları hazırlama
HTML, CSS ve JavaScript arasındaki bağlantıları kurmaya yardımcı olma
Tekrarlanan kodları tespit etme ve bileşenleri yeniden düzenleme
Hata ayıklama, test senaryoları ve teknik dokümantasyon hazırlama

Yapay zeka tarafından oluşturulan kodlar doğrudan yayına alınmamalıdır. Kodun doğruluğu, güvenliği, tarayıcı uyumluluğu, erişilebilirliği, performansı ve mobil cihazlardaki davranışı geliştirici tarafından kontrol edilmelidir. Özellikle form verileri, kullanıcı girdileri ve harici kaynaklarla çalışan bölümlerde güvenlik kontrolleri ihmal edilmemelidir.

HTML Sayfası Oluşturma Adımları

Visual Studio Code üzerinden ilk HTML sayfanızı oluşturmak için aşağıdaki adımları izleyebilirsiniz:

Visual Studio Code resmi web sitesini ziyaret ederek işletim sisteminize uygun sürümü indirin ve bilgisayarınıza kurun.
Bilgisayarınızda masaüstü veya belgeler klasörü gibi uygun bir konumda İlk Web Sitem isimli yeni bir klasör oluşturun.
Visual Studio Code uygulamasını açın ve Open Folder (Klasör Aç) seçeneğiyle oluşturduğunuz klasörü seçin.
Sol taraftaki dosya gezgininden yeni dosya oluşturun ve dosya adını index.html olarak belirleyin.
Dosyanın içerisine temel HTML belge yapısını yazın veya editörün sunduğu HTML başlangıç şablonundan yararlanın.
Dosyayı kaydedin ve tarayıcıda açarak sayfanın görüntüsünü kontrol edin.

Örnek olarak index.html dosyasının içerisine aşağıdaki kodu ekleyebilirsiniz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sitem</title>
</head>
<body>
    <h1>İlk Web Siteme Hoş Geldiniz</h1>
    <p>HTML öğrenmeye ilk adımımı attım.</p>
</body>
</html>

Dosyayı kaydettikten sonra üzerine çift tıklayarak varsayılan web tarayıcınızda açabilirsiniz. Alternatif olarak dosyaya sağ tıklayıp Birlikte Aç seçeneğiyle kullanmak istediğiniz tarayıcıyı belirleyebilirsiniz. Kodda değişiklik yaptığınızda tarayıcı sayfasını yenileyerek sonucu görüntüleyebilirsiniz.

HTML Kodları Nasıl Kontrol Edilir?

HTML belgesinin doğru yapılandırılması, farklı tarayıcılarda tutarlı görüntülenmesi ve erişilebilir olması için kodun kontrol edilmesi gerekir. Bu amaçla şu araçlardan yararlanılabilir:

W3C Nu HTML Checker: HTML kodundaki standartlara aykırı kullanımları ve olası işaretleme hatalarını tespit etmeye yardımcı olur. HTML doğrulama aracı
Chrome DevTools: HTML ve DOM yapısını inceleme, CSS düzenleme, JavaScript hatalarını izleme ve performans analizi yapma imkanı sunar.
Firefox Developer Tools: HTML, CSS, ağ istekleri, erişilebilirlik ve responsive tasarım kontrollerinde kullanılabilir.
Google Lighthouse: Performans, erişilebilirlik, en iyi uygulamalar ve SEO başlıklarında teknik değerlendirme yapılmasına yardımcı olur.

HTML Öğrenmek İçin Neler Bilinmelidir?

HTML öğrenmeye başlamak için ileri düzey programlama bilgisine ihtiyaç yoktur. Öncelikle element, etiket, nitelik, iç içe elementler ve belge yapısı gibi temel kavramların öğrenilmesi gerekir. Ardından bağlantılar, görseller, listeler, tablolar ve formlar üzerinde uygulama yapılabilir.

Profesyonel web geliştirme hedefleyenlerin HTML ile birlikte CSS ve JavaScript öğrenmesi, responsive tasarım, semantik işaretleme, erişilebilirlik, tarayıcı geliştirici araçları ve temel web güvenliği konularında da deneyim kazanması önemlidir. Sunucu taraflı uygulamalar geliştirmek isteyenler için PHP, Python, Node.js gibi teknolojiler ve veritabanı sistemleri de öğrenme sürecinin sonraki aşamalarını oluşturabilir.

Sıkça Sorulan Sorular

HTML programlama dili midir?

Hayır. HTML, web sayfalarının içeriğini ve yapısını tanımlayan bir işaretleme dilidir. Programlama dillerindeki koşul, döngü ve algoritma gibi işlemleri kendi başına gerçekleştirmez.

HTML öğrenmek ne kadar sürer?

HTML'nin temel etiketlerini ve belge yapısını öğrenmek genellikle kısa sürede mümkündür. Ancak erişilebilir, semantik, responsive ve büyük ölçekli web projelerine uygun kod yazabilmek için düzenli uygulama ve CSS ile JavaScript bilgisi gerekir.

HTML olmadan web sitesi yapılabilir mi?

Web tarayıcılarında görüntülenen standart web sayfalarının yapısı HTML ile tanımlanır. Bazı site oluşturucular ve yazılım altyapıları HTML kodunu otomatik üretse de tarayıcıya sunulan web içeriği HTML standardına göre işlenir.

HTML ve HTML5 arasında ne fark vardır?

HTML5, HTML'nin gelişiminde önemli bir standart aşamasını ifade eder. Günümüzde HTML, WHATWG tarafından sürekli güncellenen yaşayan standart olarak ele alınır. Bu nedenle HTML5 ifadesi modern HTML teknolojisini anlatmak için kullanılmaya devam etse de güncel yaklaşım tek bir numaralı sürüme bağlı değildir.

HTML SEO açısından neden önemlidir?

HTML, arama motorlarının sayfa içeriğini ve yapısını anlamasına yardımcı olur. Anlamlı başlıklar, semantik elementler, açıklayıcı bağlantılar, görseller için uygun alt metinler ve doğru sayfa dili; teknik SEO ve erişilebilirlik açısından önem taşır. Ancak yalnızca HTML etiketlerini doğru kullanmak arama sonuçlarında üst sıralama garantisi vermez.

Yapay zeka HTML kodu yazabilir mi?

Evet. Yapay zeka araçları HTML sayfaları ve bileşenleri oluşturabilir, mevcut kodları düzenleyebilir ve hata tespitine yardımcı olabilir. Bununla birlikte üretilen kodun güvenlik, erişilebilirlik, performans ve tarayıcı uyumluluğu açısından kontrol edilmesi gerekir.