HTML KODLARI VE ANLAMLARI
Bir web sayfasına sağ tıkla ve "kaynağı görüntüle"yi seç. Karşına çıkacak olan o satırlarca metin, her web sayfasının ortak dili olan HTML kodlarıdır. Tarayıcı bu kodları okuyup başlığı başlık, paragrafı paragraf, bağlantıyı bağlantı olarak gösterir. Yani gördüğün her web sayfasının arkasında bir HTML iskeleti vardır.
HTML (HyperText Markup Language); programlama dili değil, işaretleme dilidir. İçeriği "burası başlık", "burası paragraf", "burası bağlantı" diye etiketler. Etiketler sayfayı çalıştırmaz; sadece neyin ne olduğunu tarif eder. Tarayıcı bu etiketleri görerek sayfayı kurgular.
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.
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.
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.
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
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>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
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
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>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)
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
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
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>.
Bu davranış CSS ile değiştirilebilir ama varsayılan ayrımı bilmek sayfa düzenini anlamak için kritiktir.
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.
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.
