HTML KODLARI VE ANLAMLARI
HTML kodları, her web sayfasının ortak dilini oluşturan işaretleme etiketleridir; bu rehberde en sık kullanılan HTML kodları ve etiketlerinin ne işe yaradığı, kullanım örnekleriyle birlikte sırasıyla yer alıyor. İskelet etiketlerinden form yapılarına, semantik etiketlerden tablolara kadar pratik bir referans olarak okunabilir.
1. HTML etiketinin yapısı
Bir HTML etiketi açılış ve kapanış olmak üzere iki parçadan oluşur. Açılış etiketi <p>, kapanış etiketi </p> şeklindedir. İçerik açılış ile kapanış arasına yazılır.
<p>Bu bir paragraf metnidir.</p>Bazı etiketlerin kapanışı yoktur. Bunlara void element denir; tek başına yazılır. Örnek: <br> satır sonu, <hr> yatay çizgi, <img> görsel.
Attribute (öznitelik) mantığı
Etiketlere ek bilgi vermek için attribute kullanılır. Attribute açılış etiketinin içine yazılır ve isim="değer" biçimindedir.
<a href="https://vimaj.com">Vimaj</a>
<img src="resim.webp" alt="Açıklama">Burada href, src ve alt birer attribute'tur. Bağlantının nereye gideceğini, görselin hangi dosyaya ait olduğunu ve alternatif metnini tanımlarlar. Her etiketin hangi attribute'ları kabul ettiğini MDN web dokümantasyonu etiket etiket listeler; ezber yerine başvuru olarak kullanmak daha pratiktir.
2. Sayfa iskelet etiketleri
Her HTML belgesi belirli bir iskeletle başlar. Bu iskelet tarayıcıya sayfanın HTML olduğunu ve nasıl yorumlanması gerektiğini söyler.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>Ana Başlık</h1>
<p>Sayfa içeriği burada.</p>
</body>
</html>- <!DOCTYPE html> — Tarayıcıya "bu HTML5 belgesi" der. İlk satırda yer alır.
- <html> — Tüm sayfayı saran kök etiketidir.
lang="tr"dil bildirimi yapar. - <head> — Sayfaya ait üstveri yer alır: başlık, karakter seti, mobil ayarı, stil dosyaları. Görünür içerik değildir.
- <meta charset> — Karakter setini belirler. UTF-8 Türkçe karakterler için zorunludur.
- <meta viewport> — Mobil tarayıcının sayfayı doğru ölçeklendirmesini sağlar.
- <title> — Tarayıcı sekmesinde ve Google sonuçlarında görünen başlık.
- <body> — Görünür içerik buraya yazılır. Kullanıcının ekranda gördüğü her şey body içinde.
3. Başlık etiketleri (h1 - h6)
HTML'de altı seviye başlık etiketi vardır. <h1> en önemli, <h6> en az önemli başlığı temsil eder. Doğru hiyerarşi hem kullanıcı için okumayı kolaylaştırır hem de arama motorlarına sayfa yapısını anlatır.
<h1>Sayfa Ana Başlığı</h1>
<h2>Bölüm Başlığı</h2>
<h3>Alt Bölüm Başlığı</h3>
<h4>Detay Başlığı</h4>Pratik kurallar:
- Bir sayfada yalnızca tek
h1kullanılır - Hiyerarşi atlanmaz;
h1sonrası doğrudanh3kullanmak yanlış - Başlık etiketi sırf yazıyı büyütmek için seçilmez; bunun için CSS kullanılır
- Her başlık altta gelen içeriğin konusunu doğru özetlemeli
4. Metin ve paragraf etiketleri
Bir web sayfasında metin içeriği farklı amaçlar için farklı etiketlerle işaretlenir. Her etiketin görsel bir karşılığı değil, anlamsal bir karşılığı vardır.
<p> — paragraf
Düz metin bloğunu paragraf olarak işaretler. Tarayıcı paragraflar arasına otomatik boşluk koyar.
<p>İlk paragraf metni.</p>
<p>İkinci paragraf metni.</p><strong> ve <em> — vurgu etiketleri
<strong> önemli bilgiyi işaretler, varsayılan olarak kalın görünür. <em> tonal vurgu yapar, varsayılan olarak italik görünür.
<p>Lütfen <strong>dikkatli</strong> okuyun.</p>
<p>Bu kelime <em>vurgulu</em> okunmalı.</p>Sırf kalın veya italik göstermek için kullanılmazlar; sadece anlam taşıyan vurgular için tercih edilir. Görsel kalın/italik için <b> ve <i> ya da CSS kullanılır.
<br> ve <hr> — kesme etiketleri
- <br> — satır sonu. Yeni satıra geçer ama yeni paragraf başlatmaz
- <hr> — yatay çizgi. Konu değişimini görsel olarak gösterir
<span> — satır içi grup
Metnin bir kısmını gruplamak ve CSS ile özelleştirmek için kullanılır. Tek başına anlam taşımaz.
<p>Fiyat: <span class="indirim">199 TL</span></p>5. Bağlantı etiketi <a>
Bir sayfayı diğerine bağlayan etiket. Web'in temel davranışı buradan gelir. href attribute'u bağlantının hedefini belirler.
<a href="https://vimaj.com">Vimaj ana sayfa</a>
<a href="/seo-egitimi">SEO eğitimi</a>
<a href="mailto:bilgi@vimaj.com">E-posta gönder</a>
<a href="tel:+902120000000">Telefon ara</a>Sık kullanılan attribute'lar:
- href — bağlantının gideceği adres
- target="_blank" — yeni sekmede aç
- rel="noopener" — güvenlik açığı önlemek için yeni sekme bağlantılarında kullanılır
- rel="nofollow" — arama motoruna "bu bağlantıya otorite akıtma" der
6. Görsel etiketi <img>
Sayfaya görsel eklemek için kullanılır. Kapanış etiketi yoktur.
<img src="kahvalti.webp" alt="Tabakta yumurta ve simit"
width="600" height="400" loading="lazy">Önemli attribute'lar:
- src — görselin dosya yolu (zorunlu)
- alt — görsel yüklenemezse veya ekran okuyucu için alternatif metin (erişilebilirlik ve SEO için zorunlu)
- width / height — görselin genişlik ve yüksekliği (CLS sorunu önler)
- loading="lazy" — görseli ihtiyaç olunca yükler; sayfayı hızlandırır
- loading="eager" — sayfanın görünür alanındaki ilk görsel için kullanılır
7. Liste etiketleri
HTML'de iki temel liste türü vardır. Her ikisi de liste öğesi olarak <li> kullanır.
<ul> — sırasız liste (madde işareti)
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ul><ol> — sıralı liste (1, 2, 3)
<ol>
<li>Suyu kaynat</li>
<li>Çayı ekle</li>
<li>Demlenmeyi bekle</li>
</ol><dl> — tanım listesi
Bir terim ve açıklamasını birlikte göstermek için kullanılır.
<dl>
<dt>HTML</dt>
<dd>Sayfa yapısını oluşturan işaretleme dili.</dd>
<dt>CSS</dt>
<dd>Sayfanın görsel düzenini belirleyen stil dili.</dd>
</dl>8. Tablo etiketleri
Tablo verisi göstermek için kullanılır. Görsel düzen için tablo kullanılmaz; bunun için CSS Grid veya Flexbox tercih edilir.
<table>
<thead>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kalem</td>
<td>15 TL</td>
</tr>
<tr>
<td>Defter</td>
<td>45 TL</td>
</tr>
</tbody>
</table>- <table> — tabloyu saran etiket
- <thead> / <tbody> / <tfoot> — tablo bölümleri
- <tr> — bir satır (table row)
- <th> — başlık hücresi (table header)
- <td> — veri hücresi (table data)
9. Form etiketleri
Kullanıcıdan veri toplamak için kullanılır. İletişim, kayıt, arama gibi tüm formlar HTML form etiketleriyle kurulur.
<form action="/iletisim" method="post">
<label for="ad">Ad</label>
<input type="text" id="ad" name="ad" required>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" required>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="mesaj" rows="5"></textarea>
<button type="submit">Gönder</button>
</form>En sık kullanılan form etiketleri:
- <form> — tüm form alanlarını saran etiket.
actionverinin nereye gönderileceğini,methodise gönderim yöntemini (get/post) belirler - <input> — tek satırlık veri giriş alanı.
typeattribute'u alan türünü belirler - <label> — bir alana etiket koyar. Erişilebilirlik için zorunludur
- <textarea> — çok satırlık metin girişi
- <select> ve <option> — aşağı açılır liste
- <button> — tıklanabilir buton
Yaygın input type değerleri
type="text"— düz metintype="email"— e-posta (format doğrulamasıyla)type="password"— şifre alanı (gizli yazılır)type="tel"— telefontype="number"— sayıtype="date"— tarih seçicitype="checkbox"— onay kutusutype="radio"— seçim düğmesitype="file"— dosya yüklemetype="hidden"— kullanıcıya görünmeyen gizli alan
10. Semantik etiketler
HTML5 ile gelen semantik etiketler, sayfanın bölümlerini sadece görsel değil anlamsal olarak da tarif eder. Eski siteler her şeyi <div> ile sarardı; bu sayfanın "ne anlattığını" tarif etmiyordu. Semantik etiketler bu boşluğu doldurur.
<body>
<header>
<nav>Ana menü</nav>
</header>
<main>
<article>
<h1>Makale Başlığı</h1>
<section>İlk bölüm</section>
<section>İkinci bölüm</section>
</article>
<aside>Yan içerik / reklam</aside>
</main>
<footer>Telif ve bağlantılar</footer>
</body>- <header> — sayfanın veya bir bölümün üst alanı
- <nav> — navigasyon menüsü
- <main> — sayfanın ana içerik bölgesi (her sayfada tek)
- <article> — bağımsız bir içerik birimi (blog yazısı, ürün kartı)
- <section> — tematik bir bölüm
- <aside> — ana içerikten farklı yan içerik
- <footer> — sayfanın veya bölümün alt alanı
- <figure> ve <figcaption> — görsel + alt yazı grubu
11. Block ve inline ayrımı
HTML etiketleri iki temel davranış tipinden birine girer:
Block etiketler
Bütün satır genişliğini kaplar, üst ve alt taraflarına yeni satır eklenir. Örnek: <p>, <div>, <h1>, <ul>, <section>, <article>.
Inline etiketler
Sadece içeriğinin genişliği kadar yer kaplar, satır içinde devam eder. Örnek: <span>, <a>, <strong>, <em>, <img>.
Varsayılan davranış CSS ile değişir
Bu davranış CSS ile değiştirilebilir ama varsayılan ayrımı bilmek sayfa düzenini anlamak için kritiktir.
12. HTML komutları ezberlemek yerine
Yüzlerce HTML etiketi var; hepsini ezberlemek zorunda değilsiniz. Pratikte en sık kullanılan yaklaşık 20-25 etikettir. Bu etiketleri iyi anlayıp ne zaman hangisinin kullanılacağını öğrenmek, tüm listeyi ezberlemekten çok daha değerli.
HTML öğrenmenin en hızlı yolu pratiktir. Bir metin editörü açın, .html uzantılı bir dosya kaydedin, tarayıcıda açın ve sayfayı değiştirip yenileyerek deneyin. Her etiketin nasıl davrandığını gözünüzle gördüğünüzde kalıcı olarak öğrenirsiniz. Sistemli bir başlangıç için HTML eğitimi programları temel ve ileri etiketleri uygulamalı şekilde aktarır; ardından CSS ve JavaScript ile devam etmek doğal akıştır.
13. Yapının Özeti
HTML kodları; iskelet etiketleri, başlık, metin, bağlantı, görsel, liste, tablo, form ve semantik etiketler olarak gruplandırıldığında akılda kalıcı hale gelir. Her etiket sayfada bir görev üstlenir: bazıları yapı kurar, bazıları içerik işaretler, bazıları kullanıcıdan veri alır. İyi yazılmış HTML kodu hem tarayıcının doğru çalışmasını hem arama motorlarının sayfayı doğru anlamasını hem de görme engelli kullanıcıların ekran okuyucularla rahat gezmesini sağlar. Etiketleri ezberlemek değil, ne zaman hangisinin kullanılacağını anlamak hedef olmalıdır.
Sıkça Sorulan Sorular
HTML kodlarının tamamı kaç tane ve hepsini öğrenmek gerekir mi?
HTML5 spesifikasyonunda yaklaşık 110 etiket vardır ama günlük kullanımda 20-25 etiket toplam ihtiyacın yüzde 95'ini karşılar. Başlık, paragraf, bağlantı, görsel, liste, tablo, form ve semantik etiketler temel kümeyi oluşturur. Geri kalan etiketler özel durumlarda devreye girer; ihtiyaç olduğunda referans olarak bakılır. Hepsini ezberlemek gerekli değildir.
HTML5 ile önceki sürümler arasındaki temel fark nedir?
HTML5 ile semantik etiketler (header, nav, main, article, section, aside, footer) eklendi; eski siteler her şeyi div ile sarmak zorundaydı. Ayrıca form input type değerleri zenginleşti (email, date, tel gibi), video ve audio etiketleri geldi, canvas ile JavaScript çizim mümkün oldu. Bugün üretilen tüm web siteleri HTML5 standardını kullanır.
Görsellere alt metni neden ekliyoruz?
Üç ana sebep var. Birincisi erişilebilirlik; ekran okuyucu kullanan görme engelli kullanıcılar görseli anlamak için alt metni dinler. İkincisi performans; görsel yüklenemediğinde alt metin yerine geçer ve kullanıcı içeriği kaybetmez. Üçüncüsü SEO; Google görselin içeriğini alt metin üzerinden anlar ve görsel aramalarında sıralar. Bu üç sebepten alt metin pratik olarak zorunludur.
div ve section arasındaki fark nedir?
div anlam taşımayan jenerik bir gruplama etiketidir; sadece CSS veya JavaScript için bir kapsayıcı oluşturur. section ise tematik bir içerik bölümünü tarif eder; başlığı olan bağımsız bir konu birimidir. Bir sayfada giriş, ana içerik, sonuç gibi bölümler section ile sarılır. Sadece görünüm için kapsayıcı gerekiyorsa div, anlam gerekiyorsa section kullanılır.
HTML kodlarını nasıl test ederim?
En basit yol bir metin editörü açıp dosyayı .html uzantısıyla kaydetmek ve tarayıcıda çift tıklayarak açmaktır. Profesyonel geliştirme için VS Code gibi kod editörleri kullanılır; Live Server eklentisi sayfayı her kaydetmede otomatik günceller. Tarayıcıdaki F12 ile devtools açılır; Elements sekmesinde sayfa kodunu inceleyebilir, anlık değişiklik yapabilirsiniz. Kod doğruluğu için validator.w3.org sayfası HTML'inizi denetler.
HTML öğrenmek ne kadar zaman alır?
Temel etiketleri ve sayfa kurmayı öğrenmek günlük 1-2 saat çalışmayla 2-3 hafta içinde mümkündür. İyi seviyede HTML yazıp semantik, erişilebilirlik ve SEO uyumlu kod üretmek 2-3 ay alır. HTML tek başına yeterli değildir; sayfayı görsel olarak şekillendirmek için CSS, etkileşim eklemek için JavaScript ile birlikte öğrenilir. Üçü tamamlanmış bir frontend geliştirici olmak ise 6-12 aylık disiplinli çalışma gerektirir.
HTML kodu yazarken hangi hatalardan kaçınmalı?
En yaygın dört hata vardır. Etiketleri kapatmamak (özellikle div ve span'lerde); tarayıcı bunu görmezden gelse de yapıyı bozar. Hiyerarşi atlamak (h1 sonrası doğrudan h3); SEO ve erişilebilirlik için yanlıştır. Görsel sebeplerle yanlış etiket seçmek (sırf büyük görünsün diye h2 koymak); bunun için CSS kullanılır. Alt metni boş bırakmak veya 'resim' yazmak; alt metin görselin gerçek içeriğini tarif etmelidir.
