Makale Başlıkları
Kısaca
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan bir işaretleme dilidir – programlama dili değildir. 1991’de Tim Berners-Lee tarafından ortaya çıkan HTML, etiketler (tag) aracılığıyla bir tarayıcıya metnin, görselin, bağlantının ve bölümlerin nerede ve nasıl yer alacağını söyler. Bugün geçerli sürüm, sürekli güncellenen HTML Living Standard (yaygın adıyla HTML5) olup tüm modern tarayıcılar tarafından desteklenir.
- HTML içeriğin yapısını tanımlar; görünümü CSS, davranışı ise JavaScript ile sağlanır.
- Her sayfa
<!DOCTYPE html>ile başlar; iskelet<html>,<head>ve<body>etiketlerinden oluşur. - En çok kullanılan etiketler başlıklar (
h1-h6), paragraf (p), bağlantı (a), görsel (img) veheader / nav / main / footergibi anlamsal (semantic) etiketlerdir.
HTML Nedir? Kısaca açıklayalım: HTML, 1991 yılında Tim Berners-Lee tarafından World Wide Web ile birlikte ortaya çıkan ve günümüzde World Wide Web Consortium (W3C) ile WHATWG tarafından geliştirilen bir metin işaretleme dilidir. Sanılanın aksine HTML bir programlama dili değildir; çünkü tek başına koşullar, döngüler ve hesaplama yapan çalışabilir bir program üretemez. HTML’nin görevi, bir web sayfasının içeriğini tarayıcıya tanımlamak – yani “burada bir başlık var, burada bir paragraf, burada bir görsel” demek – tir. İnternette gördüğünüz hemen her sayfanın altında, gözle görünmeyen bir HTML iskeleti çalışır.
HTML Ne İşe Yarar?
HTML, bir web sitesine fotoğraf, video, ses, tablo ve form gibi öğeleri entegre etmenizi sağlar. Daha önemlisi, sayfanın mantıksal yapısını kurar: hangi metnin ana başlık, hangisinin alt başlık, hangi blogun navigasyon menüsü olduğunu belirler. Arama motorları (Google, Bing) ve ekran okuyucular bu yapıyı okuyarak sayfayı anlamlandırır; dolayısıyla iyi yazılmış HTML, hem erişilebilirlik hem de SEO açısından kritik önem taşır.
Bir web projesinin “üç katı”nı şöyle düşünebilirsiniz: HTML iskelettir (içeriğin yapısı), CSS derisidir (renk, yazı tipi, düzen), JavaScript ise kaslarıdır (tıklama, animasyon, etkileşim). Bu üçlü birlikte çalıştığında, statik bir metin dosyası modern bir web sitesine dönüşür. Bu nedenle “HTML ile site yapılır mı?” sorusunun yanıtı evettir, ancak akıcı ve dinamik bir deneyim için CSS ve JavaScript de devreye girer.
HTML Sayfasının Temel İskeleti
Her geçerli HTML5 belgesi aynı temel yapıyla başlar. Aşağıdaki örnek, çalışabilen en küçük HTML sayfasını gösterir:
<!DOCTYPE html>– Belgenin HTML5 olarak yorumlanacağını söyler. Her zaman ilk satırda yer alır.<html lang="tr">– Tüm belgeyi saran kök etiket.langözelliği sayfanın dilini belirtir (Türkçe içintr).<head>– Sayfanın “kimlik kartı”. Başlık, karakter kodlaması (charset), meta açıklama, CSS bağlantıları burada yer alır; bu bölüm ekranda görünmez.<body>– Ziyaretçinin gördüğü her şey burada: başlıklar, paragraflar, görseller, bağlantılar.
Pratikteki görünümü şöyledir:
<!DOCTYPE html><html lang="tr">-
<head> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1"> -
<title>Sayfa Başlığı</title> -
</head> -
<body> -
<h1>Merhaba Dünya</h1> -
<p>İlk HTML sayfam.</p> -
</body> </html>
Bu dosyayı not defteri ile yazıp .html uzantısıyla kaydedip çift tıkladığınızda, tarayıcınız onu bir web sayfası olarak açar. HTML öğrenmeye başlamak için gerçekten de ek bir program kurmanız gerekmez; ileride Visual Studio Code veya Sublime Text gibi modern kod editörleri işinizi kolaylaştırır (Dreamweaver gibi eski araçlar artık önerilmez).
En Çok Kullanılan HTML Kodları (Etiketleri)
HTML’de yüzlerce etiket bulunsa da, günlük işlerin büyük kısmı 20-25 etiketle yapılır. Aşağıdaki tablo, en sık kullanılan HTML kodlarını kategori, görev ve örnek olarak özetler. Bu tabloyu bir hızlı başvuru olarak kullanabilirsiniz.
| Etiket | Görevi | Örnek Kullanım |
|---|---|---|
| <h1> … <h6> | Başlıklar; h1 en önemli, h6 en az önemli. Sayfa başına genellikle tek h1 olur. | <h1>Ana Başlık</h1> |
| <p> | Paragraf; metin blokları için. | <p>Bir paragraf.</p> |
| <a> | Bağlantı (link) verir; href özelliğiyle hedef adres belirtilir. |
<a href="https://www.alastyr.com">Tıkla</a> |
| <img> | Görsel ekler; src kaynak, alt ise metin alternatifidir (SEO ve erişilebilirlik için şart). |
<img src="resim.jpg" alt="Açıklama"> |
| <ul> / <ol> / <li> | Sırasız (madde) ve sıralı (numaralı) listeler; li her bir öge. |
<ul><li>Öge</li></ul> |
| <div> | Genel amaçlı bölüm/kapsayıcı; CSS ile düzen kurmada kullanılır. | <div class="kutu">...</div> |
| <span> | Satır içi (inline) kapsayıcı; metnin küçük bir parçasını hedefler. | <span>metin</span> |
| <strong> / <em> | Önemli (kalın) ve vurgulu (italik) metin; anlamsal vurgu katar. | <strong>önemli</strong> |
| <br> / <hr> | Satır atlama ve yatay ayraç çizgisi. Kapanış etiketi gerektirmezler. | Satir1<br>Satir2 |
| <table> / <tr> / <td> | Tablo, satır ve hücre oluşturur. | <table><tr><td>1</td></tr></table> |
| <form> / <input> / <button> | Form, veri giriş alanı ve buton; iletişim/üyelik formları için. | <input type="email"> |
Başlık Etiketleri (h1-h6) ve SEO
Başlık etiketleri, içeriğinizi hem okuyucular hem de Google botları için okunabilir parçalara böler. Mantık bir kitabın içindekiler listesi gibidir: <h1> kitabın adı, <h2> bölüm başlıkları, <h3> alt başlıklardır. SEO açısından altın kural, her sayfada yalnızca bir tane h1 kullanmak ve hiyerarşiyi atlamadan ilerlemektir (h2’den sonra h4’e atlamak yerine h3 kullanmak).
<h1>Birinci başlık</h1><h2>İkinci başlık</h2><h3>Üçüncü başlık</h3><h4>Dördüncü başlık</h4><h5>Beşinci başlık</h5><h6>Altıncı başlık</h6>
Anlamsal (Semantic) HTML5 Etiketleri
HTML5 ile gelen en önemli yenilik, sayfayı anlamlı bölümlere ayıran semantic (anlamsal) etiketlerdir. Eskiden her şey <div> ile yapılırken, artık her bölümün ne işe yaradığını ismiyle belli eden etiketler kullanılır. Bu etiketler, ekran okuyucular ve arama motorları için sayfanın haritasını çıkarır; modern ve SEO dostu siteler bu yapıyı tercih eder.
| Anlamsal Etiket | Ne İşe Yarar? |
|---|---|
| <header> | Sayfanın veya bir bölümün üst kısmı; logo, başlık ve giriş öğeleri. |
| <nav> | Navigasyon menüsü; ana bağlantıların grubu. |
| <main> | Sayfanın benzersiz ana içeriği. Bir sayfada yalnızca bir tane bulunur. |
| <section> | Ortak temaya sahip içerik bölümü (örn. “Özellikler”, “Avantajlar”). |
| <article> | Kendi başına anlam ifade eden, başka yerde paylaşılabilir içerik (blog yazısı, haber). |
| <aside> | Yan içerik; kenar çubuğu, ilişkili bağlantılar, reklam. |
| <footer> | Sayfanın alt kısmı; telif, iletişim ve alt menü bağlantıları. |
| <figure> / <figcaption> | Görsel ve onun açıkllama yazısı. |
Bunların yanı sıra HTML5, video ve ses oynatmak için <video> ve <audio> etiketlerini, çıktılar ve grafikler için <canvas> ve <svg> desteğini, modern formlar için email, date, number gibi yeni input tiplerini de getirdi. Son yıllarda spesifikasyona <dialog> (açılır pencere) ve Popover API gibi yenilikler de eklendi.
HTML Nasıl Çalışır?
HTML sayfaları .html uzantısıyla biter ve herhangi bir web tarayıcısıyla görüntülenebilir. Süreç şudur: tarayıcı sunucudan HTML dosyasını ister, gelen kodu satır satır okur ve bir DOM (Document Object Model) ağacı oluşturur. Bu ağaç, sayfadaki tüm etiketlerin hiyerarşik bir haritasıdır. Ardından tarayıcı CSS’i uygulayarak görünümü oluşturur, varsa JavaScript’i çalıştırır ve sonucu ekrana render eder. Tüm bu işlem genellikle bir saniyenin altında gerçekleşir.
Bir web sitesinin yayında olması için bu HTML dosyalarının 7/24 erişilebilir bir sunucuda barınması gerekir. İşte bu noktada web hosting devreye girer: hosting, sayfalarınızın tüm dünyaya açık tutulduğu disk alanıdır. Bir alan adı (domain) ve bir hosting paketiyle, hazırladığınız HTML sayfasını internette canlı hale getirebilirsiniz.
HTML5 Nedir? Eski Sürümlerden Farkı
HTML5, HTML dilinin modern halidir. Önceki kapalı sürüm olan HTML 4.01 (1999) ve onun sıkı kurallı türevi XHTML döneminin ardından, 2014’te HTML5 resmi tavsiye olarak yayınlandı. Bugün ise HTML, numaralı sürümler yerine WHATWG tarafından sürekli güncellenen bir “Living Standard” (Yaşayan Standart) olarak geliştirilmektedir; yani “HTML5” dediğinizde pratikte HTML’nin güncel halini kastedersiniz.
HTML5’in önceki sürümlere göre öne çıkan avantajları:
- Eklenti gerektirmeyen medya: Video ve sesi
<video>/<audio>ile oynatır; eski Flash teknolojisine ihtiyaç duymaz. - Anlamsal yapı:
header,nav,main,articlegibi etiketlerle daha okunabilir ve SEO dostu kod. - Mobil uyum:
viewportmeta etiketi ve duyarlı (responsive) tasarım için daha iyi destek. - Yerel depolama: Çevrim dışı çalışma ve tarayıcıda veri saklama (localStorage) imkanı.
- Geniş uyumluluk: Tüm güncel tarayıcılar (Chrome, Firefox, Safari, Edge) tarafından eksiksiz desteklenir.
HTML’nin Artıları ve Eksileri
| Artıları | Eksileri / Sınırları |
|---|---|
| Öğrenmesi kolaydır; başlangıç için ideal bir noktadır. | Tek başına statiktir; dinamik işlevler için JavaScript/PHP gerekir. |
| Tamamen ücretsizdir; lisans veya abonelik gerektirmez. | Hesaplama, koşul, döngü gibi programlama yetenekleri yoktur. |
| Tüm tarayıcılarda çalışır; geniş uyumluluk sunar. | Görsel düzen için CSS’e bağımlıdır. |
| Diğer dillerle (CSS, JS) uyum içinde çalışır. | Büyük projelerde kod hızla kalabalıklaşabilir; düzen şart. |
| SEO ve erişilebilirlik için sağlam bir temel oluşturur. | Güvenlik doğrudan HTML’de değil, sunucu/yazılım katmanında sağlanır. |
HTML Öğrenmek İçin Nereden Başlamalı?
HTML’nin açılımı “HyperText Markup Language” (Hiper Metin İşaretleme Dili) şeklindedir. Yazılım dünyasına yeni adım atanlar için HTML, sanıldığı kadar zor değildir; basit ve mantıksal bir yapısı vardır, bu yüzden çoğu geliştiricinin başlangıç noktasıdır. Etkili bir öğrenme yol haritası şöyle olabilir:
- 1. Temel etiketler: Yukarıdaki tablodaki etiketleri ezberlemeye çalışmadan, küçük sayfalar yazarak öğrenin.
- 2. CSS ile estetik: HTML iskeletini öğrendikten sonra CSS ile renk, yazı tipi ve düzen ekleyin. Bu ikisi neredeyse her zaman birlikte çalışır.
- 3. JavaScript ile etkileşim: Sayfaya hareket katmak istediğinizde JavaScript’e geçin.
- 4. Pratik yapın: Küçük bir kişisel sayfa veya CV sitesi oluşturup yayınlayın. Öğrenmenin en hızlı yolu uygulama yapmaktır.
Ücretsiz kaynaklar (MDN Web Docs, W3Schools, freeCodeCamp gibi) başlangıç için fazlasıyla yeterlidir; ücretli kurslar ise yapılandırılmış bir müfredat ve mentor desteği arayanlar için uygundur. Hangi kaynağı seçerseniz seçin, öğrendiklerinizi gerçek bir projede uygulamak en kritik adımdır.
HTML Yazarken Dikkat Edilmesi Gerekenler
- Etiketleri kapatın: Açılan her etiket (özellikle
<div>,<p>,<a>) kapatılmalıdır. Aksi halde sayfa yapısı bozulabilir. (<br>ve<img>gibi bazı etiketler kendi kendine kapanır.) - UTF-8 kullanın: Türkçe karakterlerin (ç, ğ, ı, ö, ş, ü) sorunsuz görünmesi için
<meta charset="UTF-8">etiketini her zaman ekleyin. - alt metni unutmayın: Her görsele anlamlı bir
altözelliği ekleyin; bu hem erişilebilirlik hem SEO için gereklidir. - Anlamsal etiket seçin: Her şeyi
<div>ile yapmak yerine uygun yerdeheader,nav,main,footerkullanın. - Düzenli yazın: İç içe etiketleri girintileyerek (indent) yazın; kod büyüdükçe okunabilirlik kazanır.
- HTTPS/SSL kullanın: Sayfanızı yayınlarken bir SSL sertifikası ile güvenli (https) hale getirin; tarayıcılar artık bunu standart kabul ediyor.
Sıkça Sorulan Sorular
HTML nedir, kısaca ne işe yarar?
HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan bir işaretleme dilidir. Etiketler aracılığıyla bir tarayıcıya metnin, görselin, bağlantının ve bölümlerin nerede ve nasıl yer alacağını söyler. İnternetteki neredeyse her web sayfasının temelinde HTML bulunur.
HTML bir programlama dili midir?
Hayır. HTML bir programlama dili değil, bir işaretleme (markup) dilidir. Programlama dilleri koşul, döngü ve hesaplama yapabilirken HTML yalnızca içeriğin yapısını tanımlar. Dinamik işlevler için JavaScript veya PHP gibi gerçek programlama dilleri kullanılır.
En çok kullanılan HTML etiketleri hangileridir?
En sık kullanılan etiketler başlıklar (h1-h6), paragraf (p), bağlantı (a), görsel (img), listeler (ul, ol, li), kapsayıcılar (div, span) ve anlamsal etiketler (header, nav, main, footer) şeklindedir. Günlük işlerin büyük kısmı 20-25 etiketle yapılır.
HTML5 nedir ve eski sürümlerden farkı nedir?
HTML5, HTML dilinin modern halidir. Önceki sürüm HTML 4.01’e kıyasla video/ses oynatmayı eklentisiz sağlar, header ve nav gibi anlamsal etiketler getirir, mobil uyumu ve yerel depolamayı iyileştirir. Günümüzde HTML, numaralı sürümler yerine sürekli güncellenen Living Standard olarak geliştirilir.
HTML yazmak için hangi programa ihtiyacım var?
Hiçbir özel programa ihtiyacınız yoktur. Not Defteri gibi basit bir metin editörüyle HTML yazıp dosyayı .html uzantısıyla kaydedebilirsiniz. Daha rahat bir deneyim için Visual Studio Code veya Sublime Text gibi ücretsiz kod editörleri tercih edilebilir.
HTML öğrenmek zor mu, ne kadar sürer?
HTML öğrenmesi en kolay web teknolojilerinden biridir. Temel etiketleri birkaç gün içinde kavrayabilirsiniz; rahat sayfa oluşturmaya ise birkaç haftalık düzenli pratikle ulaşırsınız. CSS ve JavaScript ile birlikte öğrenildiğinde tam bir web sayfası yapabilir hale gelirsiniz.
HTML ile tek başına web sitesi yapılır mı?
Yapılabilir, ancak yalnızca statik (sabit) bir sayfa elde edersiniz. Görsel tasarım için CSS, etkileşim ve dinamik özellikler için JavaScript gerekir. Modern siteler bu üç teknolojiyi birlikte kullanır.
Hazırladığım HTML sayfasını nasıl internette yayınlarım?
HTML dosyalarınızı internette yayınlamak için bir alan adı (domain) ve sayfalarınızın barınacağı bir web hosting hizmetine ihtiyacınız vardır. Dosyaları hosting hesabınıza yükledikten sonra sayfanız alan adınız üzerinden tüm dünyaya açık hale gelir.
HTML ile XHTML arasındaki fark nedir?
XHTML, HTML’nin XML kurallarına göre yazılan daha sıkı bir sürümüdür; tüm etiketlerin küçük harf ve kapalı olması gibi katı kuralları vardır. Bugün web geliştirmede pratik standart HTML5’tir; XHTML ise çoğunlukla eski sistemlerde veya özel XML ihtiyaçlarında karşınıza çıkar.
Hazırladığınız Web Sitesini Yayına Alın
HTML sayfalarınızı tüm dünyaya açmak için güvenilir bir alan adı ve hızlı bir hosting yeterli. Alastyr, İzmir’deki kendi veri merkezi, LiteSpeed altyapısı, ücretsiz SSL ve 7/24 Türkçe desteğiyle projelerinizi internette canlı tutar.
